Separa la información útil del movimiento decorativo
Usa la característica de medios prefers-reduced-motion para detectar la preferencia en CSS y aplícala también a los efectos controlados por código cuando sea necesario. Por ejemplo, elimina el zoom repetido del fondo, pero conserva una breve señal de color o texto que indique una acción correcta. Reducir el movimiento no debe hacer que se pierda información: el jugador debe seguir entendiendo qué ha cambiado y qué hacer después.
No elimines todas las animaciones automáticamente. Un objetivo en movimiento puede ser parte de la mecánica, mientras que el temblor de cámara tras una colisión puede ser decorativo. Conserva el movimiento necesario para indicar ubicación o tiempo y, cuando sea posible, ofrece otra señal clara. MDN explica que esta preferencia pide reducir o sustituir el movimiento no esencial.
Prueba de transiciones y efectos repetidos.
Revise el movimiento a lo largo de toda la experiencia: menús, carga, transiciones de cámara, estados de victoria y pérdida y efectos recurrentes durante una ejecución larga. Una configuración que solo deshabilita una animación CSS puede omitir JavaScript o el movimiento del lienzo. Mantenga la preferencia constante en todas las capas de renderizado y evite cambios repentinos si la configuración del sistema cambia mientras un juego está activo.
Activa la opción del sistema operativo para reducir el movimiento y comprueba que los jugadores todavía puedan localizar objetivos, reconocer impactos y entender las transiciones. Prueba juntos los efectos CSS, los programados y los del lienzo. MDN documenta la función multimedia y cómo ofrecer un estilo alternativo cuando la preferencia está activada.
Preguntas sobre movimiento reducido en juegos de navegador
¿El movimiento reducido debería detener todo movimiento en un juego?
No. Es imprescindible cierto movimiento para jugar o comunicar el estado. Reduzca o reemplace los efectos no esenciales y preserve una forma clara de comprender el tiempo, la ubicación y la retroalimentación.
¿Cómo detecta una página la preferencia?
CSS puede usar la característica de medios prefers-reduced-motion. Los efectos programados y los dibujados en canvas también deben consultar esa preferencia para mantener una presentación coherente.
Más información
¿Has visto algo desactualizado? Notificar una corrección