Comment prendre en charge prefers-reduced-motion correctement
Guide complet pour supporter prefers-reduced-motion : confort vestibulaire, requêtes média CSS, hooks JavaScript et conception d'alternatives douces.
À retenir
Bien supporter prefers-reduced-motion ne consiste pas à supprimer tout retour visuel pour laisser l'interface inerte. Il s'agit d'éliminer les mouvements amples, rapides ou désorientants (parallaxe, rotations 3D, grands déplacements) et de les remplacer par des changements instantanés, des fondus légers ou des transitions de couleur rassurantes sans malaise vestibulaire.
Comprendre les troubles vestibulaires et la cinétose
Les personnes atteintes de troubles vestibulaires ressentent vertiges et nausées lorsque les mouvements à l'écran ne correspondent pas à leur équilibre physique. Les transitions envahissantes, vidéos automatiques et rebonds prononcés déclenchent des malaises en quelques secondes.
L'erreur de la suppression aveugle
Un réflexe fréquent mais nocif consiste à coller * { animation: none !important; transition: none !important; } dans le CSS. Cela brise les transitions d'état progressives, fait disparaître les info-bulles avant lecture et prive l'utilisateur de tout retour de chargement. Le mouvement doit être adapté, pas anéanti.
- Supprimez les grandes translations, zooms amples et effets de parallaxe
- Conservez des fondus d'opacité discrets (100 ms) pour éviter les à-coups visuels
- Remplacez les roues de chargement par des textes clairs ou des barres par paliers
- Proposez un commutateur dans les préférences de l'application
Mise en œuvre par CSS et tokens de design
Structurez vos tokens de mouvement pour que les durées de déplacement passent à 0 ms sous @media (prefers-reduced-motion: reduce), tandis que les fondus d'opacité conservent une valeur douce de 80 à 100 ms.
Gestion dans les moteurs JavaScript et physiques
Dans vos frameworks, écoutez window.matchMedia('(prefers-reduced-motion: reduce)'). Transmettez reducedMotion: true à vos moteurs d'animation pour que les ressorts rejoignent instantanément leur cible.
Principes clés à retenir
- Ne supprimez jamais le retour fonctionnel ; remplacez le mouvement par des fondus
- Bannissez les longs déplacements tout en conservant des transitions douces de couleur
- Organisez vos tokens de design pour centraliser les adaptations de mouvement réduit
- Validez vos interfaces avec les réglages système et les outils de simulation