Movimiento y animación: prefers-reduced-motion, 2.2.2 y 2.3.3

Las animaciones venden: dan sensación de calidad, guían la atención y hacen que una interfaz parezca viva. Pero para una parte de la población son un problema real. Las personas con trastornos vestibulares pueden sufrir mareos, náuseas y desorientación con desplazamientos de paralaje, zooms y transiciones amplias; las personas con epilepsia fotosensible pueden sufrir crisis con destellos; las personas con TDAH o con dificultades de atención pierden el hilo cuando algo se mueve en la periferia; y cualquier persona con lector de pantalla puede ver cómo un elemento se mueve antes de que haya terminado de leerlo. Esta lección cubre tres criterios y una media query que los hace fáciles de cumplir.

Los criterios

• 2.2.2 Poner en pausa, detener, ocultar (A): para cualquier contenido que se mueva, parpadee o se desplace automáticamente, dure más de 5 segundos y se presente junto a otro contenido, debe haber un mecanismo para pausarlo, detenerlo u ocultarlo. Lo mismo para la información que se actualiza automáticamente (tickers, resultados en vivo), que debe poder pausarse o controlarse en frecuencia. Afecta a carruseles, vídeos de fondo, animaciones de carga que siguen moviéndose cuando la página ya se puede usar, textos en marquesina y fondos animados.
• 2.3.1 Umbral de tres destellos o menos (A): nada puede destellar más de tres veces por segundo, salvo que el área o el contraste estén por debajo de los umbrales definidos. Es un criterio de seguridad, no de comodidad: se trata de evitar crisis epilépticas.
• 2.3.3 Animación a partir de interacciones (AAA): las animaciones de movimiento provocadas por una interacción (al hacer scroll, al pulsar, al pasar el puntero) deben poder desactivarse, salvo que sean esenciales. Aunque sea AAA, la forma de cumplirlo cuesta tan poco que debería ser la norma.

prefers-reduced-motion

Los sistemas operativos tienen desde hace años un ajuste de «reducir movimiento» (en Windows, Ajustes, Accesibilidad, Efectos visuales; en macOS, Accesibilidad, Pantalla; en iOS, Accesibilidad, Movimiento; en Android, Eliminar animaciones). La media query prefers-reduced-motion expone esa preferencia a la web, con soporte en todos los navegadores actuales.

.tarjeta { transition: none; }

@media (prefers-reduced-motion: no-preference) {
  .tarjeta { transition: transform 300ms ease; }
  .tarjeta:hover { transform: translateY(-4px); }
  .hero { animation: paralaje 20s linear infinite; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

«Reducir» no significa necesariamente «eliminar». Un fundido suave (cambio de opacidad) rara vez molesta; lo que causa malestar es el movimiento espacial: desplazamientos grandes, zoom, rotación, paralaje, elementos que entran volando. Una buena estrategia es sustituir las transformaciones por fundidos cuando la preferencia está activa, en lugar de quitar toda retroalimentación.

En JavaScript puedes leer la misma preferencia para detener carruseles, vídeos de fondo y animaciones por scroll:

const reducir = window.matchMedia('(prefers-reduced-motion: reduce)');
if (reducir.matches) {
  carrusel.detenerRotacion();
  videoFondo.pause();
}
reducir.addEventListener('change', (e) => {
  if (e.matches) carrusel.detenerRotacion(); else carrusel.iniciarRotacion();
});

Controles de pausa visibles

Para cumplir 2.2.2 con cualquier contenido que se mueva solo durante más de 5 segundos, hace falta un control que:

• Sea visible, esté cerca del contenido en movimiento y sea de los primeros elementos enfocables de ese bloque.
• Tenga nombre y estado claros («Pausar animación» / «Reanudar animación» o aria-pressed).
• Detenga el movimiento de verdad (no solo lo oculte tras una capa) y recuerde la elección durante la sesión o, mejor, en localStorage.

Los vídeos de fondo sin sonido son el caso más frecuente de incumplimiento en portadas corporativas: duran más de 5 segundos, se reproducen solos y no tienen controles. Soluciones: botón de pausa superpuesto, no reproducirlos si prefers-reduced-motion está activo, o sustituirlos por una imagen fija en móvil y conexiones lentas (que además mejora el rendimiento).

<video autoplay loop muted playsinline src="fondo.mp4"></video>

Animaciones por scroll y paralaje

Los efectos que mueven elementos según el desplazamiento (paralaje, elementos que aparecen deslizándose, encabezados que se encogen) son los que más malestar vestibular producen, y entran directamente en 2.3.3. Aplica la misma receta: envuélvelos en prefers-reduced-motion: no-preference, y considera un interruptor «Reducir animaciones» en la propia web para quien no conozca el ajuste del sistema. Las librerías de animación por scroll (AOS, GSAP ScrollTrigger, Framer Motion) tienen opciones para respetar la preferencia; actívalas.

Destellos y parpadeos

2.3.1 se mide: más de tres destellos por segundo en un área significativa es un fallo, con independencia de preferencias del usuario. Afecta a GIF animados, efectos de «flash» en notificaciones, vídeos con luces estroboscópicas y transiciones rápidas entre colores muy contrastados. Herramientas como PEAT (Photosensitive Epilepsy Analysis Tool) analizan vídeos y animaciones. La regla práctica: nada que parpadee rápido, y si un vídeo contiene escenas con destellos, aviso previo y posibilidad de saltarlas.

Cómo comprobarlo

• Activa «reducir movimiento» en tu sistema operativo y recarga: lo que siga moviéndose al interactuar (al hacer scroll o pasar el puntero) incumple 2.3.3, y lo que se mueva solo es candidato a fallar 2.2.2 si no tiene control de pausa.
• Carga la página y cronometra: cualquier cosa que se mueva más de 5 segundos necesita un control de pausa alcanzable con teclado.
• Busca en el código autoplay, animation, transition, setInterval y librerías de scroll, y comprueba cada caso.
• Pasa los vídeos y GIF con destellos por un analizador de fotosensibilidad.

Resumen

• 2.2.2 exige pausar, detener u ocultar todo movimiento automático que dure más de 5 segundos; 2.3.1 prohíbe más de tres destellos por segundo; 2.3.3 (AAA) pide poder desactivar las animaciones por interacción.
• Define las animaciones dentro de @media (prefers-reduced-motion: no-preference) o apágalas con reduce; sustituye movimiento espacial por fundidos.
• Lee la preferencia en JavaScript con matchMedia para detener carruseles y vídeos de fondo.
• La preferencia del sistema no sustituye al control de pausa visible que exige 2.2.2.
• Prueba con «reducir movimiento» activado y con un cronómetro.