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.

Recursos de apoyo

**Guías para escribir buenas descripciones:** * Mapa de decisión para elegir el tipo de texto alternativo adecuado * Árbol de decisión del W3C (en inglés) * Técnica WCAG G73: explicar la imagen con una descripción larga en otro lugar de la página y enlazarla desde la descripción corta.

Evaluación del criterio

Tipo de 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.** Identifica las imágenes que contienen información compleja (gráficos, diagramas, mapas, infografías…). **Paso 2.** Comprueba que tienen una descripción corta en el atributo alt que indique de qué trata la imagen. **Paso 3.** Asegúrate de que también existe una descripción larga que explique todos los datos o detalles importantes. **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

Puedes usar la **herramienta de inspección del navegador** para comprobar si una imagen tiene los atributos alt y aria-describedby. También puedes utilizar la extensión **Web Developer Toolbar** para mostrar los textos alternativos de todas las imágenes de una página.