Principio 1/1.1 Texto Alternativo/1.1.1-F

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

1_Perceptible 1.1_Textos_alternativos

• Nivel: A
• Versión: 2.0
• Principio: 1_Perceptible
• Pauta: 1.1_Textos_alternativos
• Grupo: Contenido
• Subgrupo: No-texto

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

• Visual total – Barrera grave
• Cognitiva – Barrera moderada

Enunciado del criterio (Observatorio de Accesibilidad Web)

• Cuando una imagen contiene información compleja que no puede describirse adecuadamente con una alternativa breve, debe proporcionarse además una alternativa larga que explique todos los detalles relevantes y su significado.

Comprensión del criterio

Descripción resumida

Algunas imágenes incluyen mucha información —como gráficos, mapas o infografías— y un texto alternativo corto no basta para transmitirla.

En estos casos, además del alt breve, se debe ofrecer una descripción extensa que explique todo el contenido visual y su interpretación.

Esta descripción puede colocarse: - Debajo de la imagen - En otra parte de la página, enlazada claramente

- Mediante aria-describedby

Objetivo

Permitir que las personas que no pueden ver imágenes complejas accedan al mismo contenido informativo, incluyendo detalles, relaciones, comparaciones y conclusiones.

Importancia de cumplir el criterio

Un simple “Gráfico de temperaturas anuales” no transmite la información real.

Las personas ciegas necesitan acceso completo a los datos visuales.

La descripción larga proporciona contexto y detalles, asegurando equidad informativa.

Referencias WCAG

• Understanding Success Criterion 1.1.1: Non-text Content

Recursos de apoyo

• Imágenes complejas – tutorial W3C

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

1. Paso 1. Identificar imágenes complejas (gráficos, diagramas, mapas, infografías…)
2. Paso 2. Revisar que existe un alt breve describiendo la imagen de forma general
3. Paso 3. Confirmar que hay una descripción larga asociada correctamente
4. Paso 4. Verificar relación clara (localización cercana, enlace o aria-describedby)

Resultado esperado

La imagen cuenta con un alt breve informativo y una descripción larga accesible y correctamente asociada, que cubre todo el contenido visual y su interpretación.

Ejemplo

Uso de aria-describedby para asociar descripción extensa:

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

Bookmarklet para inspeccionar ALT:

<a class="bookmarklet-button" href="javascript:(function(){document.querySelectorAll('img').forEach(img=>{let altText=img.getAttribute('alt');if(altText){img.style.border='2px solid blue';}else{img.style.border='2px solid red';altText='Sin texto alternativo';}let label=document.createElement('div');label.textContent='[ALT: '+altText+']';label.style.position='absolute';label.style.background='yellow';label.style.padding='5px';label.style.fontSize='12px';let rect=img.getBoundingClientRect();label.style.top=(window.scrollY+rect.top-20)+'px';label.style.left=(window.scrollX+rect.left)+'px';document.body.appendChild(label);});})();"> Ver ALT de imágenes complejas </a>

Lector de pantalla: NVDA, JAWS, VoiceOver — confirmar comprensión completa

Inspector del navegador: comprobar alt y aria-describedby

Comentarios

A continuación se muestran comentarios sobre el criterio 1.1.1-F. Incluir una alternativa larga cuando la corta no basta

Loading comments...