Cómo dar soporte a prefers-reduced-motion correctamente
Guía completa para dar soporte a prefers-reduced-motion: seguridad vestibular, media queries de CSS, hooks en JavaScript y diseño de alternativas funcionales.
Idea clave
Dar soporte a prefers-reduced-motion correctamente no consiste en eliminar toda confirmación y dejar la interfaz inerte. Consiste en suprimir movimientos amplios, rápidos o desorientadores (como paralajes, rotaciones 3D o grandes desplazamientos) y sustituirlos por cambios instantáneos, fundidos suaves o transiciones de color que comuniquen el estado sin causar mareos.
Comprensión de los trastornos vestibulares y el mareo por movimiento
Las personas con trastornos vestibulares experimentan vértigo y náuseas cuando el movimiento en pantalla no coincide con su equilibrio físico. Transiciones expansivas, vídeos automáticos y rebotes continuos pueden desencadenar malestar en pocos segundos.
El error de eliminar todas las animaciones por completo
Una práctica dañina común es aplicar * { animation: none !important; transition: none !important; } en CSS. Esto rompe transiciones de estado compuestas, hace desaparecer tooltips antes de leerlos y elimina la retroalimentación de carga. El movimiento debe adaptarse, no destruirse.
- Elimina desplazamientos amplios, escalas drásticas y efectos de paralaje
- Conserva fundidos suaves de opacidad (100 ms) para evitar cambios bruscos
- Sustituye spinners giratorios por etiquetas de estado o barras de progreso
- Ofrece una opción en los ajustes del producto además de respetar el sistema
Implementación mediante CSS y tokens de diseño
Estructura tus tokens de movimiento para que los tokens de desplazamiento se resuelvan a 0 ms bajo @media (prefers-reduced-motion: reduce), mientras que los tokens de fundido se mantengan en un rango suave de 80 a 100 ms.
Gestión en JavaScript y motores de físicas
En entornos de JavaScript, escucha window.matchMedia('(prefers-reduced-motion: reduce)'). Pasa el parámetro reducedMotion: true a tus motores de animación para que los muelles se asienten de inmediato en su posición final.
Principios clave para recordar
- Nunca elimines la confirmación funcional; sustituye desplazamientos por fundidos
- Suprime recorridos largos y paralajes manteniendo transiciones suaves de opacidad
- Configura los tokens de diseño para centralizar los ajustes de movimiento reducido
- Prueba tanto con los ajustes del sistema operativo como con herramientas del navegador