Principio 1/1.1 Texto Alternativo/1.1.1-G

De WCAG Wiki

1.1.1-G. Texto alternativo en imágenes funcionales

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

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 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

Recursos de apoyo

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

Usa la herramienta de Web Developer Toolbar.
  1. Paso 1. Seleccionar Images – Display alt attributes.
  2. Paso 2. Localizar las imágenes que actúan como enlaces.
  3. Paso 3. Usando la herramienta de inspección de código del navegador, comrprobar cómo se implementa dicho enlace, según los siguientes casos:
    • Si la imagen es el único elemento del enlace, verificar que su texto alternativo identifica su función o destino
    • Si el enlace contiene texto además de imágenes, verificar que el destino queda descrito en-tre el texto del enlace y el texto alternativo de las imágenes, sin redundancias innecesarias. Si las imágenes no aportan información adicional al texto de los enlaces entonces deberán considerarse como decorativas y tener un texto alternativo vacío.

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

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.










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...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.1_Texto_Alternativo/1.1.1-G&oldid=3163»