El atributo alt en HTML es el mecanismo principal para proporcionar una descripción textual de las imágenes a quienes no pueden verlas: usuarios de lectores de pantalla, personas con conexiones lentas que no cargan las imágenes y motores de búsqueda. El criterio 1.1.1 de WCAG 2.1 exige que todo contenido no textual tenga una alternativa textual que sirva el mismo propósito.

Criterio 1.1.1 — Contenido no textual — Nivel A

Criterio 1.1.1 de WCAG 2.1

Todo contenido no textual que se presenta al usuario tiene una alternativa textual que sirve el mismo propósito equivalente, excepto en las situaciones listadas a continuación: controles e información de entrada, medios tempodependientes, pruebas, experiencias sensoriales, CAPTCHA y contenido decorativo.

La clave del criterio está en la expresión "sirve el mismo propósito equivalente". La alternativa textual no describe la imagen como si fuera una fotografía artística; describe la función o la información que aporta esa imagen en su contexto.

Tipos de imágenes y su tratamiento según WCAG

Imágenes informativas

Aportan información que no aparece en el texto circundante. El atributo alt debe transmitir esa información de forma concisa.

Ejemplo: Un gráfico de barras que muestra el porcentaje de sitios web accesibles en España en 2024.
Alt adecuado: "Gráfico de barras: el 32% de los sitios web del sector público español cumple WCAG 2.1 AA según el informe de supervisión 2024."

Imágenes decorativas

No aportan información ni función: son puramente estéticas. En este caso, el atributo alt debe estar presente pero vacío (alt=""). Un alt vacío indica al lector de pantalla que ignore la imagen por completo. Si se omite el atributo alt, algunos lectores de pantalla leen el nombre del archivo, lo que resulta confuso.

Ejemplo: Una imagen de fondo o un separador visual sin significado semántico.
Alt adecuado: alt=""

Imágenes funcionales

Son imágenes que actúan como enlace o botón. El alt debe describir el destino o la función, no el aspecto visual de la imagen.

Ejemplo: El logotipo de la empresa en la cabecera, que enlaza a la página de inicio.
Alt adecuado: "Riadexmo — Ir a la página de inicio" (no "Logotipo azul con letras blancas").

Imágenes complejas

Gráficos, mapas e infografías que contienen una cantidad de información que no cabe en un atributo alt breve. En estos casos, WCAG recomienda proporcionar también una descripción larga (longdesc está obsoleto; la alternativa actual es incluir la descripción en el texto de la página o vincular a una página de descripción).

Imágenes de texto

Texto renderizado como imagen (por ejemplo, un titular con tipografía personalizada). El alt debe incluir exactamente el mismo texto que aparece en la imagen.

Errores frecuentes en el uso del atributo alt

Laurel de la iniciativa de accesibilidad web del W3C WAI, símbolo de reconocimiento a sitios accesibles
Laurel de accesibilidad web W3C WAI. Fuente: Wikimedia Commons

Los errores más habituales que detectan las auditorías de accesibilidad en sitios informativos españoles son:

  • Alt ausente: La etiqueta <img> no tiene atributo alt. El lector de pantalla intentará leer el nombre del archivo, que rara vez es descriptivo.
  • Alt redundante: La descripción repite exactamente el texto del caption o del párrafo adyacente. El usuario de lector de pantalla escucha la misma información dos veces.
  • Alt genérico: Usar "imagen", "foto", "ilustración" o el nombre del archivo como texto alternativo no aporta información útil.
  • Alt excesivamente largo: Un alt de más de 100–150 caracteres suele indicar que la descripción debería estar en el texto de la página, no en el atributo.
  • Alt en imágenes decorativas: Añadir texto descriptivo a imágenes puramente decorativas fuerza al usuario de lector de pantalla a escuchar descripciones irrelevantes.

La regla del propósito equivalente

La forma más sencilla de evaluar si un atributo alt es correcto es hacerse la pregunta: si se sustituyera la imagen por el texto del atributo alt, ¿el contenido de la página comunicaría la misma información y cumpliría la misma función?

Si la respuesta es sí, el alt es adecuado. Si hay pérdida de información o el texto no tiene sentido fuera de contexto, hay que revisarlo.

Imágenes SVG y accesibilidad

Los archivos SVG incrustados en HTML mediante la etiqueta <img> siguen las mismas reglas que cualquier otra imagen. Sin embargo, cuando el SVG se incrusta directamente en el HTML (SVG inline), la alternativa textual se añade con los atributos ARIA: role="img" y aria-label, o con el elemento <title> dentro del SVG.

Texto alternativo e indexación en buscadores

Google y otros motores de búsqueda utilizan el atributo alt para comprender el contenido de las imágenes. Un alt bien redactado mejora la indexación de las imágenes en búsquedas relacionadas, aunque WCAG no considera la optimización para buscadores como objetivo de accesibilidad. La prioridad es siempre la utilidad para el usuario humano.

Herramientas para auditar textos alternativos

  • La pestaña de Accesibilidad en las herramientas para desarrolladores de Chrome y Firefox permite inspeccionar el árbol de accesibilidad y ver cómo cada imagen es anunciada por el lector de pantalla.
  • La extensión aXe detecta imágenes sin alt y otros problemas de accesibilidad.
  • El validador de HTML del W3C (validator.w3.org) marca imágenes sin atributo alt como advertencias.

Un texto alternativo efectivo no describe lo que se ve, sino lo que la imagen significa en el contexto de la página.

Referencia técnica oficial

El W3C WAI mantiene el documento Images Tutorial, con árboles de decisión y ejemplos para cada tipo de imagen. Es la referencia técnica más completa disponible sobre este criterio.