Depuis quelques années, macOS, Windows et la plupart des systèmes mobiles proposent un réglage d’accessibilité intitulé « réduire les animations » ou « réduire le mouvement ». Il ne s’agit pas d’un caprice esthétique : pour une partie des utilisateurs, souffrant de troubles vestibulaires ou de sensibilité au mouvement, un carrousel qui glisse, un fond en parallaxe ou une apparition en fondu enchaîné peuvent provoquer de véritables nausées ou des maux de tête. La media query CSS prefers-reduced-motion permet à un site de détecter ce réglage et d’y répondre, sans jamais demander explicitement à l’utilisateur ce qu’il préfère.
Sur WordPress, ni le cœur ni la plupart des thèmes ne l’appliquent automatiquement à ce jour : c’est une responsabilité du thème et de ses animations personnalisées, qu’elles soient écrites en CSS pur ou pilotées en JavaScript.
La syntaxe de base
La media query se pose en CSS, comme n’importe quelle autre condition d’affichage :
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}Cette approche globale, qui neutralise toutes les animations et transitions du site d’un coup, convient bien à une première mise en conformité rapide. Elle a cependant un défaut : elle traite de la même façon une animation purement décorative et une transition qui porte une information utile, comme un changement de couleur au focus d’un champ de formulaire.
Une approche plus fine, animation par animation
Pour un thème plus abouti, il est préférable de cibler précisément les animations concernées plutôt que d’appliquer une règle universelle :
.hero-parallax {
transition: transform 0.6s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.hero-parallax {
transition: none;
}
}Cette granularité permet de conserver, par exemple, une transition de couleur discrète sur un bouton au survol, tout en supprimant l’effet de parallaxe du bandeau d’accueil, bien plus susceptible de gêner.
Le cas du JavaScript : matchMedia
Quand une animation est pilotée en JavaScript plutôt qu’en CSS pur — un défilement automatique de carrousel, une bibliothèque d’animation au scroll — la media query s’interroge directement en script grâce à window.matchMedia :
const preferenceReduite = window.matchMedia('(prefers-reduced-motion: reduce)');
function initialiserCarrousel() {
if (preferenceReduite.matches) {
afficherCarrouselStatique();
} else {
demarrerDefilementAutomatique();
}
}
preferenceReduite.addEventListener('change', initialiserCarrousel);
initialiserCarrousel();L’écouteur change permet de réagir si l’utilisateur modifie son réglage système pendant que la page est déjà ouverte, ce qui arrive plus souvent qu’on ne le pense sur les systèmes qui exposent ce réglage dans un menu rapide.
Ce que reduce ne veut pas dire
Un piège fréquent consiste à interpréter reduce comme « supprimer toute fonctionnalité animée ». Un carrousel qui utilisait l’animation pour signaler un changement de contenu doit conserver ce changement, simplement sans transition visuelle progressive — un saut net plutôt qu’un glissement, mais le contenu doit continuer à changer. Supprimer entièrement la fonctionnalité au lieu de l’animation serait une régression, pas une amélioration.
Où l’appliquer en priorité dans un thème
- Les carrousels et curseurs d’images en page d’accueil.
- Les animations d’apparition au défilement (« fade in on scroll »), très en vogue sur les thèmes premium de l’époque.
- Le défilement fluide (
scroll-behavior: smooth) déclenché par les liens d’ancre internes. - Les fonds en parallaxe, souvent la source la plus fréquemment citée de gêne par les utilisateurs concernés.
En résumé
prefers-reduced-motion ne coûte rien à mettre en place et ne demande aucun réglage côté administration WordPress : c’est une simple media query CSS, complétée si besoin par une vérification matchMedia en JavaScript pour les animations pilotées par script. Le vrai travail consiste à distinguer, dans chaque thème, l’animation décorative qu’on peut couper sans perte, de la transition qui porte une information à conserver sous une autre forme.
