Toutes les animations ne sont pas perçues comme un simple effet esthétique. Pour une partie des utilisateurs, un fondu qui glisse, un carrousel qui défile en continu ou un arrière-plan qui pulse peuvent déclencher des vertiges, des nausées ou des migraines, en particulier chez les personnes atteintes de troubles vestibulaires. La media query prefers-reduced-motion permet au CSS de détecter que l'utilisateur a explicitement demandé, au niveau de son système, que les animations soient réduites au minimum.
Cette préférence existe depuis longtemps dans les systèmes d'exploitation, sous des noms comme Réduire les animations sur iOS et macOS ou Afficher les animations sur Windows, mais elle restait invisible pour le web tant qu'aucune media query ne permettait de la lire. Depuis son adoption large par les navigateurs, respecter prefers-reduced-motion est devenu une pratique d'accessibilité de base, au même titre que le contraste des couleurs.
Définition
prefers-reduced-motion est une Media query CSS qui détecte si l'utilisateur a activé, dans les réglages de son système d'exploitation, une option demandant de limiter les animations et les transitions non essentielles. Elle accepte deux valeurs : reduce, lorsque l'utilisateur a demandé une réduction des mouvements, et no-preference, la valeur par défaut lorsque rien n'a été réglé.
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}Pourquoi ce n'est pas un simple réglage de confort
Contrairement à une idée répandue, cette media query ne s'adresse pas uniquement à des personnes qui trouvent les animations agaçantes. Elle concerne en particulier les personnes atteintes de troubles vestibulaires, une catégorie de troubles de l'oreille interne et du cerveau qui régule l'équilibre. Chez ces personnes, un mouvement à l'écran, même bref, peut provoquer une sensation de déséquilibre bien réelle, des nausées, voire des migraines qui durent plusieurs heures après avoir fermé l'onglet. Ignorer ce réglage revient concrètement à rendre un site inutilisable pour une partie de l'audience, pas seulement moins agréable à parcourir.
C'est pour cette raison que respecter prefers-reduced-motion n'est pas une option de confort esthétique comparable au choix d'une police, mais relève des mêmes obligations que le contraste de texte ou la navigation au clavier dans une démarche d'accessibilité sérieuse.
Réduire sans supprimer toute animation
La réponse la plus simple, désactiver purement et simplement toutes les transition et les Animation CSS, fonctionne mais n'est pas toujours la meilleure. Une bonne pratique consiste à distinguer les mouvements décoratifs, qu'il faut supprimer sans hésiter, des mouvements qui servent à orienter l'utilisateur, comme un focus qui se déplace ou un indicateur de changement d'état, que l'on peut simplement raccourcir plutôt qu'éliminer.
.carousel {
animation: slide 6s infinite;
}
@media (prefers-reduced-motion: reduce) {
.carousel {
animation: none;
}
.focus-indicator {
transition-duration: 0.05s; /* raccourci plutot que supprime */
}
}Le piège des animations jugées essentielles
prefers-reduced-motion sous prétexte qu'elle n'est pas juste décorative. En réalité, la solution correcte n'est presque jamais de l'ignorer, mais de remplacer le mouvement par un autre signal, comme un changement d'opacité instantané ou un changement de bordure, qui informe tout aussi bien sans provoquer de mouvement à l'écran.Comment tester ce comportement
Chrome, Firefox et Safari permettent tous de simuler cette préférence directement dans les outils de développement, sans avoir à modifier les réglages système, ce qui rend les tests rapides pendant le développement. En JavaScript, la même information est accessible via window.matchMedia('(prefers-reduced-motion: reduce)').matches, utile lorsqu'une bibliothèque tierce gère elle même ses animations en dehors du CSS, par exemple un défilement piloté par script.
| Valeur | Signification | Action recommandée |
|---|---|---|
no-preference | Aucun réglage particulier détecté | Animations normales |
reduce | L'utilisateur a demandé une réduction des animations | Supprimer le décoratif, raccourcir l'utile |
Foire aux questions
Non, l'objectif n'est pas de désactiver systématiquement tout mouvement, mais de retirer ce qui est purement décoratif tout en conservant, sous une forme plus courte ou plus discrète, les animations qui aident réellement à comprendre un changement d'état, comme l'apparition d'un message d'erreur.
prefers-color-scheme ?Les deux appartiennent à la même famille de media queries qui lisent des préférences système liées au confort et à l'accessibilité, au même titre que prefers-color-scheme, mais elles sont totalement indépendantes l'une de l'autre et peuvent être combinées librement dans une même feuille de style.
La règle est simplement ignorée, comme n'importe quelle media query non reconnue, et les animations s'affichent normalement sans réduction. Il n'y a donc aucun risque à l'utiliser, même pour un site qui doit encore prendre en charge d'anciens navigateurs.