Algunos lectores sufren migrañas o problemas de equilibrio por el movimiento de la página. El sistema operativo ya lo sabe; expone la preferencia a las páginas web como la consulta de medios de preferencia de movimiento reducido. Tu trabajo es encaminar cada animación voluntaria a través de él.
@media (prefers-reduced-motion: no-preference) {
.reading-bar { animation: reading linear;
animation-timeline: scroll(root block); }
.card { transition: transform 0.3s ease; }
}
@media (prefers-reduced-motion: reduce) {
*, ::before, ::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}Lo que debería significar reducir para ti
- El movimiento decorativo se detiene por completo: paralaje, insignias flotantes, coreografía de entrada.
- Se siguen produciendo cambios de estado significativos, de forma instantánea: se abren paneles; sin tobogán. La información llega sin el viaje.
- Las animaciones adjuntas basadas en desplazamiento están cubiertas por la misma puerta; vincularlos a ninguna preferencia significa que los lectores que no apoyan o que optan por no participar obtienen el diseño en estado quieto sin interrupción visual.
La auditoría que la mantiene honesta.
- Establezca la preferencia del sistema operativo (macOS: reducir el movimiento y luego recargar) y haga clic en cada elemento interactivo del sitio.
- Prepare su CSS para animación y transición, y verifique que cada uno se encuentre dentro de la puerta sin preferencias o se degrade a instantáneo.
- Haga lo mismo con JS: Ver transiciones, revelaciones de IntersectionObserver y llamadas de desplazamiento suave necesitan el mismo respeto.
- Mantenga la versión !important como red de seguridad a nivel de mapa del sitio, no como su primera herramienta; una animación enrutada es un mejor diseño que una anulación de emergencia.
El fotograma genial: el movimiento se convierte en una característica solicitada, no en una salida forzada. Pocas estéticas en la web envejecen más rápido que la animación por sí misma, y una consulta de medios hace que esa elección respete ambas estéticas.