Fallo común WCAG 2.2

F38Imágenes decorativas sin atributo alt

Nombre oficial en el W3C: Fallo del criterio de conformidad 1.1.1 debido a no marcar las imágenes decorativas en HTML de forma que la tecnología de asistencia pueda ignorarlas

En pocas palabras

El error es dejar sin atributo alt una imagen que solo decora, como un icono junto a un texto que ya dice lo mismo. Sin ese atributo, el lector de pantalla no sabe que puede saltarla y anuncia «gráfico» o el nombre del archivo. La solución es poner el alt vacío: alt="".

Por qué es importante

Un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) intenta anunciar todas las imágenes. Solo se salta las que están marcadas como decorativas.

Si falta el alt, muchos lectores leen el nombre del archivo, como «icono-calendario punto svg». Es ruido que no aporta nada.
En un menú con diez iconos, la persona oye diez ruidos, uno antes de cada opción. Navegar se vuelve lento y cansado.
Las herramientas de revisión automática también marcan estas imágenes como error.

Cómo evitarlo

Decida si cada imagen informa o solo decora. Decora si, al quitarla, no se pierde ninguna información.
A las decorativas, póngales alt="": el atributo presente y vacío, sin ningún espacio dentro.
No quite el atributo. Para el lector de pantalla, no tener alt y tener alt="" no es lo mismo.
También vale role="presentation". Pero alt="" es más sencillo y lo entienden más lectores.
Si la imagen es solo un adorno, piense en ponerla como fondo con CSS. Así no hace falta ningún alt.

Ejemplo práctico

Los iconos que acompañan a un texto que ya dice lo mismo son decorativos. El lector de pantalla debe poder saltarlos. Ejemplo: la lista de trámites destacados en la portada de un ayuntamiento.

Así no: Iconos decorativos sin atributo alt

Los iconos son decorativos, porque el texto del enlace ya lo dice todo. Pero no tienen atributo alt ni role="presentation", así que el lector de pantalla no puede saltarlos. Según el lector, anuncia «gráfico», el nombre del archivo o la dirección de la imagen antes de cada enlace. Para notarlo, recorra la lista con NVDA o VoiceOver.

Captura de pantalla del ejemplo incorrecto: Iconos decorativos sin atributo alt — Así se ve el ejemplo incorrecto.

La demostración contiene, a propósito, el error de accesibilidad que se explica.

Ver el código del ejemplo incorrecto

