Respecter prefers-reduced-motion
Détectez la requête média prefers-reduced-motion et désactivez ou réduisez les animations pour les utilisateurs qui ont demandé moins de mouvement.
Respecter prefers-reduced-motion est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
La fonction média prefers-reduced-motion
Certains utilisateurs ressentent des nausées, des vertiges ou des crises convulsives à cause des mouvements dans les interfaces. Ils configurent leur OS pour réduire les mouvements. La fonction média prefers-reduced-motion détecte cette préférence afin que CSS puisse s’y adapter.
Détecter la réduction des mouvements en CSS
Placez les animations dans la requête opposée : appliquez-les normalement, puis remplacez-les ou désactivez-les pour les utilisateurs qui préfèrent moins de mouvements.
/* Apply animation by default */
.spinner {
animation: spin 1s linear infinite;
}
/* Disable for users who want less motion */
@media (prefers-reduced-motion: reduce) {
.spinner {
animation: none;
}
}Le principe « réduire, pas supprimer »
prefers-reduced-motion: reduce ne signifie pas supprimer tout mouvement. Certains mouvements communiquent des changements importants de l’état de l’interface. Au lieu de supprimer complètement les animations, ralentissez-les ou simplifiez-les en fondus enchaînés.
@media (prefers-reduced-motion: reduce) {
.modal {
/* Replace scale + fade with just fade */
animation: fadeOnly 0.1s linear;
}
@keyframes fadeOnly {
from { opacity: 0; }
to { opacity: 1; }
}
}L’option radicale : désactiver toutes les animations
Une pratique courante consiste à désactiver globalement toutes les transitions et animations pour les utilisateurs qui réduisent les mouvements. C’est une base sûre, même si chaque animation n’est pas réglée individuellement.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}Détecter la réduction des mouvements en JavaScript
Utilisez l’API matchMedia pour détecter cette préférence en JavaScript — c’est utile pour contrôler les animations sur canvas, les mouvements pilotés par JavaScript ou la lecture automatique des vidéos.
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)');
if (prefersReduced.matches) {
// skip gsap or canvas animations
} else {
startAnimation();
}
// React to preference changes:
prefersReduced.addEventListener('change', (e) => {
if (e.matches) stopAnimations();
else startAnimations();
});Défilement et lecture automatique
Désactivez également le défilement fluide pour les utilisateurs qui réduisent les mouvements : scroll-behavior: auto. Arrêtez la lecture automatique des vidéos. Ne faites pas clignoter le contenu et n’utilisez pas d’effets stroboscopiques.
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
// In JS:
if (!prefersReduced.matches) {
element.scrollIntoView({ behavior: 'smooth' });
} else {
element.scrollIntoView(); // instant
}WCAG 2.3.3 — Animations déclenchées par des interactions
WCAG 2.3.3 (niveau AAA) exige que les mouvements déclenchés par une interaction de l’utilisateur puissent être désactivés. En respectant prefers-reduced-motion, vous satisfaites ce critère et améliorez l’accessibilité pour les utilisateurs souffrant de troubles vestibulaires.
Tester la réduction des mouvements
Dans Chrome DevTools : ouvrez le panneau de rendu (menu à trois points → Plus d’outils → Rendu), puis activez « Émuler la fonctionnalité média CSS prefers-reduced-motion ». Testez votre interface dans ce mode avant sa mise en production.
En pratique : modèle d’animation sûre
Une animation compatible avec la réduction des mouvements s’applique par défaut et est structurée de manière à pouvoir être facilement désactivée globalement.
@keyframes slideIn {
from { opacity: 0; transform: translateX(-16px); }
to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: no-preference) {
.alert {
animation: slideIn 0.3s ease;
}
}L’animation du focus doit rester active
Les indicateurs de focus (l’anneau qui montre quel élément est sélectionné) ne doivent PAS être supprimés, même pour les utilisateurs qui réduisent les mouvements. Ils sont essentiels à la navigation au clavier et ne déclenchent généralement pas de troubles vestibulaires.
Bibliothèques et prefers-reduced-motion
Les bibliothèques d’animation populaires (Framer Motion, GSAP, Anime.js) prennent en charge la réduction des mouvements. Le hook useReducedMotion() de Framer Motion permet de désactiver conditionnellement les animations complexes dans React.
Vérification rapide
Quelle fonction média CSS détecte la préférence d’un utilisateur pour voir moins de mouvements dans l’interface ?
Récapitulatif : prefers-reduced-motion
Certains utilisateurs ont besoin de moins de mouvements pour des raisons de santé vestibulaire ou neurologique. Utilisez @media (prefers-reduced-motion: reduce) pour désactiver ou simplifier les animations. Détectez cette préférence en JS avec matchMedia. L’option radicale consiste à définir globalement animation/transition-duration sur 0.01ms. WCAG 2.3.3 le recommande. Testez avec le panneau de rendu de DevTools.
Questions Fréquemment Posées
La leçon « Respecter prefers-reduced-motion » est-elle gratuite ?
Oui — le texte complet de « Respecter prefers-reduced-motion » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Respecter prefers-reduced-motion » ?
Détectez la requête média prefers-reduced-motion et désactivez ou réduisez les animations pour les utilisateurs qui ont demandé moins de mouvement. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Respecter prefers-reduced-motion » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Propriétés personnalisées CSS : déclaration et mise à jour
- Transitions : propriété, durée et rythme
- Animations @keyframes
- Respecter prefers-reduced-motion