Distinguer les indications utiles des effets spectaculaires
Utilisez la fonctionnalité média prefers-reduced-motion pour détecter la préférence de l’utilisateur en CSS et, si nécessaire, appliquez-la aussi aux effets contrôlés par script. Par exemple, supprimez un zoom répété de l’arrière-plan tout en gardant un bref signal de couleur ou de texte indiquant la réussite d’une action. La réduction des mouvements ne doit pas dégrader l’expérience sans que cela se voie : les joueurs doivent toujours comprendre ce qui a changé et quoi faire ensuite.
Ne supprimez pas chaque animation mécaniquement. Une cible en mouvement peut être un élément de gameplay, tandis qu'un bougé de caméra après une collision peut être décoratif. Préservez le mouvement nécessaire à la localisation ou au timing et fournissez un autre signal clair lorsque cela est possible. MDN explique que la préférence demande de réduire ou de remplacer les mouvements non essentiels.
Tester les transitions et les effets répétés
Examinez les mouvements tout au long de l'expérience : menus, chargement, transitions de caméra, états de victoire et de perte et effets récurrents sur une longue période. Un paramètre qui désactive une seule animation CSS peut manquer le mouvement JavaScript ou du canevas. Gardez les préférences cohérentes entre les couches de rendu et évitez les changements soudains si les paramètres du système changent pendant qu'un jeu est actif.
Activez le paramètre de réduction de mouvement du système d'exploitation et vérifiez que les joueurs peuvent toujours localiser les cibles, reconnaître les coups et comprendre les transitions. Testez ensemble les effets CSS, scriptés et canevas. MDN documente la fonctionnalité multimédia et comment fournir un style alternatif lorsque la préférence est réduite.
Questions sur mouvement réduit dans les jeux par navigateur
La réduction des mouvements devrait-elle arrêter tous les mouvements dans un jeu ?
Non. Certains mouvements sont indispensables pour jouer ou comprendre l’état du jeu. Réduisez ou remplacez les effets non essentiels, en conservant des indications claires sur le timing, la position et le résultat des actions.
Comment une page détecte-t-elle la préférence ?
CSS peut utiliser la fonctionnalité média prefers-reduced-motion. Les effets pilotés par script ou dessinés sur un canevas doivent suivre une préférence équivalente afin de conserver une présentation cohérente.
Pour aller plus loin
Vous avez repéré une information dépassée ? Signaler une correction