Principio 2/2.2 Tiempo Suficiente/2.2.2-A

De WCAG Wiki

2.2.2-A. Contenido en movimiento, parpadeo o desplazamiento

Discapacidades afectadas

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

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • El contenido en movimiento, que se desplace o parpadee, que comience de forma automática, dure más de cinco segundos y se muestre junto a otro contenido, debe disponer de un mecanismo que permita a los usuarios pausarlo, detenerlo u ocultarlo.

Comprensión del criterio

Descripción resumida

Los elementos que se mueven o parpadean automáticamente durante más de cinco segundos deben ofrecer un control visible para pausarlos, detenerlos o esconderlos.

Objetivo

Evitar distracciones y sobrecarga cognitiva provocada por movimiento continuo en pantalla, permitiendo que las personas mantengan la atención y la capacidad de lectura o interacción.

Importancia de cumplir el criterio

El movimiento automático y prolongado puede impedir leer, generar confusión, provocar mareo o pérdida de foco, afectando especialmente a personas con discapacidad cognitiva o visual.

Referencias WCAG

Recursos de apoyo

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

  1. Paso 1. Identificar contenido que se mueve, desplaza o parpadea automáticamente.
  2. Paso 2. Comprobar si dura más de cinco segundos y no es esencial.
  3. Paso 3. Verificar existencia de controles para pausar, detener o esconder la animación.
  4. Paso 4. Asegurar que los controles son accesibles con teclado y lectores de pantalla.
  5. Paso 5. Revisar compatibilidad con prefers-reduced-motion.

Resultado esperado

El usuario puede pausar, detener u ocultar el movimiento sin perder acceso al contenido principal.

Ejemplo

✅ Accesible

<button id="pause">Pausar animación</button>
<div id="banner" style="animation: slide 3s infinite linear;">Oferta especial</div>
<script>
let paused=false;
pause.onclick=()=>{paused=!paused;banner.style.animationPlayState=paused?'paused':'running'}
</script>

❌ No accesible

<div style="animation: slide 8s infinite linear;">Noticias</div>

Otras herramientas de evaluación

  • Chrome DevTools → Animación / Performance
  • AXE / Accessibility Insights
  • Pruebas con JAWS, NVDA y VoiceOver
  • Configuración del sistema: prefers-reduced-motion










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 2.2.2-A. Contenido en movimiento, parpadeo o desplazamiento

Loading comments...