Principio 1/1.1 Texto Alternativo/1.1.1-F

1.1.1-F. Incluir una alternativa larga cuando la corta no basta.

• 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
• Personas con discapacidad cognitiva – Barrera moderada
• Personas con baja visión – Barrera leve

Descripción y comprensión del criterio

Descripción resumida

A veces una imagen, un gráfico o una infografía contiene mucha información.

Cuando eso ocurre, el texto alternativo corto (el que va en el atributo alt) no alcanza para explicarlo todo.

En esos casos se necesita una descripción más larga, que explique todo lo que se ve y lo que significa.

Esta descripción larga puede ponerse justo debajo de la imagen o en otra parte de la página, enlazada claramente.

Objetivo

Que cualquier persona, aunque no pueda ver la imagen, pueda entender toda la información que contiene.

La descripción larga debe contar lo mismo que se muestra visualmente: datos, relaciones, colores o comparaciones, de una manera que todos puedan comprender.

Importancia de cumplir el criterio

Imagina que hay un gráfico con las temperaturas de cada mes del año.

Un texto corto como “Gráfico de temperaturas anuales” no ayuda mucho.

Una persona ciega necesita una descripción larga que diga, por ejemplo: “En enero la temperatura media es de 8 °C, sube hasta 26 °C en julio y baja a 10 °C en diciembre”.

Así puede entender el mismo contenido que una persona que ve el gráfico.

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 complejas.

Imagenes complejas, tutorial de W3C

Evaluación del criterio

Tipo de comprobación

Comprobación Manual.

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. Identifica las imágenes que contienen información compleja (gráficos, diagramas, mapas, infografías…).

Paso 3. Seleccionar Images – Display alt attributes. Comprueba que tienen una descripción corta en el atributo alt que indique de qué trata la imagen.

Paso 4. Verifica que la descripción larga esté claramente asociada a la imagen. Esto puede hacerse de varias maneras:

• Usando el atributo aria-describedby para enlazar a la descripción.
• Colocando un enlace junto a la imagen que lleve a una página o sección con la explicación completa.
• Incluyendo la descripción detallada justo debajo de la imagen.

Ejemplo

Asociar una descripción extensa de una imagen mediante el atributo aria-describedby:

 <img src="grafico-economia.jpg" alt="Gráfico del crecimiento económico 2023" aria-describedby="descEconomia" /> 

<div id="descEconomia"> 

<p>El gráfico muestra el crecimiento económico por trimestre. En el primer trimestre, el valor fue del 1,2 %. En el segundo trimestre, del 1,8 %, en el tercero, del 2,4 %, y en el cuarto, del 2,9 %.  La tendencia general es ascendente.</p> 

</div> 

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 imágenes complejas

Lector de pantalla

Uso de lectores de pantalla como JAWS, NVDA o VoiceOver, para comprobar que la información que se escucha al acceder a una imagen compleja, es comprensible.

Inspector del navegador

Puedes usar la herramienta de inspección del navegador* para comprobar si una imagen compleja tiene los atributos alt y aria-describedby.