Principio 1/1.1 Texto Alternativo/1.1.1-G
De WCAG Wiki
1.1.1-G. Texto alternativo en imágenes funcionales
- 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
Enunciado del criterio (Observatorio de Accesibilidad Web)
- Las imágenes con funcionalidad (enlaces, botones, áreas activas) deben incluir un texto alternativo que describa claramente su propósito.
Comprensión del criterio
Descripción resumida
Las imágenes usadas como controles interactivos deben tener texto alternativo que explique la acción que realizan.
En lugar de describir cómo se ve la imagen (alt="lupa"), se debe describir su acción (alt="Buscar").
Esto aplica a: - Botones con imágenes - Íconos clicables - Enlaces basados en imágenes
- Mapas de imagen con áreas activasObjetivo
Garantizar que los usuarios ciegos o con baja visión puedan entender y usar controles visuales basados en imágenes, interpretando correctamente la acción que realizan.
Importancia de cumplir el criterio
Sin texto alternativo funcional, una persona que usa lector de pantalla no puede saber qué hace un botón basado en una imagen, impidiendo la interacción e incomunicando funcionalidad clave.
Referencias WCAG
Recursos de apoyo
Evaluación del criterio
Tipo de evaluación
Evaluación Manual
Procedimiento de evaluación
- Paso 1. Localizar imágenes utilizadas como controles (botones, enlaces, mapas de imagen).
- Paso 2. Usar Web Developer Toolbar → Display alt attributes.
- Paso 3. Comprobar que el texto describe la función, no la apariencia.
Resultado esperado
Las imágenes funcionales incluyen un texto alternativo que comunica claramente la acción que realizan, p. ej:
alt="Buscar" en lugar de alt="Lupa".Ejemplo
Ejemplo de texto alternativo funcional correcto:
<input type="image" src="iconobuscar.png" alt="Buscar"> <input type="image" src="enviar.png" alt="Enviar formulario">
Otras herramientas de evaluación
Bookmarklet diagnóstico 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 funcionales
Ver ALT de imágenes funcionales
Lectores de pantalla: NVDA, JAWS, VoiceOver Verificar que la acción del control se comunica correctamente.
Inspector del navegador:
Confirmar atributoalt informativo en imágenes usadas como controles.
Ejemplos accesibles y no accesibles creados por alumnos
Comentarios
A continuación se muestran comentarios sobre el criterio 1.1.1-G. Texto alternativo en imágenes funcionales
Loading comments...
