Principio 1/1.1 Texto Alternativo/1.1.1-G

1.1.1-G. Texto alternativo en imágenes funcionales

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

Enunciado del criterio (Observatorio de Accesibilidad Web)

• Las imágenes que actúan como elementos funcionales —botones, enlaces o regiones activas— deben tener un texto alternativo que describa claramente su propósito funcional, no su apariencia visual.

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 activas

Objetivo

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

• Understanding Success Criterion 1.1.1
• Technique G82 – Providing a text alternative that identifies the purpose of the non-text content

Recursos de apoyo

• Tutorial W3C sobre imágenes funcionales

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

1. Paso 1. Localizar imágenes utilizadas como controles (botones, enlaces, mapas de imagen).
2. Paso 2. Usar Web Developer Toolbar → Display alt attributes.
3. 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:

<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 funcionales </a>

Lectores de pantalla: NVDA, JAWS, VoiceOver Verificar que la acción del control se comunica correctamente.

Inspector del navegador:

Confirmar atributo alt informativo en imágenes usadas como controles.

Comentarios

A continuación se muestran comentarios sobre el criterio 1.1.1-G. Texto alternativo en imágenes funcionales

Loading comments...