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

1_Perceptible 1.1_Textos_alternativos

• Nivel: A
• Versión: 2.0
• Principio: 1_Perceptible
• Pauta: 1.1_Textos_alternativos
• Grupo: Contenido
• Subgrupo: No-texto

Discapacidades afectadas

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

• Visual total – Barrera grave

Enunciado del criterio (Observatorio de Accesibilidad Web)

• Las alternativas textuales se deben actualizar cuando cambia el contenido no textual para mantener la coherencia y accesibilidad. Si un icono, imagen o cualquier elemento visual cambia en su significado o apariencia, la alternativa textual debe actualizarse para reflejar esa nueva información.

Comprensión del criterio

Descripción resumida

Cuando un contenido visual cambia dinámicamente (por ejemplo, un icono de error que se convierte en icono de éxito tras completar un formulario), la alternativa textual también debe actualizarse para mantener la precisión y evitar confusión a usuarios que utilizan tecnologías de apoyo.

Objetivo

Garantizar que los usuarios que dependen de lectores de pantalla reciban información siempre precisa, actualizada y coherente con el estado visual de la interfaz, especialmente en contenidos dinámicos o interactivos.

Importancia de cumplir el criterio

Si una imagen cambia pero su texto alternativo no, los usuarios que utilizan lectores de pantalla recibirán información incorrecta. Esto puede generar errores, confusión y barreras graves de acceso. Por ello, diseñadores y desarrolladores deben asegurarse de actualizar el texto alternativo cuando el contenido visual cambia dinámicamente.

Referencias WCAG

• Understanding Success Criterion 1.1.1: Non-text Content

Recursos de apoyo

No hay

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

1. Paso 1. Abrir la página web.
2. Paso 2. Identificar contenido gráfico que cambie dinámicamente.
3. Paso 3. Con Web Developer Toolbar: Images → Display alt attributes.
4. Paso 4. Confirmar que el atributo alt (o nombre accesible) se actualiza con el cambio visual.
5. Paso 5. Verificar mediante lector de pantalla que la información recibida coincide con el contenido actual.

Resultado esperado

El texto alternativo cambia automáticamente cuando cambia el estado visual del contenido, proporcionando información precisa y actualizada para tecnologías de apoyo.

Ejemplo

Un icono cambia según el estado de un formulario:

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

Tras corregir los datos del formulario:

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

Otras herramientas de evaluación

Bookmarklet para ver textos alternativos cambiantes:

<a class="bookmarklet-button" href="javascript:(function(){document.querySelectorAll('img').forEach(img=>{let altText=img.getAttribute('alt');if(altText){img.style.border='2px solid blue';}else{img.style.border='2px solid red';altText='Sin texto alternativo';}let label=document.createElement('div');label.textContent='[ALT: '+altText+']';label.style.position='absolute';label.style.background='yellow';label.style.padding='5px';label.style.fontSize='12px';let rect=img.getBoundingClientRect();label.style.top=(window.scrollY+rect.top-20)+'px';label.style.left=(window.scrollX+rect.left)+'px';document.body.appendChild(label);});})();"> Ver ALT de imágenes dinámicas </a>

Lectores de pantalla recomendados: JAWS, NVDA, VoiceOver

Validar que la descripción cambia cuando lo hace la imagen.

Comentarios

A continuación se muestran comentarios sobre el criterio 1.1.1-B. Las alternativas textuales se deben actualizar cuando cambia el contenido no textual

Loading comments...