Diferencia entre revisiones de «Principio 1/1.1 Texto Alternativo/1.1.1-F»
De WCAG Wiki
Sin resumen de edición |
Sin resumen de edición |
||
| Línea 83: | Línea 83: | ||
|wcag_otras_herramientas_evaluacion= | |wcag_otras_herramientas_evaluacion= | ||
<strong>Bookmarklet para inspeccionar ALT:</strong><br> | <strong>Bookmarklet para inspeccionar ALT:</strong><br/> | ||
Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los textos alternativos de otras páginas.<br/> | |||
<html> | |||
<a class="bookmarklet-button" | <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);});})();"> | 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 | Ver ALT de imágenes complejas | ||
</a> | </a> | ||
</html> | |||
<strong>Lector de pantalla:</strong> NVDA, JAWS, VoiceOver — confirmar comprensión completa | <strong>Lector de pantalla:</strong> NVDA, JAWS, VoiceOver — confirmar comprensión completa | ||
Revisión del 11:20 4 nov 2025
1.1.1-F. Incluir una alternativa larga cuando la corta no basta
- 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
Recursos de apoyo
Evaluación del criterio
Tipo de evaluación
Evaluación Manual
Procedimiento de evaluación
- Paso 1. Identificar imágenes complejas (gráficos, diagramas, mapas, infografías…)
- Paso 2. Revisar que existe un alt breve describiendo la imagen de forma general
- Paso 3. Confirmar que hay una descripción larga asociada correctamente
- 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:
Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los textos alternativos de otras páginas.
Ver ALT de imágenes complejas
Lector de pantalla: NVDA, JAWS, VoiceOver — confirmar comprensión completa
Inspector del navegador: comprobaralt y aria-describedby
Ejemplos accesibles y no accesibles creados por alumnos
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...
