Principio 2/2.2 Tiempo Suficiente/2.2.2-A
De WCAG Wiki
2.2.2-A. Contenido en movimiento, parpadeo o desplazamiento
- Nivel: A
- Versión: 2.2
- Principio: 2_Operable
- Pauta: 2.2_Tiempo_suficiente
- Grupo: Interacción
- Subgrupo: Movimiento_visual
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Cognitiva –
Barrera grave
-
Baja visión –
Barrera moderada
-
Visual total –
Barrera moderada
-
Motriz –
Barrera leve
-
Auditiva –
Barrera leve
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
- Paso 1. Identificar contenido que se mueve, desplaza o parpadea automáticamente.
- Paso 2. Comprobar si dura más de cinco segundos y no es esencial.
- Paso 3. Verificar existencia de controles para pausar, detener o esconder la animación.
- Paso 4. Asegurar que los controles son accesibles con teclado y lectores de pantalla.
- 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...
