Un visiteur qui active « Réduire les animations » dans les préférences de son système d’exploitation ne le fait pas par caprice. Souvent, il s’agit d’une personne sujette aux troubles vestibulaires, pour qui un fondu enchaîné trop rapide ou un effet de zoom au défilement peut littéralement provoquer un malaise. Ce réglage se traduit techniquement par la media query CSS prefers-reduced-motion, disponible dans tous les navigateurs modernes depuis plusieurs années.
Le système d’interactions d’Elementor, qui permet d’ajouter des animations d’entrée, de survol et de défilement sans écrire une ligne de code, ne consulte pas ce réglage par défaut. Une animation configurée dans l’éditeur s’exécute pour tout le monde, y compris pour les visiteurs qui ont explicitement demandé le contraire à leur système d’exploitation.
Vérifier l’ampleur du problème sur un site existant
Avant de corriger quoi que ce soit, il vaut la peine de mesurer l’exposition réelle. Sur un site utilisant abondamment les animations d’entrée Elementor (apparition en fondu, translation, zoom), activez le réglage système correspondant sur votre poste, puis parcourez les pages principales. Les animations les plus problématiques sont généralement les translations amples associées à un défilement parallax, bien plus que les simples fondus discrets.
La correction en une media query
Elementor génère ses animations via des classes CSS et des attributs de données consommés par son propre script d’interaction. Plutôt que de désactiver l’animation widget par widget dans l’éditeur, une media query globale ajoutée dans le CSS personnalisé du site neutralise le mouvement pour les visiteurs concernés, sans toucher à la configuration de chaque élément.
@media (prefers-reduced-motion: reduce) {
.elementor-element,
.e-con,
[data-settings*="animation"] {
animation: none !important;
transition: none !important;
transform: none !important;
}
}Cette approche a un avantage net sur la désactivation manuelle : elle s’applique immédiatement à toutes les pages existantes et futures du site, sans repasser widget par widget dans l’éditeur, et elle reste valable même si de nouvelles animations sont ajoutées après coup par un autre membre de l’équipe qui ignorerait cette contrainte d’accessibilité.
Ce qu’il ne faut pas neutraliser aveuglément
Toutes les animations ne se valent pas du point de vue de l’accessibilité. Un changement d’état purement fonctionnel, comme l’ouverture visuelle d’un accordéon ou d’un onglet, apporte une information utile sur ce qui vient de se passer à l’écran ; le supprimer entièrement peut dérouter un visiteur qui ne comprend plus si son clic a été pris en compte. La bonne pratique consiste à réduire la durée et l’amplitude de ce type de transition plutôt qu’à la supprimer complètement.
- Animations décoratives (parallax, zoom au scroll, translation d’entrée) : à supprimer entièrement en mode réduit.
- Transitions d’état fonctionnel (accordéon, onglet, menu) : à raccourcir, pas à supprimer.
- Focus visuel au clavier : à conserver impérativement, ce n’est pas une animation de confort mais une aide à la navigation.
@media (prefers-reduced-motion: reduce) {
.elementor-tab-content,
.elementor-accordion-item .elementor-tab-content {
transition-duration: 0.05s !important;
}
}Un test à ajouter à la routine de recette
Sur les projets suivants, nous avons ajouté ce contrôle à la checklist de recette standard : activer prefers-reduced-motion côté navigateur ou système, puis vérifier visuellement l’absence de mouvement ample sur au moins trois gabarits de page représentatifs. Ce test prend moins de cinq minutes et évite de découvrir le problème via une plainte d’accessibilité après mise en ligne.
Une animation Elementor bien réglée est un choix esthétique. Une animation qui ignore
prefers-reduced-motionest un choix qui a été fait à la place du visiteur, sans lui demander son avis.
Notre verdict
La correction technique tient en quelques lignes de CSS personnalisé, ce qui rend l’absence de ce réglage d’autant moins justifiable sur un site professionnel. Le vrai travail consiste à distinguer les animations purement décoratives, à neutraliser sans hésiter, des transitions porteuses de sens fonctionnel, à raccourcir plutôt qu’à effacer. Une fois cette distinction faite, l’intégration du correctif prend moins de temps que sa lecture.
