Fallo común Fallos comunes WCAG 2.2

F38Fallo 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 resumen

Este fallo se produce cuando una imagen puramente decorativa no lleva ni alt="" ni role="presentation". Sin ese marcado, los lectores de pantalla no pueden saber que la imagen carece de contenido y acaban anunciando el nombre del fichero o un texto sin sentido, lo que entorpece la lectura. Revise todas las imágenes de adorno, separadores y fondos insertados con img y márquelas para que se ignoren.

Ejemplo práctico

Los iconos que acompañan a un texto que ya dice lo mismo son decorativos y la tecnología de asistencia debe poder ignorarlos. Ejemplo: la lista de trámites destacados de la portada de un ayuntamiento.

Así no: Iconos decorativos sin atributo alt

Los iconos son decorativos (el texto del enlace ya lo dice todo), pero no tienen atributo alt ni role="presentation". La tecnología de asistencia no puede ignorarlos y, según el lector, anuncia «gráfico», el nombre del fichero o la URL de la imagen antes del texto de cada enlace. Para notarlo, recorra la lista con NVDA o VoiceOver.

<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>

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.

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

Se añade alt="" a cada icono (también sería válido role="presentation", pero el alt vacío es la opción más sencilla y compatible). Los lectores omiten las imágenes y anuncian solo el texto de cada enlace.

<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>

Pruébelo aquí:

Cómo comprobarlo

Lector de pantalla (NVDA o VoiceOver)

Recorrer los enlaces con Tab o, en NVDA, con la tecla K en modo exploración.
Comprobar que solo se anuncia el texto de cada enlace, sin «gráfico», nombres de fichero ni rutas de imagen.

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

Herramientas del navegador

Abrir las herramientas de desarrollo (F12) y, en la consola, ejecutar document.querySelectorAll('img:not([alt]):not([role=presentation]):not([role=none])') para listar 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 y no añaden nada al nombre del enlace.

Validación automática

axe DevTools lo detecta con la regla image-alt y WAVE lo marca como «Missing alternative text» o «Linked image missing alternative text»: las imágenes sin alt son fáciles de localizar automáticamente.
Lo que no deciden: si la imagen es decorativa (se corrige con alt="") o informativa (necesita un texto). Esa decisión es manual.

Errores frecuentes en auditorías

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

Técnica completa: traducción al español del texto 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 fallo es uno de los que buscamos en cada auditoría de accesibilidad de ADDAW: lo documentamos con capturas y el código afectado, indicamos el criterio que incumple y la técnica suficiente con la que se corrige. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.

Solicitar una auditoría

Fuente y licencia

Traducción al español, no oficial, realizada por ADDAW a partir de la técnica F38 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.