Principio 1/1.1 Texto Alternativo/1.1.1-D

1.1.1-D. Alternativa única para grupos de imágenes.

• 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

Descripción y comprensión del criterio

Descripción resumida

Cuando hay un grupo de imágenes que juntas expresan una misma idea (como varias estrellas para indicar una puntuación), solo una de ellas debe tener una descripción de texto.

Las demás se marcan como decorativas, para que los lectores de pantalla las ignoren.

De esta forma, la persona que escucha la web solo oye la información importante una vez, sin repeticiones molestas.

Objetivo

El objetivo de este criterio es evitar repetir la misma información varias veces.

Si todas las imágenes de un grupo tuvieran texto alternativo, un lector de pantalla leería la misma frase una y otra vez.

Al indicar que solo una imagen tiene texto y las demás son decorativas, la información se entiende mejor y la navegación es más clara y agradable.

Importancia de cumplir el criterio

Cumplir este criterio es importante para que la experiencia de las personas que usan lectores de pantalla sea fluida, clara y sin repeticiones innecesarias.

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.

Referencias WCAG

• Comprender el criterio 1.1.1 (en inglés)

Recursos de apoyo

Puedes consultar el tutorial de W3C que explica como incluir texto alternativo en imágenes de grupo.

Grupos de imagenes, tutorial de W3C

Evaluación del criterio

Tipo de comprobación

Comprobación semiautomática Es necesario revisar visualmente las imágenes y leer las descripciones para comprobar que la información esté completa.

Procedimiento de evaluación

Paso 1. Usa la herramienta de 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.

Ejemplo

Ejemplo correcto de uso del texto alternativo en un grupo de estrellas para mostrar una puntuación de 4 sobre 5:

 
<!-- 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=""> 

Otras herramientas de evaluación

Herramienta de inspección con un Bookmarklet

Al mostrar la información con el bookmarklet, comprobar que el texto de cada imagen corresponde a la imagen.

Arrastra este botón a tu barra de marcadores: Haz clic para ver los textos alternativos de las imagenes

Lector de pantalla

Uso de lectores de pantalla como JAWS, NVDA o VoiceOver, para comprobar que la información se escucha una sola vez y de forma comprensible.