Una de las medidas de accesibilidad web más famosas es añadir un texto alternativo a las imágenes de la web. De hecho es el primer criterio de las guías de accesibilidad (WCAG) de contenido web (enlace externo inglés). Este texto por defecto solo se muestra si la imagen no se ha podido cargar o si se navega con ayudas técnicas como los lectores de pantalla. De esta forma las personas que por el motivo que sea no puedan ver las imágenes pueden entender por qué motivo esa imagen está ahí y la intención comunicativa que se pretendía.
A nivel técnico se puede ofrecer la alternativa textual de diferentes formas. Por regla general dentro de la etiqueta HTML de la imagen se añade el atributo alt. Ejemplo técnico de las guías de accesibilidad sobre el atributo alt (enlace externo en inglés).
Afortunadamente WordPress nos simplifica al máximo la parte técnica, y añadir textos alternativos a las imágenes es algo tremendamente sencillo.
Para añadir una imagen a tu WordPress tenemos varias opciones como veremos a continuación.
Añadiendo el texto alternativo en WordPress
Biblioteca de medios
Esta es la forma más tradicional. Vamos a Medios > Añadir nuevo y seleccionamos los archivos a subir.
Una vez está la imagen en nuestra biblioteca, si la seleccionamos, se abre un pop up en el que podemos añadir varios campos de texto.
Los campos que podemos agregar a las imágenes son:
- Texto alternativo.
- Título (por defecto usa el nombre del archivo).
- Leyenda (pie de foto, texto que aparece debajo de la imagen para añadir contexto o atribuir su autoría).
- Descripción (descripción más larga que el texto alternativo solo accesible en la página de archivo adjunto y no en la entrada o página en la que se inserta, no confundir con el atributo de imagen longdesc).
El texto alternativo de la imagen se añade en el campo “Texto alternativo”. Fácil, ¿verdad?.
Editor de bloques
Desde el editor de bloques también podemos añadir el texto alternativo. Para ello añadimos un bloque de imagen, podemos subir directamente la imagen o seleccionarla de nuestra biblioteca de medios.
Una vez la has añadido fíjate en la columna lateral en la que se muestran las opciones y propiedades del bloque. Busca el desplegable “Ajustes de las imágenes”, ahí es donde puedes añadir el texto alternativo de esa imagen.
¿Cómo es un buen texto alternativo?
Ahora hablemos sobre cómo redactar un buen texto alternativo porque no sirve cualquier cosa.
Déjalo vacío si la imagen es puramente decorativa
Seguro que te has fijado que independientemente de la forma que elijas para añadir el texto alternativo, debajo del campo “Texto alternativo” hay un enlace y un texto: “Describe el propósito de la imagen. Déjalo vacío si la imagen es puramente decorativa.”
En efecto, si la imagen realmente no aporta absolutamente al contenido de la página o de la entrada el texto alternativo debe quedar vacío. ¿Por qué? Porque si la imagen solo es decorativa lo mejor es que quien no la pueda ver ni se entere de que ahí hay una imagen. Los lectores de pantalla no anuncian la imagen si encuentran que su atributo alt está vacío, así su experiencia navegando por la web es mejor.
WordPress por defecto añade el atributo alt a todas las imágenes, de esta forma la evaluación automática de la accesibilidad no devolverá ningún error por este motivo.
Describe el propósito de la imagen
Simple y llanamente eso, describir por qué está ahí esa imagen, exceptuando las decorativas como se ha tratado en el punto anterior.
A veces el texto alternativo deberá ser una descripción de la imagen, o de un detalle de esta. Otras veces deberá ser la descripción de un concepto más abstracto.
Por ejemplo, mira esta imagen.
Esta fotografía es de la despedida de WordCamp Granada 2019 y se podrían escribir diferentes textos según la intención con la que se añada al contenido.
Por ejemplo podría estar escribiendo sobre WordCamp Granada y sobre su organización y voluntariado. En ese caso un buen texto alternativo sería: “Organizadores y voluntarios de WordCamp Granada 2019 en el escenario principal durante la despedida”.
Aunque también podría querer hablar de la tradición de escribir una entrada sobre las WordCamps a las que se asiste y añadir la foto como ejemplo de que se animó a los asistentes a escribir sobre la WordCamp. En este caso un texto alternativo sería: “En la pantalla principal de WordCamp Granada 2019 durante la despedida se proyectó este mensaje: No se termina una WordCamp hasta que se escribe de ella”.
Pero esta misma imagen también encajaría en otros textos, sobre mi experiencia como ponente por primera vez, sobre las amistades que se entablan asistiendo a WordCamps, sobre la comunidad WordPress, sobre las ganas que tenemos de volver a poder a asistir a eventos presenciales, etc. Para cada una de estas temáticas es probable que el texto alternativo adecuado varíe.
Longitud
No hay una longitud máxima definida en las WCAG. Lo ideal es que el texto alternativo no sea muy largo, más o menos la longitud de un tweet, por ejemplo.
Esto genera un problema, porque no siempre se puede generar un texto alternativo completo en un espacio tan breve. Para ello hay diferentes estrategias como el atributo de descripción larga que veremos en otro artículo.
Consejos
- Evita que el texto alternativo empiece por: “imagen de”, “fotografía de” o similares, el lector de pantalla ya anuncia que se trata de una imagen.
- Si en la imagen aparece texto y es importante para entender su significado, el mismo texto debe aparecer en el texto alternativo.
- Si en la imagen aparece texto y es importante para entender su significado pero aparece como texto real cerca de la imagen, lo mejor es considerar que la imagen es decorativa y dejar el texto alternativo vacío.
- Si el texto alternativo es redundante respecto al texto de la entrada dejar este campo vacío.
- Si la imagen sirve para ejecutar una acción, por ejemplo el botón buscar con un icono de lupa el texto alternativo deberá indicar la funcionalidad y no la imagen en sí.
- Si la imagen es una gráfica creada a partir de unos datos, una buena opción es ofrecer los datos en la propia entrada o describirla y dejar el campo alternativo vacío.
