Guía básica de accesibilidad para editores de contenido

Una persona delante de un portátil da la mano a un brazo que sale de la pantalla del portátil.

Este artículo es una guía con 10 sencillas prácticas que pueden aplicar los publicadores de contenido para hacer sus contenidos más accesibles para todas las personas. Estas buenas prácticas son además independientes del gestor de contenidos que usen.

No son todas las recomendaciones que se pueden dar, pero sí son las más importantes y en las que más errores se cometen. Además, aplicarlas asegura un alto porcentaje de cumplimiento de la norma de accesibilidad EN 301 549 dentro del contenido de las páginas.

Índice:

Estructura el contenido mediante títulos reales, concisos y únicos
Pon descripción a las imágenes
Redacta enlaces con un texto de enlace comprensible
Usa las listas de elementos
Incluye una tabla solo si es imprescindible
Redacta de manera sencilla
Usa las herramientas del editor, no simules elementos
Borra el formato al pegar desde Word
Resalta el contenido de manera adecuada
No incluyas saltos de párrafo ni falsos retorno de carro
... aplica estas mismas reglas en tus documentos de ofimática

1. Estructura el contenido mediante títulos reales, concisos y únicos

Un contenido organizado en secciones precedidas de un título es mucho más fácil de comprender y de ojear por todos los usuarios.

El requisito más importante de esta pauta es crear títulos reales, es decir, usar la opción que el editor tiene para marcar los títulos. La inmensa mayoría de los gestores de contenido y de los procesadores de texto tienen una opción para marcar un texto como un título.

Lo habitual es que esta opción esté en un desplegable:

Desplegable 'Estilos de párrafo'. Entre las opciones hay varios estilos de título

Pero también hay gestores en los que cada sección tiene su propio formulario y el título de la sección se incluye en un campo de texto.

Formulario para crear una sección de contenido en Vignette. Uno de los campos es 'Título'.

Título de sección en Vignette

Nunca simules un título. Un título simulado es, por ejemplo, modificar el estilo de un texto (tamaño, color, negrita, etc. según permita el editor) para simular que es un título. O, por ejemplo, usar una tabla de una fila, con un color de fondo y un texto en su interior, para que parezca un título.

Otras buenas prácticas a la hora de redactar los títulos son:

Deben ser concisos.
Deben ser únicos en la página: no incluyas en la misma página dos títulos con el mismo texto.
Deben ser descriptivos para saber qué información encontrarás en su sección.
Deben seguir una jerarquía lógica. Piensa que el título de la página es el título de nivel 1, así que cada una de las grandes secciones en las que dividas tu contenido deberá tener un título de nivel 2; y dentro de estas, si tienen subsecciones, estarán precedidas de un título de nivel 3. Exactamente igual que si estuvieras redactando un documento de Word.

Contenido con títulos correctamente jerarquizados.

2. Pon descripción a las imágenes

La descripción de una imagen será, por ejemplo, la que se muestre si la imagen no se carga, o será la que lea el lector de pantalla a la persona con baja visión, ciega o sordociega que no puede verla.

El requisito más importante de esta pauta es incluir una descripción que transmita la misma información o función que la imagen transmite a las personas que pueden verla.

La inmensa mayoría de los gestores de contenido y de los procesadores de texto permiten poner una descripción a las imágenes. Lo habitual es que esta opción esté en las propiedades de la imagen y que se llame “Texto alternativo” o “Descripción de la imagen”. Puede ser que se pida desde un primer momento, o que debas ir a las propiedades de la imagen para incluirla:

Propiedades de una imagen. Se resalta el campo Texto alternativo.

Propiedades de una imagen en CKEditor

Otras buenas prácticas a la hora de redactar la descripción de las imágenes son:

La descripción debe ser concisa.
Si la descripción necesita más de 150 caracteres (por ejemplo, la descripción de una gráfica), en la descripción solo debes identificar qué imagen es y avisar de que incluyes la descripción detallada a continuación, en el contenido. Puede haber editores en los que se haya creado un campo específico de descripción extensa de la imagen para simplificar la labor del publicador.

Campo personalizado creado en Liferay para la descripción extensa de las imágenes
Evita las imágenes de texto. Si incluyes una imagen con texto, a menos que la imagen sea vectorial, el texto se verá borroso al hacer zoom y los usuarios que lo necesiten no podrán personalizar ese texto.
Si necesitas usar una imagen de texto (por ejemplo, la imagen de un esquema) asegúrate de que tiene la máxima calidad y de que la información que transmite también está presente en el contenido, en formato texto.
Si la imagen es puramente decorativa se puede dejar la descripción vacía, de este modo, el lector de pantalla ignorará la imagen. Pero pregúntate primero si de verdad la imagen no transmite ninguna información.

3. Redacta enlaces con un texto de enlace comprensible

