| Línea 96: | Línea 96: | ||
<div class="wcag-info-criterio"> **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 <code>alt</code> 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 <code>aria-describedby</code> 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. </div> | <div class="wcag-info-criterio"> **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 <code>alt</code> 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 <code>aria-describedby</code> 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. </div> | ||
<div class="wcag-info-criterio"> | |||
<span class="paso-badge>Paso 1.</span> | |||
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].''' | |||
<span class="paso-badge>Paso 2.</span> | |||
Identifica las imágenes que contienen información compleja (gráficos, diagramas, mapas, infografías…). | |||
<span class="paso-badge>Paso 3.</span> | |||
Seleccionar '''Images – Display alt attributes'''. | |||
Comprueba que tienen una descripción corta en el atributo <code>alt</code> que indique de qué trata la imagen. | |||
<span class="paso-badge>Paso 4.</span> | |||
Verifica que la descripción larga esté claramente asociada a la imagen. Esto puede hacerse de varias maneras: | |||
* Usando el atributo <code>aria-describedby</code> 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. | |||
</div> | |||
=== Ejemplo === | === Ejemplo === | ||
Usuarios más afectados
Personas con discapacidad visual total - Barrera grave
Personas con discapacidad cognitiva – Barrera moderada
Personas con baja visión – Barrera leve
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.
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.
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.
Puedes consultar el tutorial de W3C que explica como incluir texto alternativo en imágenes complejas.
Imagenes complejas, tutorial de W3C
Comprobación Manual.
Es necesario revisar visualmente las imágenes y leer las descripciones para comprobar que la información esté completa.
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.
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:
aria-describedby para enlazar a la descripción.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>
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. 
