prefers-reduced-motion : quelles animations réduire, et comment

Ce que c'est

prefers-reduced-motion est une fonctionnalité média CSS qui, selon MDN, détecte si l'utilisateur a activé un réglage de réduction du mouvement sur son appareil. Elle prend deux valeurs : no-preference (évaluée comme fausse) et reduce. La page de MDN elle-même avertit que son exemple de mise à l'échelle peut poser problème aux lecteurs souffrant de troubles vestibulaires liés au mouvement, précisément le public visé par ce réglage : des effets importants de déplacement, de zoom ou de parallaxe peuvent provoquer des vertiges ou des nausées.

Deux critères WCAG encadrent cette obligation. Le critère 2.2.2 Pause, arrêt, masquage (niveau A) exige un moyen de mettre en pause, d'arrêter ou de masquer tout contenu en mouvement, clignotant ou défilant qui démarre automatiquement, dure plus de cinq secondes et apparaît à côté d'autre contenu. Le critère 2.3.3 Animation suite à une interaction (niveau AAA) demande qu'une animation de mouvement déclenchée par une interaction puisse être désactivée, sauf si elle est essentielle ; son exemple est une transition de retournement de page désactivée lorsque la requête média signale reduce.

Pourquoi c'est important

Ce réglage est une demande explicite de l'utilisateur. L'ignorer rend un site inutilisable pour certaines personnes et désagréable pour bien d'autres qui l'ont activé pour des raisons de batterie, de distraction ou de préférence ; le respecter coûte quelques lignes de CSS.

Comment l'appliquer

• Privilégier une adhésion explicite (opt-in) : envelopper le mouvement dans @media (prefers-reduced-motion: no-preference) { … } afin que l'état par défaut soit calme et que l'animation soit l'ajout. Autre possibilité : la neutraliser sous (prefers-reduced-motion: reduce).
• Réduire, sans nécessairement supprimer. Remplacer les translations, les mises à l'échelle et la parallaxe par des fondus d'opacité ou des changements instantanés ; conserver les transitions courtes qui montrent une relation de cause à effet (l'ouverture d'un panneau, la bascule d'un interrupteur) si elles comportent peu de mouvement.
• Définir scroll-behavior: auto au lieu de smooth sous reduce, et arrêter la lecture automatique des vidéos d'arrière-plan et des carrousels.
• Reproduire la requête dans le script : window.matchMedia('(prefers-reduced-motion: reduce)') avec un écouteur change, et transmettre le résultat aux bibliothèques d'animation et aux appels Element.animate().
• Fournir également un commutateur de mouvement dans l'application ; il couvre les utilisateurs dont la plateforme n'a pas de réglage et satisfait à l'exigence de pause/arrêt/masquage du critère 2.2.2 pour le contenu en lecture automatique.

Pièges

Le bricolage généralisé * { animation: none !important; transition: none !important } casse le code qui attend animationend ou transitionend ; raccourcir les durées jusqu'à presque zéro laisse ces événements se déclencher. Les indicateurs de chargement sont eux aussi du mouvement ; une variante réduite (opacité pulsante, texte statique « Chargement… ») reste nécessaire. Le contenu qui clignote relève d'un problème distinct (WCAG 2.3.1) que cette requête ne résout pas.