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 este tutorial que explica como incluir texto alternativo en imagenes de grupo.

Grupos de imagenes, tutorial de W3C

Evaluación del criterio

Tipo de comprobación

Comprobación semiautomática

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

Herramientas recomendadas

Puedes usar herramientas que muestren los textos alternativos de las imágenes directamente en la página, como:

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.