Fallo Común F16 de WCAG 2.1: Incluir contenido en desplazamiento sin un mecanismo para pausarlo y reiniciarlo

Jano Llorca Lis

La accesibilidad web busca garantizar que todas las personas, incluidas aquellas con discapacidades visuales o cognitivas, puedan interactuar con el contenido sin barreras. Un problema común es la inclusión de contenido en movimiento o desplazamiento sin una opción para pausarlo y reiniciarlo, lo que puede dificultar su comprensión y generar problemas para ciertos usuarios.

El fallo F16 ocurre cuando una página incluye elementos en movimiento, como noticias en una cinta desplazable, banners animados o carruseles de imágenes, sin un mecanismo que permita pausarlos y reiniciarlos. Esto incumple el criterio 2.2.2: Pausar, Detener, Ocultar de WCAG 2.1, afectando a usuarios con baja visión, dificultades cognitivas o sensibilidad al movimiento.

Acerca de este fallo

Este fallo viola el criterio 2.2.2 – Pausar, Detener, Ocultar (Nivel A), que exige que los usuarios puedan controlar el movimiento de los elementos no esenciales para la actividad principal.

Este problema ocurre cuando:

Un carrusel de imágenes o una barra de noticias se desplaza automáticamente sin una opción para detenerlo.
Un banner animado cambia continuamente sin que el usuario pueda pausarlo.
Un elemento en movimiento distrae a los usuarios y afecta su capacidad de lectura o concentración.

Este fallo afecta especialmente a:

Personas con baja visión que necesitan más tiempo para leer el contenido.
Usuarios con discapacidades cognitivas que pueden distraerse con elementos en movimiento.
Personas con trastornos vestibulares, que pueden experimentar mareos o malestar por el desplazamiento automático.

Ejemplos

Ejemplo incorrecto 1: Uso de barra de noticias con actualización y desplazamiento automáticos

Página con una cinta de noticias en desplazamiento continuo:

<marquee>Últimas noticias: La conferencia sobre accesibilidad se llevará a cabo el 15 de junio en Madrid.</marquee>

🔴 Problema:

El usuario no puede pausar el desplazamiento del texto.
Personas con baja visión no pueden leerlo cómodamente.
No hay control sobre la velocidad del movimiento.

Solución correcta: Usar controles de pausa

Agregar controles para pausar y reanudar el desplazamiento:

<div id="newsTicker">
  <p>Últimas noticias: La conferencia sobre accesibilidad se llevará a cabo el 15 de junio en Madrid.</p>
</div>
<button onclick="pauseTicker()">Pausar</button>
<button onclick="resumeTicker()">Reanudar</button>

<script>
  let ticker = document.getElementById("newsTicker");
  let isPaused = false;

  function pauseTicker() {
    ticker.style.animationPlayState = 'paused';
    isPaused = true;
  }

  function resumeTicker() {
    ticker.style.animationPlayState = 'running';
    isPaused = false;
  }
</script>

✅ ¿Qué mejora?:

Se eliminó <marquee>, que no es accesible.
Se agregaron botones para pausar y reanudar el contenido.
El usuario tiene control sobre el movimiento.

Ejemplo incorrecto 1: Uso carrusel de imágenes automático sin pausa

Carrusel de imágenes sin opción de pausa:

<div class="carousel">
  <img src="imagen1.jpg" alt="Oferta especial 1">
  <img src="imagen2.jpg" alt="Oferta especial 2">
</div>

🔴 Problema:

Las imágenes cambian automáticamente sin un control de usuario.
Puede causar distracción y afectar la experiencia del usuario.

Solución correcta: Usar controles de pausa

Carrusel con controles de pausa y reanudación:

<div class="carousel" aria-live="off">
  <img src="imagen1.jpg" alt="Oferta especial 1">
  <img src="imagen2.jpg" alt="Oferta especial 2">
</div>
<button onclick="pauseCarousel()">Pausar</button>
<button onclick="resumeCarousel()">Reanudar</button>

<script>
  let carousel = document.querySelector(".carousel");
  let isRunning = true;

  function pauseCarousel() {
    carousel.setAttribute("aria-live", "polite");
    isRunning = false;
  }

  function resumeCarousel() {
    carousel.setAttribute("aria-live", "off");
    isRunning = true;
  }
</script>

✅ ¿Qué mejora?:

Se agregó aria-live="off" para evitar interrupciones innecesarias.
Se incluyeron controles de pausa y reanudación.

Ejemplo correcto: Uso correcto de las opciones de pausa y reanudar

Un banner con opción de pausa, compatible con teclado y lector de pantalla:

<div id="banner" aria-live="off">
  <p>Gran descuento en productos de accesibilidad. Visítanos hoy.</p>
</div>
<button onclick="pauseBanner()">Pausar</button>
<button onclick="resumeBanner()">Reanudar</button>

✅ ¿Qué mejora?: Este diseño permite a todos los usuarios controlar la animación.

Errores comunes y cómo evitarlos

Errores frecuentes:

Usar <marquee> o animaciones sin controles.
No permitir la interacción del usuario con elementos en movimiento.
No ofrecer alternativas accesibles para el contenido desplazado.

Cómo evitar estos errores:

Implementar controles de pausa y reanudación en animaciones.
Evitar movimiento innecesario en la interfaz.
Usar aria-live y botones accesibles para mayor control del usuario.

Preguntas frecuentes

¿Por qué el movimiento automático es un problema de accesibilidad?

Puede afectar a personas con baja visión, discapacidad cognitiva o trastornos vestibulares.

¿Cuándo es obligatorio incluir un control de pausa?

Cuando el movimiento dura más de 5 segundos y no es esencial para la funcionalidad.

¿Cómo se puede hacer un carrusel accesible?

Agregando controles de pausa y reanudación, y permitiendo navegación con teclado.

¿Qué alternativa hay a los textos desplazables?

Mostrar la información estática o permitir que el usuario active el desplazamiento.

¿Es recomendable usar <marquee> para texto en movimiento?

No, ya que no es accesible ni compatible con estándares modernos.

¿Cómo verificar si un contenido en movimiento es accesible?

Usando herramientas como WAVE, axe DevTools y revisando su compatibilidad con teclado y lectores de pantalla.

Recursos relacionados

Pruebas y validación

Procedimiento:

Revisar si el contenido en movimiento tiene controles de pausa y reanudación.
Probar los controles para asegurarse de que funcionan correctamente.
Verificar con lectores de pantalla y navegación por teclado.

Resultados esperados:

✅ Si no hay controles de pausa, la prueba falla.
❌ Si el usuario puede controlar el movimiento, la prueba es exitosa.

Garantizar que los usuarios puedan pausar y reanudar contenido en movimiento mejora la accesibilidad y usabilidad. Revisa tu sitio web y aplica estas buenas prácticas para hacerlo más inclusivo. ¿Necesitas ayuda? Contáctanos para mejorar la accesibilidad de tu web.

¿Tienes dudas? Solicita una consultoría inicial gratuita

Evaluamos tu sitio web para identificar barreras que dificultan el acceso a personas con discapacidad. Te entregamos un informe con errores detectados y soluciones para que tu web sea usable por todos.