- Nivel:A
- Versión:2.2
- Principio:1. Perceptible
- Pauta:1.1 Textos alternativos
- Categoría:Contenido
- Subcategoría:No-texto
Usuarios más afectados
Personas con discapacidad visual total - Barrera grave
Usuarios más afectados
Personas con discapacidad visual total - Barrera grave
Imagina que estás escuchando una página web con un lector de pantalla. Si hay cinco estrellas para mostrar una valoración y todas dicen “estrella de calificación”, escucharías esa frase cinco veces seguidas. Sería confuso y cansado.
Si, en cambio, solo una imagen tiene la descripción “Calificación: 4 de 5 estrellas”, la información se transmite completa y sencilla, sin repeticiones.
Puedes consultar estas guías y recursos que ayudan a escribir buenos textos alternativos y a decidir cuándo usar uno o dejarlo vacío:
[https://www.usableyaccesible.com/textosalternativosaccesibles/mapa_decision_texto_alternativo.php
Mapa de decisión para proporcionar textos alternativos adecuados]
[https://www.w3.org/WAI/tutorials/images/decision-tree/
Árbol de decisión de W3C (en inglés)]
Técnica WCAG G196: Usar una sola descripción textual en un grupo de imágenes que transmiten la misma información.
Comprobación semiautomática
Paso 1. Abre la extensión [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es
Web Developer Toolbar].
Paso 2. Selecciona la opción Images – Display alt attributes para mostrar los textos alternativos de todas las imágenes.
Paso 3. Busca grupos de imágenes que, visualmente, representen una sola idea (como una fila de estrellas o un conjunto de iconos similares).
Paso 4.
Comprueba que solo una imagen tenga una descripción con sentido, y que las demás tengan el atributo alt="" (vacío), para que el lector de pantalla las ignore.
<!-- Solo la primera imagen describe todo el grupo --> <img src="estrella_rellena.png" alt="Puntuación: 4 de 5 estrellas"> <img src="estrella_rellena.png" alt=""> <img src="estrella_rellena.png" alt=""> <img src="estrella_rellena.png" alt=""> <img src="estrella_vacia.png" alt="">
Web Developer Toolbar
ANDI (Ayuda a visualizar y validar los textos alternativos)
Lectores de pantalla como NVDA o VoiceOver, para comprobar que la información se escucha una sola vez y de forma comprensible.