Mouvement réduit

Le mouvement réduit est une préférence utilisateur, exposée par tous les systèmes d’exploitation modernes, indiquant que l’utilisateur ne souhaite pas de contenu animé, à effet de parallaxe ou chargé en mouvements. Les auteurs le détectent via la requête média CSS @media (prefers-reduced-motion: reduce).

Qui a besoin du mouvement réduit

Plusieurs groupes de personnes handicapées sont affectés par les animations sur le web :

• Troubles vestibulaires — le vertige, la maladie de Ménière et les affections apparentées peuvent être déclenchés ou aggravés par le défilement parallaxe, les transitions de page étendues, les vidéos en autoplay plein écran et certaines animations de panoramique. Les épisodes graves peuvent être invalidants.
• Personnes souffrant de migraines — de nombreux schémas migraineux sont déclenchés par une aura ; le mouvement est l’un des facteurs documentés.
• Épilepsie photosensible — un contenu clignotant au-delà du seuil WCAG (plus de trois flashs par seconde) peut provoquer des crises. La préférence pour le mouvement réduit signale que l’utilisateur souhaite toutes les animations allégées, même celles en deçà du seuil.
• Troubles de la concentration — le TDAH et les affections apparentées font des animations ambiantes (marquees défilants, carrousels perpetuels) une charge cognitive significative.

Il s’agit d’une large population d’utilisateurs. Différentes études placent la prévalence combinée des troubles vestibulaires, des migraines et du TDAH au-dessus de 20 % des adultes à un moment de leur vie.

Ce que fait le système d’exploitation

Tous les grands systèmes d’exploitation exposent une préférence de mouvement réduit dans leurs paramètres d’accessibilité :

• macOS / iOS — Réglages système → Accessibilité → Affichage → Réduire les animations.
• Windows 10/11 — Paramètres → Accessibilité → Effets visuels → Bascule des effets d’animation.
• Android — Paramètres → Accessibilité → Supprimer les animations.

Le navigateur lit cette préférence du système d’exploitation et l’expose au CSS :

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Critères WCAG

Deux critères WCAG couvrent spécifiquement le mouvement :

• 2.3.3 Animation suite aux interactions (AAA, WCAG 2.1+) — le mouvement déclenché par une interaction utilisateur peut être désactivé, sauf si ce mouvement est essentiel à la fonctionnalité. L’exception « essentiel » est étroite : un minuteur de CAPTCHA est essentiel ; une animation de retournement de carte déclenchée par le défilement ne l’est pas.
• 2.2.2 Mettre en pause, arrêter, masquer (A) — tout contenu en mouvement, clignotant ou mis à jour automatiquement pendant plus de 5 secondes doit pouvoir être mis en pause, arrêté ou masqué. Cela s’applique quelle que soit la préférence de l’utilisateur.

Que faire en pratique

Une base raisonnable :

1. Détecter la préférence. Utiliser la requête média CSS dans chaque feuille de style qui ajoute des animations.
2. Réduire, pas éliminer. « Réduit » ne signifie pas « zéro » ; un fondu de 100 ms est généralement acceptable là où un glissement de 600 ms ne l’est pas.
3. Identifier les contrevenants. Le parallaxe du héros, les effets de suivi de souris, les animations de transition de page, les défilements infinis, les vidéos en autoplay — ce sont les éléments les plus lourds qui nécessitent un repli en mouvement réduit.
4. Adopter par défaut une conception légère en animations. De nombreux systèmes de conception commencent à inverser la valeur par défaut : les animations ne sont incluses que lorsqu’elles sont explicitement activées au niveau du composant.