prefers-reduced-motion : modèles CSS, JavaScript et React | We.Inc
Détectez le réglage de réduction des animations en CSS et en JavaScript, voyez votre propre réglage en direct, et copiez des modèles qui remplacent les grands mouvements par des fondus au lieu de supprimer l'animation.
Respecter prefers-reduced-motion
prefers-reduced-motion est une media feature CSS qui indique si un visiteur a demandé à son appareil moins d'animations. Elle a deux valeurs, no-preference et reduce. Placez les grands mouvements comme le parallaxe, les zooms et les glissements dans une requête, et quand la valeur est reduce, remplacez-les par un fondu court ou aucune animation.
Réglages Système > Accessibilité > Affichage (ou Mouvement) > Réduire les animations
iOS
Réglages > Accessibilité > Mouvement > Réduire les animations
Android 9 et versions ultérieures
Paramètres > Accessibilité > Supprimer les animations
Firefox (tests)
about:config, définissez ui.prefersReducedMotion sur 1
Les gens activent la réduction des animations parce que les glissements, les zooms et le parallaxe peuvent provoquer vertiges, nausées ou maux de tête, en particulier chez les personnes atteintes de troubles vestibulaires. Le badge ci-dessous lit en direct le réglage de votre appareil, et la démo montre la même animation en version complète et réduite, pour comparer avant de choisir un modèle.
Regardez le badge : il affiche ce que votre appareil indique en ce moment et se met à jour si vous changez le réglage.
Utilisez le sélecteur d'aperçu pour voir la version réduite de la démo sans modifier votre réglage système.
Copiez le modèle CSS, JavaScript ou React qui correspond à la façon dont votre site anime les éléments.
Réduisez, ne supprimez pas. Un fondu d'opacité rapide montre toujours que quelque chose a changé, sans mouvement à travers l'écran.
Écrivez le mouvement comme une amélioration : placez les animations dans @media (prefers-reduced-motion: no-preference) pour que la version sûre soit la version par défaut.
Les vidéos en lecture automatique et les carrousels ont aussi besoin d'un bouton pause, quel que soit le réglage d'animation.
Dans les Chrome DevTools, vous pouvez émuler ce réglage depuis le panneau Rendering pour tester sans modifier votre système.
Les effets déclenchés au défilement comptent aussi. Le parallaxe prononcé et le scroll-jacking sont les sujets de plainte les plus fréquents.
Questions fréquentes
Quelles valeurs prend prefers-reduced-motion ?
Deux : no-preference, quand le visiteur n'a rien réglé, et reduce, quand il a demandé moins d'animations. Écrire @media (prefers-reduced-motion) seul revient à tester reduce.
Comment vérifier prefers-reduced-motion en JavaScript ?
Appelez window.matchMedia("(prefers-reduced-motion: reduce)") et lisez sa propriété matches. Ajoutez un écouteur d'événement change à l'objet renvoyé pour réagir si le réglage change pendant que la page est ouverte.
Faut-il désactiver toutes les animations quand reduce est activé ?
Non. La demande porte sur moins de mouvement, pas sur une page figée. Gardez les changements de couleur, les fondus courts et les indicateurs de progression, et supprimez ou atténuez les mouvements comme les glissements, les changements d'échelle, les rotations et le parallaxe.
Respecter la réduction des animations est-il exigé par les WCAG ?
Le critère WCAG 2.3.3 Animation from Interactions, niveau AAA, demande que les animations déclenchées par une interaction puissent être désactivées, sauf si elles sont essentielles. Respecter le réglage système est l'un des moyens prévus pour y satisfaire. Par ailleurs, le critère 2.2.2 Pause, Stop, Hide de niveau A couvre les animations qui démarrent d'elles-mêmes.
Comment gérer la réduction des animations avec Tailwind ?
Utilisez la variante motion-safe: pour appliquer une animation uniquement quand aucune préférence n'est définie, ou motion-reduce: pour en remplacer une quand reduce est activé, par exemple motion-safe:animate-bounce.
Quels mouvements posent problème
Le problème vient des mouvements qui occupent une grande partie de l'écran ou qui vont dans une direction que le visiteur n'a pas provoquée : arrière-plans en parallaxe, zooms sur toute la page, transitions de page par glissement, éléments qui tournent et contenu qui saute pendant le défilement.
Les retours visuels petits, rapides et déclenchés par l'utilisateur, comme un changement de couleur de bouton ou une case qui se coche, posent rarement problème et peuvent généralement rester.
Un CSS sans mouvement par défaut
Beaucoup de sites ajoutent à la fin une requête reduce qui ramène toutes les durées presque à zéro. Cela fonctionne, mais il est facile d'oublier une animation, et certains scripts écoutent des événements animationend qui se déclenchent alors instantanément.
Écrire le mouvement dans une requête no-preference inverse la logique par défaut. Toute personne dont le navigateur n'indique aucune préférence voit toujours les animations, et tout ce que vous oubliez retombe sur la version calme.
Scripts et bibliothèques
Les requêtes CSS n'atteignent pas les animations lancées depuis JavaScript, canvas ou les appels de défilement fluide. Vérifiez la media query avant d'appeler element.animate() ou scrollIntoView avec behavior: smooth.
Lisez le réglage une fois au démarrage et abonnez-vous à son événement change, pour respecter une personne qui le modifie en cours de visite sans recharger la page.
Modèles CSS
Le mouvement comme amélioration
La carte n'entre en glissant que si aucune préférence n'est définie. Les autres voient un léger fondu.
Un filet de sécurité pour les sites existants
Utile quand vous ne pouvez pas réécrire chaque animation. Les durées deviennent presque nulles plutôt que none, pour que les événements animationend et transitionend se déclenchent toujours.
JavaScript et React
Lire le réglage et suivre ses changements
matchMedia renvoie une liste dynamique. Son événement change se déclenche quand le visiteur modifie le réglage.
Hook React : usePrefersReducedMotion
Démarre à true côté serveur, pour que rien ne s'anime avant que le navigateur ait répondu.
Par quoi remplacer chaque effet
Alternatives réduites
Mouvement complet
Version réduite
Arrière-plan en parallaxe
Arrière-plan fixe
Changement de page par glissement ou zoom
Fondu enchaîné, ou changement instantané
Élément qui surgit au défilement
Fondu court sur place
Indicateur de chargement qui tourne
Opacité pulsée ou barre de progression
Défilement fluide vers une ancre
Saut instantané
Vidéo d'arrière-plan en lecture automatique
Image d'affiche avec un bouton de lecture
Votre réglage d'animation
Le badge lit le réglage de votre appareil avec matchMedia, et le sélecteur d'aperçu montre l'animation réduite sans modifier votre système.
Mode d'aperçu
Suivre mon réglage
Aperçu mouvement complet
Aperçu réduit
Rejouer
Réduit : un fondu court sur place.
Mouvement complet : le panneau s'envole, pivote et grandit.