- 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
Diferencia entre revisiones de «Principio 1/1.1 Texto Alternativo/1.1.1-G»
De WCAG Wiki
Sin resumen de edición |
|||
| Línea 93: | Línea 93: | ||
==== Ejemplo ==== | ==== Ejemplo ==== | ||
<div class="wcag-info-criterio"> | <div class="wcag-info-criterio"> | ||
<div class="accessibility-card"> | |||
<pre class="wcag-codigo-html"> | <pre class="wcag-codigo-html"> | ||
<input type="image" src="iconobuscar.png" alt="Buscar"> | <input type="image" src="iconobuscar.png" alt="Buscar"> | ||
| Línea 98: | Línea 100: | ||
</pre> | </pre> | ||
</div> | </div> | ||
</div> | |||
==== Otras herramientas de evaluación ==== | ==== Otras herramientas de evaluación ==== | ||
Revisión del 10:49 24 oct 2025
1.1.1- G. Texto alternativo en imágenes funcionales
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
Recursos de apoyo
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
<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 .
