Fallo Común F20 de WCAG 2.1: No actualizar las alternativas de texto cuando ocurren cambios en el contenido no textual

Las alternativas de texto son esenciales para garantizar que las personas con discapacidades visuales puedan acceder a la información contenida en imágenes y otros elementos no textuales. Sin embargo, un error común en los sitios web es no actualizar estas alternativas cuando el contenido visual cambia dinámicamente. Esto genera barreras de accesibilidad, ya que la información proporcionada puede volverse obsoleta o incorrecta.

El fallo F20 ocurre cuando el contenido no textual se actualiza, pero la alternativa de texto no lo hace al mismo tiempo, lo que infringe los criterios de conformidad 1.1.1 – Contenido no textual y 4.1.2 – Nombre, Rol, Valor de WCAG 2.1.

Acerca de este fallo

Este fallo afecta a cualquier tecnología que utilice contenido visual que cambie con el tiempo sin sincronizar su alternativa de texto. Se presenta en situaciones como:

• Gráficos y diagramas actualizados dinámicamente, donde el texto alternativo aún refleja datos antiguos.
• Imágenes en páginas de inicio que cambian periódicamente, pero sus descripciones siguen refiriéndose a imágenes anteriores.
• Scripts que modifican dinámicamente imágenes sin actualizar su texto alternativo (alt).

Este problema afecta especialmente a:

• Usuarios con discapacidad visual, que dependen del texto alternativo para comprender las imágenes.
• Usuarios con discapacidades cognitivas, que pueden necesitar descripciones precisas para interpretar el contenido correctamente.
• Lectores de pantalla, que interpretan información incorrecta si el alt no se actualiza.

Ejemplos

Ejemplo incorrecto 1

Escenario: Un gráfico de ventas se actualiza mensualmente, pero la alternativa de texto sigue mostrando los datos del mes anterior.

Código incorrecto:

<img src="ventas-octubre.png" alt="Gráfico de ventas de septiembre: 3.5 millones en ingresos">

🔴 Problema:

• La imagen muestra datos de octubre, pero el alt aún se refiere a septiembre.
• Un usuario con lector de pantalla recibiría información desactualizada.

Solución correcta

Código corregido:

<img src="ventas-octubre.png" alt="Gráfico de ventas de octubre: 4.2 millones en ingresos">

✅ ¿Qué mejora?:

• Se actualiza el alt para reflejar los datos más recientes.
• Se mantiene la coherencia entre la imagen y su descripción.

Ejemplo incorrecto 2

Escenario: Una página de inicio cambia automáticamente la imagen destacada cada día, pero el alt sigue describiendo la imagen anterior.

Código incorrecto:

<img src="imagen-dia-1.jpg" alt="Paisaje nevado del día anterior">
<img src="imagen-dia-2.jpg" alt="Paisaje nevado del día anterior">

🔴 Problema:

• La imagen se actualiza, pero el alt aún describe la imagen del día anterior.
• La información proporcionada por el lector de pantalla no coincide con la imagen visible.

Solución correcta

Código corregido con actualización automática:

<img src="imagen-dia2.jpg" alt="Paisaje soleado con montañas y cielo despejado">

✅ ¿Qué mejora?:

• Se sincroniza el alt con la imagen actual.
• Se mejora la experiencia de accesibilidad para usuarios con discapacidades visuales.

Ejemplo incorrecto 3

Escenario: Un script cambia automáticamente la imagen de un banner, pero no actualiza su descripción.

Código incorrecto:

<img id="banner" src="oferta1.jpg" alt="Descuento del 10% en productos seleccionados">
<script>
  setInterval(() => {
    document.getElementById("banner").src = "oferta2.jpg";
  }, 5000);
</script>

🔴 Problema:

• El alt permanece estático mientras la imagen cambia dinámicamente.
• Los usuarios de lectores de pantalla no reciben la nueva información.

Solución correcta

