Imágenes accesibles: texto alternativo, decorativas y WCAG

¿Qué son las imágenes accesibles?

Las imágenes accesibles dan a quienes no pueden verlas la misma información o función que obtiene el resto, mediante una alternativa textual. En HTML suele ser el atributo alt del elemento img. El criterio de conformidad 1.1.1 de WCAG (nivel A) exige que el contenido no textual tenga una alternativa textual que cumpla el mismo propósito, y solo exceptúa la decoración pura si se implementa de modo que la tecnología de asistencia pueda ignorarla.

Empieza por el propósito, no por la imagen

La alternativa textual correcta depende de por qué está la imagen en la página. El W3C WAI Images Tutorial (en inglés) lo plantea así: la determina el autor según el uso, el contexto y el contenido. Una foto de un pájaro necesita una mención breve en un sitio de parques y una descripción detallada en un sitio de observación de aves. Pregúntate para qué sirve la imagen y elige el tipo:

Cómo se ve en HTML

<!-- Informativa: di lo que significa -->
<img src="dog.jpg" alt="Perro con una campanilla en el collar">

<!-- Decorativa: alt vacío, no se anuncia nada -->
<img src="divider.png" alt="">

<!-- Funcional: describe la acción, no la imagen -->
<a href="/print"><img src="printer.svg" alt="Imprimir esta página"></a>

Un lector de pantalla lee el texto alternativo en lugar de la imagen. Si falta el atributo, el lector de pantalla puede anunciar el nombre del archivo, lo que en el mejor de los casos es ruido. Un alt="" vacío le indica que omita la imagen a propósito, y eso es distinto de no poner el atributo.

Imágenes complejas

Un gráfico o diagrama necesita dos partes: un alt corto que identifique la imagen y una descripción larga en el contenido de la página con la información esencial. El tutorial de WAI describe varias formas de conectarlas: un enlace junto a la imagen, una figure con figcaption o aria-describedby apuntando a un párrafo. Esta última trata el destino como un único párrafo continuo, así que solo sirve para texto plano, no para encabezados ni tablas. Una tabla de datos junto al gráfico suele ser lo que mejor sirve a todos.

Dónde encaja ARIA

Prefiere el HTML nativo. El atributo alt es el mecanismo principal. Según el tutorial de WAI, role="presentation" tiene menos compatibilidad que un alt vacío para imágenes decorativas. Recurre a ARIA cuando el HTML solo no pueda expresar la relación, por ejemplo con aria-describedby para una descripción larga. Las imágenes decorativas conviene entregarlas como fondos CSS, así quedan fuera del marcado.

Errores comunes

• Sin atributo alt. Puede leerse en voz alta el nombre del archivo y los verificadores automáticos lo marcan.
• Nombre de archivo o «imagen de» como alt. Di lo que transmite la imagen. En una imagen funcional, «Imprimir esta página» es mejor que «(imagen de una) impresora».
• Repetir el texto contiguo. Si un enlace ya dice «Precios», un icono a su lado necesita un alt vacío.
• Texto en una imagen sin alternativa textual. Si las palabras no aparecen en ningún otro sitio, el alt debe contenerlas.
• Un gráfico con solo un eslogan como alt. Pon los datos en la página.
• Marcar como decorativas imágenes con significado. Es un juicio sobre el contexto, así que revísalo en lugar de automatizarlo sin más.

Probar y monitorizar imágenes accesibles

Las pruebas de accesibilidad automatizadas detectan un alt ausente, pero no pueden juzgar si el texto es acertado, porque según el tutorial de WAI eso lo decide el autor. Combina los análisis automáticos con una revisión manual de las imágenes que aportan significado. LoadFocus Page Speed Monitoring ejecuta auditorías Lighthouse programadas, que incluyen la categoría de accesibilidad (Accessibility), desde 25 regiones en la nube. Las imágenes accesibles también pueden ser rápidas, así que revisa el tamaño de imagen ya que estás. Para más información, consulta por qué las pruebas de rendimiento deben incluir la accesibilidad, las mejores herramientas de pruebas de accesibilidad web y por qué conviene mejorar las imágenes de tu sitio. Los tres artículos están en inglés. El conjunto de reglas más amplio está en las WCAG.

Preguntas frecuentes: imágenes accesibles

¿Qué es el texto alternativo?

El texto alternativo (alt text) es la alternativa textual del atributo alt de un elemento img. Los lectores de pantalla, las líneas braille y los navegadores con las imágenes desactivadas lo usan en lugar de la imagen.

¿Necesita texto alternativo toda imagen?

Todo img necesita el atributo alt. Las imágenes informativas y funcionales necesitan un valor con significado. Las decorativas necesitan uno vacío, alt="", para que la tecnología de asistencia las omita.

¿Qué extensión debe tener el texto alternativo?

Corto. El tutorial de WAI describe el texto alternativo informativo como una frase corta. Si la imagen necesita más, como un gráfico, pon la descripción larga en el contenido de la página.

¿Cuándo uso un alt vacío?

Cuando la imagen es pura decoración, solo da formato o repite texto que ya está a su lado. Considéralo una decisión sobre el contexto y no un atajo.

¿Necesito aria-label en las imágenes?

Normalmente no. Un alt correcto es la vía estándar para img. ARIA ayuda con los enlaces a descripciones largas, como aria-describedby en una imagen compleja.

¿Cómo describo un gráfico?

Dale un alt corto que nombre el gráfico y pon los datos esenciales como texto en la página, por ejemplo en una tabla o en el párrafo contiguo.