Imagina que tienes los ojos cerrados y que un compañero te va leyendo el texto de los enlaces de la página: “pulsa aquí”, “enlace”, “más información”, “más información”, “descarga el documento”. Hay personas que recorren los enlaces o acceden a los mismos de una manera muy similar. No solo personas, también Google.

¿Sabrías a dónde te lleva el enlace “pulsa aquí”? ¿Sabrías qué diferencia hay entre pulsar el primer o el segundo “más información”? ¿Sabrías qué documento se va a descargar, qué formato o tamaño tiene?

Cuando redactes el texto de un enlace, lo más importante es que te esfuerces en que tenga toda la información que el usuario necesita para saber qué pasará cuando lo pulse.

Otras buenas prácticas a la hora de redactar los enlaces son:

Si el enlace va a descarga un fichero, indica siempre el formato y tamaño.
Los enlaces pueden tener un título. Normalmente se indica en las propiedades del enlace:

Propiedades de un enlace en CKEditor
No incluyas un título igual al texto del enlace.
Si el enlace se abre en ventana nueva, puedes usar el título para indicarlo (a no ser que se haya ideado otra forma de indicarlo, estandarizada para todo el portal).

4. Usa las listas de elementos

Los gestores de contenido y procesadores de texto tienen botones para marcar el texto como listas numeradas o listas con viñetas.

Lista numerada y lista con viñetas

Las listas de elementos permiten comprender y escanear mejor la información que si redactas el mismo texto en línea, separado por comas.

El requisito más importante de esta pauta es que no simules nunca las listas de elementos. Es muy habitual encontrar listas que en realidad son párrafos con un guion, un asterisco, una letra o número inicial para simular la lista.

Esto no es una lista (está simulada con un *):

* elemento 1

* elemento 2

Esto sí es una lista (está creada con la herramienta lista del editor):

Elemento 1
Elemento 2

Crear listas reales permite que los productos de apoyo, como un lector de pantalla o una línea braille, anuncien a sus usuarios las listas, cuántos elementos tienen y que los usuarios puedan saltarlas con un atajo del propio producto de apoyo.

5. Incluye una tabla solo si es imprescindible

Las tablas son un formato más difícil de comprender y de recorrer linealmente que otros, por ejemplo que una lista (a no ser que la lista tenga varios niveles de anidación).

Las tablas deben usarse solo si es el formato adecuado para mostrar los datos, porque estos son realmente datos tabulares.

Nunca uses las tablas para maquetar el texto, posicionar texto en pantalla o resaltar un contenido.

Las buenas pautas que debes seguir al crear una tabla son:

Haz la tabla lo más sencilla posible. Si es compleja, siempre puedes dividirla en dos más sencillas.
No unas o combines celdas.
Intenta que todas las celdas tengan un dato, aunque sea 0 o esté repetido.
Indica en las propiedades de la tabla si esta tiene una fila y/o una columna de encabezado.

Propiedades de una tabla en CKEditor
Intenta que la tabla no tenga varios niveles de encabezado.
Las tablas tienen que tener una breve descripción que identifique la tabla y ayude a comprender lo más relevante de su estructura. La descripción ayuda a que las personas que no pueden verla tengan esa primera información que obtienen en un primer vistazo las personas que sí pueden verla, por ejemplo, que en la última columna están los enlaces de descarga o que en la última fila están los totales.
Los gestores de contenido y los procesadores de texto suelen permitir asociar un título a la tabla, que se muestra antes o después de la misma, como un pie. Es recomendable incluirlo, pero ten en cuenta que el título de la tabla no tiene la misma función que la descripción, y que el texto de ambos no debería ser redundante sino complementario.

Ejemplo de tabla con descripción visible y útil para todos los usuarios y título en el pie:

Tabla con una breve descripción previa identificando la tabla e indicando que los totales están en la última fila y columna; y un título al pie identificando la tabla y el año de los datos que muestra. A continuación se incluye en el texto el título y la descripción que tiene la tabla.

Tabla creada con Liferay: con título en el pie identificado la tabla (<caption>) y descripción previa explicando los rasgos de la estructura (personalizada para que el gestor la asocie por código a la tabla)

Descripción: Listado de recursos humanos de Empresa XYZ. En cada fila se indica el número de personas por tipo de personal en Huesca, Zaragoza y Teruel. En la última columna y en la última fila se muestran los totales.

Título: Recursos humanos de Empresa XYZ. Datos de 2018

6. Redacta de manera sencilla

En el año 2013 la OCDE (Organización para la Cooperación y el Desarrollo Económicos) publicó los resultados del estudio sobre las competencias básicas de la población adulta. El informe señalaba que, en España, un adulto medio puede realizar con soltura tareas lectoras de nivel 2.

Un nivel 2 de comprensión lectora implica que:

