CSS : Adapter les animations aux préférences des utilisateurs avec prefers-reduced-motion

L’accessibilité est aujourd’hui un pilier essentiel de la conception web moderne. Elle ne se limite plus à proposer des contrastes de couleurs adaptés ou à rendre les interfaces compatibles avec les lecteurs d’écran. Une dimension souvent sous-estimée concerne l’impact des animations et des transitions visuelles sur les utilisateurs, notamment ceux souffrant de troubles neurologiques, vestibulaires ou sensoriels. Trop de mouvement peut provoquer de l’inconfort, voire des nausées ou des crises d’épilepsie photosensible chez certaines personnes.

1. Prendre en compte les préférences système avec prefers-reduced-motion

Les systèmes d’exploitation modernes (macOS, Windows, iOS et Android) permettent aux utilisateurs de spécifier qu’ils préfèrent limiter les effets d’animation. Le CSS offre une interface directe avec cette préférence via la media query prefers-reduced-motion. Cela permet aux développeurs d’adapter l’expérience visuelle en fonction de la configuration de l'utilisateur, sans avoir besoin de JavaScript ou de détection complexe.

• no-preference : aucune préférence exprimée pour la réduction du mouvement.
• reduce : l'utilisateur demande à limiter les animations pour des raisons d’accessibilité.

Grâce à cette media query, on peut concevoir des interfaces sensibles aux besoins de chacun.

2. Fluidifier la navigation quand aucune réduction n’est demandée

Lorsque l'utilisateur n’a pas explicitement demandé de réduction de mouvement, on suppose qu'il est à l’aise avec les animations. On active alors le défilement fluide sur la racine du document (scroll-behavior: smooth). Cela améliore la navigation entre les sections, notamment lorsqu’on utilise des ancres ou des liens internes. C’est un petit ajout qui enrichit l’expérience utilisateur en rendant les déplacements plus naturels et progressifs.

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

3. Prioriser l’accessibilité pour les utilisateurs sensibles au mouvement

À l’inverse, lorsque l’utilisateur a exprimé une préférence pour la réduction des animations, on peut alors agir en conséquence et désactiver celles sur lesquelles nous avons la main.

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
    }
}

• Sélecteurs *::before et *::after : Inclusion des pseudo-éléments, souvent oubliés mais largement utilisés pour des animations ou effets visuels.
• animation-duration: 0s : Désactive les animations en raccourcissant leur durée à zéro. Plus fin que animation: none, qui peut casser certaines animations dépendantes de leur nom ou du timing.
• animation-iteration-count: 1 : Limite les animations à une seule occurrence si elles devaient se répéter (par exemple les infinite animations comme les loaders).
• scroll-behavior: auto : Empêche les défilements doux (scroll-behavior: smooth) qui peuvent provoquer des nausées ou une désorientation.
• transition-duration: 0s : Réduit les transitions CSS à zéro sans casser la logique CSS (par exemple : effet de survol toujours fonctionnel mais instantané).

4. Pourquoi c’est essentiel dans vos projets web

Ce type de configuration ne relève pas simplement du perfectionnisme. Il est crucial pour rendre les sites et applications accessibles à tous les utilisateurs, y compris ceux qui peuvent être physiquement affectés par des animations. Une approche inclusive améliore non seulement l'expérience globale, mais elle démontre aussi une sensibilité professionnelle aux normes d’accessibilité croissantes, en phase avec des réglementations comme le RGAA (en France) ou les WCAG (au niveau international).

De plus, cette démarche est facile à implémenter. Elle ne requiert ni frameworks, ni bibliothèques externes, ni surcoût technique significatif. En quelques lignes de CSS, on peut drastiquement améliorer l’expérience utilisateur pour un segment d’audience trop souvent oublié.