Reduced motion
R
Definition complete
Le Reduced Motion (mouvement réduit) est une préférence système permettant aux utilisateurs de signaler leur sensibilité aux animations et transitions. Accessible via la media query CSS prefers-reduced-motion, elle permet aux développeurs d'adapter ou désactiver les animations pour ces utilisateurs.
Cette préférence répond à des besoins d'accessibilité réels : les personnes souffrant de troubles vestibulaires, d'épilepsie photosensible, de migraines ou de troubles de l'attention peuvent être négativement impactées par les animations excessives. Le respect de cette préférence est un critère WCAG 2.1 niveau AAA (2.3.3).
L'implémentation consiste à réduire ou supprimer les animations via CSS : @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }. Une approche plus nuancée conserve des transitions courtes et essentielles tout en supprimant les animations décoratives.
En 2026, tous les navigateurs modernes et systèmes d'exploitation supportent cette préférence. Les frameworks d'animation (Framer Motion, GSAP) intègrent des hooks dédiés. Respecter reduced-motion démontre une maturité en accessibilité et bénéficie indirectement aux utilisateurs sur appareils peu puissants où les animations peuvent saccader.
Exemples pratiques
- Site corporate : Parallax et animations au scroll désactivées quand prefers-reduced-motion est actif, conservant uniquement les transitions de navigation essentielles.
- Application React : Hook useReducedMotion conditionnant les variants Framer Motion pour proposer des animations alternatives non-dérangeantes.
- E-commerce : Carrousel produit passant en navigation manuelle sans défilement automatique, respectant le choix utilisateur.
A quoi sert Reduced motion ?
Le respect de reduced-motion sert à garantir l'accessibilité pour les personnes sensibles aux animations, se conformer aux standards WCAG et obligations légales d'accessibilité, améliorer l'expérience sur appareils à ressources limitées, et démontrer une conception inclusive et professionnelle. C'est un critère de qualité différenciant.
Reduced motion en pratique chez 123web
Chez 123web, nous intégrons le respect de prefers-reduced-motion dans tous nos développements front-end. Nous auditons les animations existantes, implémentons les alternatives appropriées, et testons avec cette préférence activée. Cette attention à l'accessibilité fait partie de notre engagement pour des sites web utilisables par tous.