cuesta extraer conclusiones de una lectura,
se tienen problemas para entender textos densos,
cuesta interpretar estadísticas sencillas,
se pierden en un texto de cierta profundidad y riqueza,
cuesta manejarse en la lectura de textos digitales.

Redacta por tanto de una manera clara, concisa, directa y sencilla para que la mayoría de las personas pueda comprender fácilmente el mensaje:

Redacta con frases cortas y sencillas, con una idea por frase.
Redacta con párrafos cortos, con un tema por párrafo.
Respeta el orden de la frase: sujeto + verbo + complementos.
Es preferible usar la voz activa, el indicativo y oraciones afirmativas.
Usa las listas para romper la monotonía del texto y ayudar a ojear el contenido.
Utiliza un léxico sencillo.
Revisa la ortografía.
Incluye la forma extendida de los acrónimos la primera vez que los uses, por ejemplo, BOE (Boletín Oficial del Estado)
No uses abreviaturas a menos que sean de uso común, como c/ o etc.
Comienza con lo más relevante, y si es posible y pertinente, incluye un resumen al comienzo y unas conclusiones al final.
El programa gratuito Inflesz orienta sobre la dificultad de lectura que tiene un texto.

7. Usa las herramientas del editor

Los gestores de contenido y procesadores de texto pueden tener muchas y variadas herramientas: marcar una cita, crear una nota al pie, incluir un índice de contenidos, marcar un texto como párrafo destacado, marcar un texto en otro idioma, incluir un pie de foto, etc.

La regla básica es la misma que he indicado al hablar de los títulos y las listas: usa las herramientas que te da el gestor de contenidos o el procesador de texto, y no simules elementos para los cuales tienes una herramienta.

Si creas los contenidos con la herramienta adecuada, en vez de simularlos, los productos de apoyo van a poder reconocerlos y anunciarlos. Además, ayudas a mantener la consistencia del diseño y facilitas los futuros cambios de diseño y migraciones de contenido.

8. Borra el formato al pegar desde Word

Las consecuencias negativas de pegar contenido directamente desde Word al editor de texto del gestor de contenidos varía de unos a otros. Pero, incluso en aquellos que por defecto limpian el código pegado, o tienen una opción específica “Pegar desde Word”, ocurre que a menudo el contenido se pega con alguna etiqueta no semántica, y por tanto no permitida (<u>, <b>, <i>).

Intenta no pegar el contenido directamente desde Word, y si lo haces, pégalo como texto plano o bórrale el formato (si existen estas opciones en el gestor):

Opción de algunos editores Eliminar formato del texto seleccionado.

Opción de algunos editores Pegar como texto plano.

Si no tiene estas opciones, pegar el texto desde Word al bloc de notas y de este al gestor, tiene el mismo efecto.

9. Resalta el contenido de manera adecuada

Cuando se intentan resaltar muchos elementos en una página, se acaba por no resaltar nada, porque hay demasiados elementos intentando captar nuestra atención.

Resalta solo lo realmente importante, y sigue estas pautas:

Usa la negrita para resaltar palabras clave. No uses la negrita para resaltar párrafos enteros.
No escribas en mayúsculas para resaltar un texto. Las mayúsculas son más difíciles de leer.
Evita escribir en itálica, y no la uses nunca para resaltar un texto. El texto en itálica es más difícil de entender.
No uses una tabla para resaltar un párrafo, aprovechando que a la tabla se le puede dar un borde o color.
Si el editor permite aplicar un estilo destacado a un párrafo, úsalo, pero con moderación.
Si el editor tiene la herramienta “Cita”, úsala solo para marcar citas, no para resaltar un párrafo.

10. No incluyas saltos de párrafo ni falsos retorno de carro

Cada retorno de carro extra crea un párrafo vacío.

Si pulsas la tecla “Enter” mientras tienes pulsada la tecla “Mayúsculas”, lo habitual es que se cree un falso retorno de carro (etiqueta <br>).

Los retornos de carro extra y los falsos retornos de carro rompen la consistencia del diseño y, lo que es peor, son anunciados a los usuarios de productos de apoyo (como lectores de pantalla o línea braille). Esto es especialmente grave si, como ocurre a menudo, estos párrafos vacíos se quedan con un estilo de título.

Si crees que el portal necesita algún cambio en el espaciado de los elementos, debes solicitar que se haga de forma generar en las CSS del portal.

Aplica estas mismas reglas en tus documentos de ofimática

Seguir estas mismas buenas prácticas en tus documentos de ofimática (por ejemplo, Word) te va ayudar a crear documentos accesibles.

Recuerda que:

En las últimas versiones de Office hay un validador de accesibilidad en "Archivo" > "Información" > "Comprobar si hay problemas".
Cuando exportes el documento a PDF marca siempre en las opciones de exportación:
- PDF etiquetado (o Etiquetas de la estructura del documento para accesibilidad)
- Crear marcadores
Todos los documentos que se adjuntan a las páginas deberían ser accesibles.