<style>
  .tramites { list-style: none; padding: 0; margin: 0; }
  .tramites li { margin: 8px 0; }
  .tramites a { display: inline-flex; align-items: center; gap: 8px; color: #412c56; font-weight: bold; }
  .tramites a:focus-visible { outline: 3px solid #412c56; outline-offset: 2px; }
</style>
<h2>Trámites más solicitados</h2>
<ul class="tramites">
  <li><a href="#"><img src="data:image/svg+xml,…" width="24" height="24"> Cita previa</a></li>
  <li><a href="#"><img src="data:image/svg+xml,…" width="24" height="24"> Certificado de empadronamiento</a></li>
  <li><a href="#"><img src="data:image/svg+xml,…" width="24" height="24"> Pago de recibos e impuestos</a></li>
</ul>

Así sí: Iconos decorativos con alt vacío

Se añade alt="" a cada icono. También valdría role="presentation", pero el alt vacío es más sencillo y compatible. Ahora los lectores se saltan las imágenes y anuncian solo el texto de cada enlace.

Pruébelo aquí:

Ver el código del ejemplo correcto

<style>
  .tramites { list-style: none; padding: 0; margin: 0; }
  .tramites li { margin: 8px 0; }
  .tramites a { display: inline-flex; align-items: center; gap: 8px; color: #412c56; font-weight: bold; }
  .tramites a:focus-visible { outline: 3px solid #412c56; outline-offset: 2px; }
</style>
<h2>Trámites más solicitados</h2>
<ul class="tramites">
  <li><a href="#"><img src="data:image/svg+xml,…" width="24" height="24" alt=""> Cita previa</a></li>
  <li><a href="#"><img src="data:image/svg+xml,…" width="24" height="24" alt=""> Certificado de empadronamiento</a></li>
  <li><a href="#"><img src="data:image/svg+xml,…" width="24" height="24" alt=""> Pago de recibos e impuestos</a></li>
</ul>

Cómo comprobarlo

Lector de pantalla (NVDA o VoiceOver)

Recorrer los enlaces con Tab. En NVDA, también con la tecla K en modo exploración.
Comprobar que solo se anuncia el texto de cada enlace. No deben oírse «gráfico», nombres de archivo ni rutas de imagen.

Debería anunciar: «Cita previa, enlace», sin mencionar ninguna imagen

Herramientas del navegador

Abrir las herramientas de desarrollo (F12). En la consola, ejecutar document.querySelectorAll('img:not([alt]):not([role=presentation]):not([role=none])'). Así se listan las imágenes sin alt ni rol de presentación.
En el árbol de accesibilidad de Chrome, comprobar que los iconos corregidos aparecen como ignorados. No deben añadir nada al nombre del enlace.

Validación automática

axe DevTools lo detecta con la regla image-alt. WAVE lo marca como «Missing alternative text» o «Linked image missing alternative text». Las imágenes sin alt son fáciles de encontrar de forma automática.
Lo que no deciden es si la imagen es decorativa o informativa. Si es decorativa, se corrige con alt=""; si informa, necesita un texto. Esa decisión es manual.

Errores frecuentes en auditorías

Iconos sin alt insertados como img dentro de enlaces o botones que ya tienen texto.
Separadores, fondos o adornos puestos con img y sin alt, en lugar de con CSS (background-image).
Creer que no poner el alt equivale a alt="". Sin el atributo, muchos lectores anuncian el nombre del archivo.
Plantillas o componentes de terceros que crean imágenes decorativas sin alt y que nadie revisa.

Para saber más, en nuestro blog

Árbol de decisión para escribir un texto alternativo
Un árbol de decisión es una sencilla manera de saber cuándo hay que escribir un texto alternativo en una imagen y cuándo no.

Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica F38 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

HTML

Descripción

Este documento describe una condición de fallo relativa a las alternativas textuales de imágenes que la tecnología de asistencia debería ignorar. Si no existe ningún atributo alt, las tecnologías de asistencia no pueden ignorar el contenido no textual. Para evitar un fallo de este criterio de conformidad, el atributo alt debe estar presente y tener un valor nulo (es decir, alt="" ).

Este documento describe una condición de fallo relativa a las alternativas textuales de imágenes que la tecnología de asistencia (TA) debería ignorar. Si una imagen tiene el atributo role="presentation", la TA la ignorará. Sin embargo, si no tiene role="presentation" y no existe ningún atributo alt, las tecnologías de asistencia no pueden ignorar la imagen. En las imágenes decorativas que la TA debe ignorar, para evitar un fallo de este criterio de conformidad hay que usar role="presentation" o bien incluir el atributo alt con un valor nulo (es decir, alt="").

Ejemplos

Imágenes decorativas que no tienen atributo alt ni atributo role

Pruebas

Procedimiento

Para cada elemento img que se use como contenido puramente decorativo:

Comprobar si el elemento no tiene atributo role o tiene un atributo role con un valor distinto de presentation.
Comprobar si el elemento no tiene atributo alt o tiene un atributo alt con un valor que no es nulo.

Resultados esperados

Si las comprobaciones n.º 1 y n.º 2 son verdaderas, se da esta condición de fallo y el contenido falla el criterio de conformidad.

Cómo lo comprobamos en ADDAW

Este error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.

Solicitar una auditoría

Basado en la técnica F38 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.