Animación a partir de interacciones

Qué exige este criterio

Las animaciones de movimiento desencadenadas por la interacción del usuario — desplazamiento en paralaje, transiciones de página, ampliaciones activadas al pasar el cursor, efectos de aparición vinculados al scroll — deben desactivarse cuando el usuario solicita movimiento reducido, a menos que la animación sea esencial para la función o la información que se transmite.

El mecanismo estándar es la consulta de medios CSS prefers-reduced-motion: reduce, que refleja el ajuste de reducción de movimiento a nivel de sistema operativo que exponen macOS, Windows, iOS y Android.

Cómo cumplirlo

• Envolver cualquier movimiento significativo (transformaciones, traslaciones grandes, paralaje, transiciones de página, animaciones vinculadas al scroll) dentro de @media (prefers-reduced-motion: no-preference).
• Para las animaciones controladas por JavaScript (GSAP, Framer Motion, Lottie), comprobar window.matchMedia('(prefers-reduced-motion: reduce)').matches y, en ese caso, omitir la animación o sustituirla por un cambio de estado instantáneo.
• Permitir que las animaciones de retroalimentación esencial (indicadores de carga, vistas previas de arrastre) continúen con una amplitud más sutil cuando está activada la opción de movimiento reducido: transmiten función, no adorno.
• Realizar pruebas con la opción Ajustes del sistema → Accesibilidad → Pantalla → Reducir movimiento activada en macOS, así como con sus equivalentes en Windows, iOS y Android.

Fallos habituales

• Páginas de marketing con desplazamiento en paralaje que ignoran la preferencia de movimiento reducido del sistema operativo.
• Bibliotecas de transición de página (Barba.js, las view transitions de Astro en configuraciones anteriores) que animan grandes traslaciones independientemente de la preferencia del usuario.
• Efectos de elevación al pasar el cursor sobre tarjetas, con largas transiciones translateY que generan malestar en usuarios con trastornos vestibulares.
• Animaciones desencadenadas por el scroll en páginas de formato largo que disparan docenas de efectos de movimiento a medida que el usuario desplaza la página, especialmente desorientadoras a gran escala.
• Animaciones Lottie en flujos de incorporación que reproducen movimiento a pantalla completa sin comprobar la preferencia del usuario.

axe y Lighthouse no detectan de forma fiable los fallos de prefers-reduced-motion, aunque la auditoría de accesibilidad de Lighthouse incluye una comprobación de prefers-reduced-motion en versiones más recientes, y muchos linters de sistemas de diseño ya lo imponen.

Por qué es importante

Los trastornos vestibulares — la enfermedad de Ménière, la migraña vestibular, el síndrome posconmocional, el mareo postural perceptivo persistente — pueden agravarse con movimientos grandes o inesperados en pantalla. El resultado es náuseas o vértigo real y físico, no mero malestar. Respetar prefers-reduced-motion es una de las mejoras de accesibilidad disponibles con menor coste y mayor impacto, y el ajuste a nivel de sistema operativo significa que el usuario ya ha indicado lo que necesita.