Fallo Común F38 de WCAG 2.1: No marcar imágenes decorativas correctamente en HTML

Jano Llorca Lis

La accesibilidad web es crucial para garantizar que todas las personas, incluidas aquellas con discapacidades visuales, puedan acceder al contenido de una página sin barreras. Uno de los problemas más comunes ocurre cuando las imágenes decorativas no se marcan adecuadamente, lo que genera ruido innecesario para los usuarios de tecnologías de asistencia.

El fallo F38 se produce cuando las imágenes decorativas no tienen un atributo alt vacío (alt="") o el atributo role="presentation", lo que impide que los lectores de pantalla las ignoren correctamente. Esto infringe el criterio de éxito 1.1.1: Contenido no textual de las WCAG 2.1.

Acerca de este fallo

Cuando una imagen decorativa no está marcada correctamente, los lectores de pantalla pueden anunciar su nombre de archivo o su ruta, lo que confunde y frustra a los usuarios con discapacidad visual. Para evitar esto, las WCAG exigen que las imágenes puramente decorativas:

Tengan un atributo alt vacío (alt=""), o
Usen role="presentation" para que sean ignoradas por la tecnología de asistencia.

Escenarios comunes donde ocurre este fallo:

Una imagen decorativa sin alt o role="presentation".
Un icono que no transmite información importante pero que tiene un alt con texto irrelevante.
Fondos añadidos con <img> en lugar de CSS sin marcarse como decorativos.

Ejemplos

Ejemplo incorrecto 1

Este código muestra una imagen decorativa sin el atributo alt, lo que hace que los lectores de pantalla la anuncien de manera innecesaria.

<img src="decorative-border.jpg">

🔴 Problema:

No hay atributo alt, por lo que la tecnología de asistencia intentará leer el nombre del archivo.
Los usuarios de lectores de pantalla escucharán información innecesaria, causando confusión.

Solución correcta

Se debe agregar un atributo alt vacío (alt="") para que la imagen sea ignorada.

<img src="decorative-border.jpg" alt="">

✅ ¿Qué mejora?:

Los lectores de pantalla omiten la imagen decorativa.
Se elimina el ruido innecesario para los usuarios de tecnología de asistencia.

Ejemplo incorrecto 2

En este caso, la imagen decorativa tiene un alt con un texto innecesario.

<img src="divider.png" alt="Divisor de contenido">

🔴 Problema:

Aunque tiene alt, el texto no aporta valor real.
Los lectores de pantalla leerán «Divisor de contenido», lo que no es útil.

Solución correcta

Se debe usar alt="" o role="presentation".

<img src="divider.png" role="presentation">

✅ ¿Qué mejora?:

El lector de pantalla ignora la imagen por completo.
Se mejora la experiencia de usuario para personas con discapacidad visual.

Ejemplo correcto

Una implementación ideal para una imagen decorativa correctamente ignorada por los lectores de pantalla.

<img src="background-pattern.jpg" alt="">

✅ ¿Qué mejora?:

Se elimina la distracción para usuarios de lectores de pantalla.
Cumple con las WCAG 2.1 al marcar correctamente las imágenes decorativas.

Errores comunes y cómo evitarlos

Errores frecuentes:

Omitir el atributo alt en imágenes decorativas.
Usar texto irrelevante en el alt, como «decoración», «borde», «imagen».
No marcar imágenes sin importancia visual con role="presentation".

Cómo evitar estos errores:

Siempre incluir alt="" en imágenes decorativas.
Evitar textos en alt que no aporten valor.
Usar role="presentation" como alternativa válida.

Preguntas frecuentes sobre el fallo común F38

¿Por qué es un problema no marcar imágenes decorativas correctamente?

Los lectores de pantalla anunciarán información irrelevante, causando confusión y distracción para los usuarios con discapacidad visual.

¿Cuándo debo usar alt="" en una imagen?

Cuando la imagen es puramente decorativa y no transmite información relevante.

¿role="presentation" es equivalente a alt=""?

Sí, ambos métodos permiten que los lectores de pantalla ignoren la imagen.

¿Qué pasa si una imagen no tiene alt ni role="presentation"?

Los lectores de pantalla intentarán interpretar la imagen y pueden anunciar el nombre del archivo o la URL.

¿Puedo usar aria-hidden="true" en lugar de alt=""?

No es recomendable. aria-hidden="true" afecta todo el elemento, mientras que alt="" es la forma estándar de ocultar imágenes decorativas.

¿Cómo saber si una imagen es decorativa?

Si al eliminarla no se pierde información importante, entonces es decorativa.

Recursos relacionados

Pruebas y validación

Procedimiento

Identificar todas las imágenes decorativas en la página.
Verificar si tienen alt="" o role="presentation".
Confirmar que no hay texto innecesario en alt.

Resultados esperados

Si una imagen decorativa tiene alt="" o role="presentation", cumple con WCAG 2.1.
Si la imagen no tiene alt o tiene un texto irrelevante, no cumple con WCAG 2.1.

Marcar correctamente las imágenes decorativas es esencial para garantizar una experiencia accesible para todos los usuarios. Evita incluir información innecesaria en alt y usa role="presentation" cuando sea necesario.

💡 Recuerda: Si necesitas ayuda para mejorar la accesibilidad de tu web, ¡contáctanos!

¿Tienes dudas? Solicita una consultoría inicial gratuita

Evaluamos tu sitio web para identificar barreras que dificultan el acceso a personas con discapacidad. Te entregamos un informe con errores detectados y soluciones para que tu web sea usable por todos.