Principio 1/1.1 Texto Alternativo/1.1.1-B

Las alternativas textuales se deben actualizar cuando cambia el contenido no textual para mantener la coherencia y accesibilidad.

1.1.1- B. Las alternativas textuales se deben actualizar cuando cambia el contenido no textual.

• Nivel:A
• Versión:2.2
• 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
• Personas con baja visión – Barrera leve

Descripción y comprensión del criterio

Descripción resumida

Si una imagen, un icono o cualquier elemento visual cambia en su significado o apariencia, su descripción de texto (la alternativa textual) debe actualizarse automáticamente para reflejar el nuevo contenido y propósito.

Objetivo

El objetivo es garantizar que la información que se transmite a través del texto alternativo sea siempre precisa y coherente con lo que está sucediendo en la pantalla en ese momento.

Esto evita que los usuarios, especialmente aquellos que utilizan lectores de pantalla, reciban información desactualizada, incorrecta o confusa, manteniendo así la robustez y la accesibilidad del contenido.

Importancia de cumplir el criterio

Cuando el contenido visual cambia, como un icono de error que se convierte en marca de verificación, la alternativa textual debe actualizarse automáticamente.

Si no lo hace, las personas que usan lectores de pantalla recibirán información incorrecta, haciendo inaccesible la página.

Cumplir este criterio requiere que diseñadores y desarrolladores gestionen correctamente los cambios dinámicos.

Referencias WCAG

• Comprender el criterio 1.1.1 (en inglés)

Recursos de apoyo

No hay

Evaluación del criterio

Tipo de comprobación

Comprobación Manual

Es necesario revisar visualmente las imágenes y leer las descripciones para comprobar que la información esté completa.

Procedimiento de evaluación

Paso 1. Usa la herramienta de Web Developer Toolbar.

Paso 2. Comprueba que existe una imagen que cambia dinámicamente.

Paso 3. Mostrar el texto alternativos de las imágenes con Images – Display alt attributes

Paso 4. Verificar que el texto se adapta a los cambios en el contenido no textual.

Se debe revisar manualmente si el texto del atributo alt (o el nombre accesible dado por otras propiedades) se adapta a los cambios en el contenido no textual.

Los desarrolladores deben asegurarse de que, si utilizan programación (scripts/JavaScript) para crear componentes dinámicos, el nombre, la función, los estados y los valores se actualicen correctamente y se expongan a la API de accesibilidad (Criterio 4.1.2).

Ejemplo

Un icono se actualiza cuando se rellena el formulario correctamente.

Primero el usuario introduce datos erroneos y se muestra un icono de alerta:

<img src="iconoAlerta.jpg" alt="icono de alerta">

Luego la imagen del icono ha cambiado y ha de cambiar también el texto alternativo:

<img src="iconoInfo.jpg" alt="icono de información">

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 que ha cambiado corresponde a la imagen actual.

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

Lector de pantalla

Uso de lectores de pantalla como JAWS, NVDA o VoiceOver, para comprobar que la imagen que se ha cambiado dinamicamente, también ha cambiado su texto descriptivo.