Código corregido con actualización dinámica:

<img id="banner" src="oferta1.jpg" alt="Descuento del 10% en productos seleccionados">
<script>
  let banner = document.getElementById("banner");
  let ofertas = [
    { src: "oferta1.jpg", alt: "Descuento del 10% en productos seleccionados" },
    { src: "oferta2.jpg", alt: "Envío gratuito en todas las compras" }
  ];
  let index = 0;
  setInterval(() => {
    index = (index + 1) % ofertas.length;
    banner.src = ofertas[index].src;
    banner.alt = ofertas[index].alt;
  }, 5000);
</script>

✅ ¿Qué mejora?:

• Se actualiza el alt dinámicamente junto con la imagen.
• Se garantiza que la información proporcionada sea precisa y coherente.

Errores comunes y cómo evitarlos

Errores frecuentes:

• No actualizar el alt cuando se cambia el contenido visual.
• Usar un alt genérico y no representativo.
• Depender de scripts para cambiar imágenes sin modificar la alternativa de texto.

Cómo evitar estos errores:

• Asegurar que el alt se actualice cada vez que cambie la imagen.
• Usar herramientas de automatización para sincronizar imágenes y descripciones.
• Verificar manualmente que el alt corresponde al contenido actual.

Preguntas frecuentes

¿Por qué es importante actualizar el alt en contenido dinámico?

Para garantizar que los usuarios de lectores de pantalla reciban información precisa y actualizada.

¿Cómo puedo automatizar la actualización del alt?

Mediante scripts que actualicen el alt junto con el src de la imagen.

¿Qué ocurre si el alt no coincide con la imagen?

Los usuarios con discapacidad visual recibirán información incorrecta o desactualizada.

¿Es suficiente con usar aria-live para notificar cambios en imágenes?

No siempre, ya que aria-live es útil para actualizaciones dinámicas, pero no reemplaza un alt adecuado.

¿Cómo verificar que los alt están actualizados correctamente?

Revisando manualmente o usando herramientas como WAVE o axe DevTools.

¿Este problema afecta solo a imágenes?

No, también puede ocurrir en gráficos, íconos o cualquier contenido visual con alternativas textuales.

Recursos relacionados

• Guía oficial WCAG 2.1 para el fallo común F20: Incumplimiento del Criterio de Conformidad 1.1.1 y 4.1.2 debido a no actualizar las alternativas de texto cuando ocurren cambios en el contenido que no es texto
• Comprender el criterio de éxito 1.1.1 Contenido no textual
• Comprender el criterio de éxito 4.1.2 Nombre, Rol, Valor
• Buenas prácticas en texto alternativo

Pruebas y validación

Procedimiento

1. Verificar manualmente el alt de cada imagen y su correspondencia con el contenido visual.
2. Utilizar herramientas de accesibilidad como WAVE o axe DevTools para detectar alt desactualizados.
3. Probar con lectores de pantalla para comprobar si la información proporcionada coincide con el contenido visible.
4. Observar cambios en imágenes dinámicas y asegurarse de que las descripciones también cambien.
5. Evaluar si los usuarios pueden entender el contenido sin ver las imágenes.

Resultados esperados

• ✅ Si el alt se actualiza junto con el contenido visual, el sitio cumple con WCAG.
• ❌ Si el alt sigue describiendo imágenes antiguas tras un cambio, hay un fallo de accesibilidad.
• ❌ Si los lectores de pantalla proporcionan información desactualizada o incorrecta, se debe corregir la implementación.
• ✅ Si una persona con discapacidad visual puede comprender el contenido sin depender de imágenes, la accesibilidad está asegurada.

Mantener actualizadas las alternativas de texto en contenido dinámico es clave para la accesibilidad. Revisa tu sitio y asegúrate de que la información no textual siempre refleje el contenido visual actual. ¿Necesitas ayuda? Contáctanos para mejorar la accesibilidad de tu web.