La accesibilidad web permite a todas las personas acceder al contenido, incluyendo aquellas con discapacidades visuales que dependen de tecnologías asistivas como lectores de pantalla. WCAG 2.1 establece criterios claros, entre ellos el 1.1.1 (contenido no textual), que exige proporcionar alternativas textuales claras para todos los contenidos visuales. Un error común relacionado es el fallo F65, consistente en omitir el atributo alt o un texto alternativo adecuado en elementos <img>, <area> e <input type="image">.
Según WebAIM, cerca del 60% de los errores de accesibilidad detectados en sitios web están relacionados con imágenes que carecen de texto alternativo.
Acerca de este fallo
El fallo F65 sucede cuando imágenes relevantes para comprender el contenido no poseen texto alternativo, dejando sin contexto a usuarios que utilizan tecnologías asistivas como lectores de pantalla.
Esto incumple el criterio WCAG 2.1 (1.1.1): «Contenido no textual», perjudicando especialmente a usuarios con discapacidad visual, ya que no pueden entender la función o contenido de las imágenes.
Escenarios comunes del fallo:
- Imágenes decorativas que realmente transmiten información sin atributo alt.
- Botones gráficos sin texto alternativo.
Ejemplos
Ejemplo incorrecto 1: Imagen sin atributo alt
<img src="../imagenes/mascota.jpg">🔴 Problema: Los usuarios con lectores de pantalla no pueden saber qué representa esta imagen.
Solución correcta: Imagen con atributo alt descriptivo
<img src="../images/animal.jpg" alt="Perro jugando con una pelota en el parque">✅ ¿Qué mejora?: Permite que lectores de pantalla describan claramente la imagen al usuario.
Ejemplo incorrecto 1: Botón de imagen sin texto alternativo
<input type="image" src="buscar.png">🔴 Problema: No existe información sobre la función del botón.
Solución correcta: Botón con alt explícito
<input type="image" src="buscar.png" alt="Buscar en el sitio">✅ ¿Qué mejora?: El usuario entiende claramente la función del botón.
Ejemplo correcto: Solución ideal
<img src="logo-empresa.png" alt="Logo oficial de la empresa EjemploCorp">✅ ¿Qué mejora?: Ofrece contexto claro sobre la imagen, siendo accesible y cumpliendo plenamente con WCAG.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Omitir completamente el atributo alt.
- Usar textos alternativos genéricos o poco claros.
- Considerar imágenes informativas como decorativas.
Cómo evitar estos errores:
- Usa siempre un atributo alt descriptivo.
- Si la imagen es puramente decorativa, utiliza
alt=""para que los lectores la ignoren. - Verifica manualmente que todos los elementos gráficos tengan texto alternativo adecuado.
Preguntas frecuentes sobre el fallo F65
¿Qué es exactamente un texto alternativo (alt)?
Un texto breve que describe la función o contenido de una imagen para quienes no pueden verla.
¿Todas las imágenes necesitan atributo alt?
Sí, aunque si la imagen es puramente decorativa el atributo alt debe dejarse vacío (alt="").
¿Qué sucede si omito este atributo?
Afecta gravemente la experiencia del usuario con discapacidad visual.
¿Puedo usar aria-label como alternativa?
Sí, siempre que sea compatible con tecnologías asistivas.
¿Es suficiente con usar el atributo title?
No, porque no es leído por todos los lectores de pantalla.
¿Las imágenes decorativas necesitan alt?
Sí, deben tener un atributo alt vacío (alt="") para que los lectores de pantalla las ignoren.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F65: Incumplimiento del Criterio de Conformidad 1.1.1 debido a omitir el atributo alt o texto alternativo en elementos img, elementos de área y elementos de entrada de tipo «imagen»
- Comprender el criterio de éxito 1.1.1: Contenido no textual
- Documentación del soporte de accesibilidad para usos de una tecnología web
- Cálculo de nombre y descripción accesibles
- ARIA10: Uso de aria-labelledby para proporcionar una alternativa de texto para contenido no textual
- H37: Uso de atributos alt en elementos img
- H67: Uso de texto alternativo nulo y sin atributo de título en elementos img para imágenes que la tecnología de asistencia debería ignorar
Pruebas y validación
Procedimiento
- Revisar todas las imágenes en la web.
- Comprobar que todas tengan atributo alt claramente definido.
- Verificar con herramientas automatizadas de accesibilidad.
Resultados esperados
- ✅ Si todas las imágenes tienen un texto alternativo adecuado, el contenido cumple con WCAG 2.1.
- ❌ Si hay imágenes sin atributo alt o con alt inapropiado, el contenido falla el criterio 1.1.1 y debe corregirse.
Incluir textos alternativos adecuados es esencial para mejorar la accesibilidad y experiencia del usuario. Si quieres asegurarte de que tu sitio cumpla plenamente con las WCAG, ¡contáctanos para una auditoría especializada en accesibilidad digital y comienza a optimizar tu sitio hoy mismo! 🚀