Principio 1/1.1 Texto Alternativo/1.1.1-B

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)

Técnicas de Comprobación y Desarrollo

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

Recursos de apoyo

Para la revisión manual de este aspecto en el código, se puede utilizar la **Web Developer Toolbar**, inspeccionando la opción “Images – Display alt attributes” y verificando que el texto se adapta a los cambios en el contenido no textual.

La necesidad de actualizar las alternativas textuales está íntimamente ligada al concepto de hacer que los componentes dinámicos sean robustos y compatibles con los productos de apoyo (Criterio 4.1.2).

Evaluación del criterio

Tipo de comprobación

Comprobación Manual

Procedimiento de evaluación

Paso 1. Usa la herramienta de Web Developer Toolbar.

Paso 2. Comprueba que existe una imagen que cambia dinamicamente.

Paso 3. Mostrar el texto alternativos de las iamgenes con Images – Display alt attributes

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

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

Herramientas recomendadas

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