Principio 1/1.1 Texto Alternativo/1.1.1-G

1.1.1- G. Texto alternativo en imágenes funcionales

• Nivel:A
• Versión:2.0
• Principio:1. Perceptible
• Pauta:1.1 Textos alternativos
• Categoría:Contenido
• Subcategoría:No-texto

Usuarios más afectados

• Personas con discapacidad visual total - Barrera grave

Descripción y comprensión del criterio

Las imágenes con funcionalidad (enlaces, botones, áreas activas) deben incluir un texto alternativo que describa claramente su propósito.

Descripción resumida

Las imágenes que son botones, enlaces o acciones deben tener un alt que explique su función, no su forma.

Por ejemplo: alt="Buscar", no alt="Lupa".

Objetivo

Ayudar a los usuarios que no pueden ver los iconos a entender su propósito.

Importancia de cumplir el criterio

Un botón con una imagen sin descripción funcional impide al usuario saber qué acción realiza.

Referencias WCAG

• Comprender el criterio 1.1.1 (en inglés)
• Técnica G82 – Identificar propósito del contenido no textual (en inglés)

Recursos de apoyo

* Tutorial de W3C sobre imágenes funcionales (en inglés)

Evaluación del criterio

Tipo de comprobación

Comprobación Manual

Es necesario revisar visualmente las imágenes funcionales (que realizan alguna función al interactuar con ellas y observar si su descripción contiene la acción que realizan.

Procedimiento de evaluación

Paso 1. Usa la herramienta de Web Developer Toolbar.

Paso 2. Localiza imágenes dentro de enlaces o botones.

Paso 3. Comprueba que el alt indica su función, no su aspecto.

Ejemplo

Se presenta un botón buscar y su texto alternativo es la acción que realiza el botón.

 
<input type="image" src="iconobuscar.png" alt="Buscar">
<input type="image" src="enviar.png" alt="Enviar formulario"> 

Otras herramientas de evaluación

Herramienta de inspección con un Bookmarklet

Al mostrar la información con el bookmarklet, comprobar que el texto de cada imagen corresponde a la imagen.

Arrastra este botón a tu barra de marcadores: Haz clic para ver los textos alternativos de las imágenes

Lector de pantalla

Uso de lectores de pantalla como JAWS, NVDA o VoiceOver, para comprobar que la información que se escucha al acceder a una imagen funcional, es comprensible.

Inspector del navegador

Puedes usar la herramienta de inspección del navegador para comprobar el texto alternativo de una imagen funcional .