Fallo Común F39 de WCAG 2.1: Alternativa de texto no nula en imágenes decorativas

La accesibilidad web es fundamental para garantizar que todas las personas puedan navegar e interactuar con el contenido digital de manera eficiente. Uno de los errores más comunes en el uso de imágenes decorativas es proporcionar un texto alternativo que no es nulo, como alt="spacer" o alt="image", lo que genera ruido innecesario para los usuarios de tecnologías de asistencia.

El fallo F39 ocurre cuando las imágenes que deberían ser ignoradas por los lectores de pantalla incluyen una descripción que no aporta valor, violando el criterio 1.1.1: Contenido no textual de las WCAG 2.1. La solución correcta es asegurarse de que las imágenes decorativas tengan alt="" o role="presentation".

Acerca de este fallo

Cuando una imagen se usa exclusivamente con fines decorativos o de espaciado, no debe anunciarse en los lectores de pantalla. Sin embargo, si se le asigna un alt con un valor no nulo, la tecnología de asistencia leerá ese texto, lo que puede ser confuso y perjudicial para la experiencia del usuario.

Escenarios comunes donde ocurre este fallo:

• Imágenes espaciadoras (spacer.gif) con alt="spacer".
• Iconos decorativos con alt="icon" o alt="image".
• Imágenes de fondo agregadas con <img> en lugar de CSS y con alt innecesario.

Ejemplos

Ejemplo incorrecto 1

Este código utiliza una imagen para agregar espacio entre elementos, pero asigna un alt innecesario.

<div>
  Tipo de árbol: <img src="spacer.gif" width="100" height="1" alt="spacer"> Cedrus deodara
</div>

🔴 Problema:

• El lector de pantalla leerá «spacer», lo cual no aporta información útil.
• Los usuarios recibirán una información innecesaria, afectando su experiencia.

Solución correcta

Se debe establecer el alt como vacío para que los lectores de pantalla ignoren la imagen.

<div>
  Tipo de árbol: <img src="spacer.gif" width="100" height="1" alt=""> Cedrus deodara
</div>

✅ ¿Qué mejora?:

• La imagen sigue cumpliendo su función visual sin ser anunciada por los lectores de pantalla.
• Se mejora la experiencia de navegación accesible.

Este código agrega un icono decorativo con un alt innecesario.

<img src="icon.png" alt="icon">

🔴 Problema:

• El lector de pantalla leerá «icon», lo cual no aporta valor informativo.
• Genera ruido innecesario para los usuarios de tecnologías de asistencia.

Solución correcta

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

<img src="icon.png" alt="">

✅ ¿Qué mejora?:

• Los lectores de pantalla omiten la imagen decorativa.
• Se mejora la usabilidad para usuarios con discapacidades visuales.

Ejemplo correcto

Una implementación ideal donde las imágenes decorativas se ignoran correctamente.

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

✅ ¿Qué mejora?:

• Se evitan distracciones innecesarias en la navegación asistida.
• Cumple con las WCAG 2.1 al marcar correctamente las imágenes decorativas.

Errores comunes y cómo evitarlos

Errores frecuentes:

• Usar alt="spacer", alt="image" o cualquier otro texto irrelevante.
• No incluir el alt en imágenes decorativas.
• Utilizar imágenes en lugar de CSS para decoración sin marcar correctamente su propósito.

Cómo evitar estos errores:

• Siempre usar alt="" en imágenes decorativas.
• No incluir texto descriptivo en alt si la imagen no aporta información relevante.
• Usar role="presentation" como alternativa válida en algunos casos.

Preguntas frecuentes sobre el fallo común F39

¿Por qué no debo usar alt="spacer" en imágenes decorativas?

Porque los lectores de pantalla anunciarán «spacer», lo que no aporta información útil y afecta la experiencia del usuario.

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

Cuando la imagen es puramente decorativa y no tiene significado dentro del contenido.

¿Es role="presentation" una alternativa válida a alt=""?

Sí, ambas opciones indican que la imagen debe ser ignorada por la tecnología de asistencia.

¿Qué ocurre si no pongo alt en una imagen decorativa?

Si omites el alt, algunos lectores de pantalla pueden leer el nombre del archivo o la ruta, lo cual puede ser confuso.

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

No es recomendable. aria-hidden="true" oculta el elemento completo, mientras que alt="" es la mejor práctica específica para imágenes decorativas.

¿Cómo saber si una imagen debe tener alt=""?

Si al eliminar la imagen no se pierde información importante, entonces debe tener alt="".

Recursos relacionados

• Guía oficial WCAG 2.1 para el fallo común F39: Incumplimiento del Criterio de Conformidad 1.1.1 debido a que se proporciona una alternativa de texto que no es nula (p. ej., alt=»spacer» o alt=»image») para imágenes que la tecnología de asistencia debe ignorar
• Comprender el criterio de éxito 1.1.1: Contenido no textual
• H37: Uso de atributos alt en elementos img
• C9: Uso de CSS para incluir imágenes decorativas
• F38: Incumplimiento del criterio de éxito 1.1.1 debido a que no se marcan las imágenes decorativas en HTML de forma que la tecnología de asistencia pueda ignorarlas
• Guía sobre imágenes decorativas en W3C

Pruebas y validación

Procedimiento

1. Identificar todas las imágenes decorativas en la página.
2. Verificar si tienen alt con un valor no nulo.
3. Si el alt no es "", el contenido no cumple con WCAG 2.1.

Resultados esperados

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

Evitar valores incorrectos en el atributo alt es clave para garantizar una experiencia accesible. Asegúrate de que las imágenes decorativas sean correctamente ignoradas por los lectores de pantalla.

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