prefers-reduced-motion es una línea en una media query, lo que hace fácil asumir que lo manejaste una vez y seguir adelante. Hice esa suposición durante meses. Después realmente activé el ajuste en mi sistema operativo y navegué por mi propio sitio, y encontré cuatro lugares distintos donde algo todavía se movía.
Lo que encontré
- El “pop” al hacer hover sobre la tarjeta —el translate hacia arriba-izquierda con la sombra que se encoge— ignoraba el ajuste por completo y seguía corriendo a máxima velocidad.
- El fade-and-rise del scroll-reveal tenía un fallback de reduced-motion para el transform, pero no para el fade de opacidad, así que las tarjetas seguían apareciendo gradualmente en lugar de aparecer al instante.
- El rebote del link de navegación respetaba el ajuste en hover pero no en focus, así que la navegación por teclado —que usan desproporcionadamente personas que también tienen activados ajustes de sensibilidad al movimiento— igual recibía la animación completa.
- Un cross-fade de transición de página que había agregado más recientemente simplemente no había sido probado contra el ajuste en absoluto, porque lo escribí después de la última vez que hice esta auditoría.
El patrón detrás de los cuatro
Cada uno de estos estaba escrito correctamente para la funcionalidad e incompletamente para el ajuste —pensaba en reduced motion al escribir la interacción principal y me olvidaba de que existía para cuando llegaba a un estado secundario como el focus, o una funcionalidad que agregué tres meses después del componente original.
@media (prefers-reduced-motion: reduce) {
.card,
.nav-link,
[data-reveal] {
transition: none !important;
animation: none !important;
transform: none !important;
}
}Por qué una sola pasada no alcanza
La conclusión incómoda es que esto no es una casilla que se marca una vez. Cada elemento interactivo nuevo es un lugar nuevo donde se puede olvidar el ajuste, porque es fácil escribirlo correctamente por accidente en el camino feliz y así de fácil dejarlo roto en el camino que no probé personalmente. El arreglo hacia adelante no es una auditoría única más inteligente —es una línea en la checklist de revisión para literalmente cada futura animación, y una prueba real con el interruptor a nivel de sistema operativo antes de considerar algo terminado.