Animation déclenchée par les interactions

Ce que le critère exige

Les animations de mouvement déclenchées par une interaction utilisateur — défilement parallaxe, transitions de page, zooms au survol, effets d’apparition liés au défilement — doivent être désactivées lorsque l’utilisateur demande un mouvement réduit, sauf si l’animation est indispensable à la fonction ou à l’information transmise.

Le mécanisme standard est la requête média CSS prefers-reduced-motion: reduce, qui expose le paramètre système de réduction du mouvement que macOS, Windows, iOS et Android proposent tous.

Comment s’y conformer

• Encapsuler tout mouvement significatif (transformations, grandes translations, parallaxe, transitions de page, animations liées au défilement) dans @media (prefers-reduced-motion: no-preference).
• Pour les animations pilotées par JavaScript (GSAP, Framer Motion, Lottie), vérifier window.matchMedia('(prefers-reduced-motion: reduce)').matches et soit ignorer l’animation, soit la remplacer par un changement d’état instantané.
• Permettre aux animations de retour fonctionnel critiques (indicateurs de chargement, aperçus de glisser-déposer) de continuer avec une amplitude plus faible lorsque le mouvement réduit est activé — elles transmettent une fonction, pas un ornement.
• Tester avec macOS Réglages Système → Accessibilité → Affichage → Réduire les animations activé, et les équivalents sur Windows, iOS et Android.

Échecs courants

• Pages marketing avec défilement parallaxe qui ignorent la préférence système de réduction du mouvement.
• Bibliothèques de transitions de page (Barba.js, transitions de vue Astro dans les configurations plus anciennes) qui animent de grandes translations quelle que soit la préférence de l’utilisateur.
• Effets de survol sur les cartes avec de longues transitions translateY qui provoquent un inconfort chez les utilisateurs souffrant de troubles vestibulaires.
• Animations déclenchées par le défilement sur des pages longues qui activent des dizaines d’effets de mouvement lors du défilement — particulièrement déstabilisant à grande échelle.
• Animations Lottie dans les flux d’intégration qui jouent un mouvement plein écran sans vérifier la préférence.

axe et Lighthouse ne signalent pas de manière fiable les échecs liés à prefers-reduced-motion, mais l’audit d’accessibilité de Lighthouse inclut une vérification prefers-reduced-motion dans les versions récentes, et de nombreux linters de systèmes de conception l’appliquent désormais.

Pourquoi c’est important

Les troubles vestibulaires — maladie de Ménière, migraine vestibulaire, syndrome post-commotionnel, vertige positionnel persistant — peuvent être aggravés par des mouvements larges ou inattendus à l’écran. Le résultat est une nausée ou un vertige réels et physiques, pas seulement un inconfort. Respecter prefers-reduced-motion est l’une des améliorations d’accessibilité au coût le plus faible et à l’impact le plus élevé disponibles, et le paramètre au niveau du système d’exploitation signifie que l’utilisateur vous a déjà indiqué ce dont il a besoin.