Diseñar pensando en las demás personas es uno de los pilares fundamentales del desarrollo web moderno. Cuando hablamos de animaciones y transiciones en CSS, existe un grupo de usuarios que prefiere no ver movimientos bruscos en pantalla. Para ellos, CSS ofrece una herramienta poderosa que permite adaptar nuestras interfaces de forma elegante y respetuosa.
¿Qué es prefers-reduced-motion y por qué importa?
El media query prefers-reduced-motion es una consulta de medios que detecta si el usuario ha activado en su sistema operativo la opción de reducir el movimiento [0:53]. Muchas personas experimentan incomodidad con animaciones excesivas, ya sea por condiciones vestibulares, sensibilidad visual o simplemente por preferencia personal.
Cuando un usuario activa esta opción en las preferencias de accesibilidad de su sistema, el navegador lo detecta y nosotros podemos responder con estilos alternativos. Esto significa que no eliminamos la funcionalidad, sino que la adaptamos para que siga siendo útil sin depender del movimiento.
¿Cómo funciona en la práctica con una card giratoria?
El ejemplo trabajado parte de una tarjeta que utiliza backface-visibility para mostrar dos caras mediante una rotación animada [1:13]. Cuando el usuario pasa el mouse por encima, la tarjeta gira y revela su cara posterior.
El problema surge cuando una persona tiene la casilla de reduced motion activada en su sistema [1:44]. Si toda la interacción depende de la animación de giro, esa persona nunca vería la cara trasera de la tarjeta. Aquí es donde entra la accesibilidad como responsabilidad del desarrollador.
¿Cómo se estructura el código con este media query?
La estrategia consiste en organizar el CSS en dos bloques [2:08]:
- Dentro del media query
prefers-reduced-motion: no-preference: se coloca todo el código de rotación, animaciones y transiciones. Este bloque solo se ejecuta cuando el usuario no ha solicitado reducir el movimiento.
- Fuera del media query: se coloca la versión accesible, que en este caso utiliza cambios de opacity en lugar de rotaciones.
El resultado es que, para usuarios con movimiento reducido activado, al hacer hover sobre la tarjeta la cara trasera aparece con un cambio de opacidad de cero a uno [2:30]. No hay giro, no hay animación compleja, pero la funcionalidad se mantiene intacta: el usuario puede ver ambas caras de la tarjeta.
¿Dónde se activa la preferencia de movimiento reducido?
En las preferencias de accesibilidad del sistema operativo, existe una sección de display donde aparece la casilla reduced motion [1:30]. Al activarla, el navegador comunica esta preferencia a las páginas web que la consulten mediante el media query correspondiente.
Esto refuerza un principio importante: la accesibilidad no es solo responsabilidad del sistema operativo, sino también del código que escribimos. Cada desarrollador tiene la capacidad de hacer que su sitio responda a estas preferencias.
¿Por qué la empatía es parte del código?
Pensar en personas con habilidades diferentes no es un extra, es parte integral del desarrollo profesional [0:27]. La analogía presentada es clara: así como el sombrerero diseñó un vestido a la medida de Alicia, nosotros debemos adaptar nuestras interfaces a las necesidades de cada usuario.
Algunas buenas prácticas para implementar esto:
- Colocar animaciones y transiciones dentro de media queries de preferencia.
- Ofrecer alternativas funcionales como cambios de opacidad o visibilidad.
- Probar el sitio con la casilla de movimiento reducido activada.
- No depender exclusivamente de animaciones para comunicar información importante.
El tema de aceleración de hardware, las transformaciones y las transiciones quedan completos con esta capa de accesibilidad [3:05]. Dominar estas herramientas significa construir experiencias que funcionen para todos, sin excepción.
¿Ya probaste activar la opción de movimiento reducido en tu sistema para ver cómo responden tus proyectos? Comparte tu experiencia en los comentarios.
