prefers-reduced-motion dans CSS et JS
Détectez et respectez le réglage de mouvement choisi par l'utilisateur.
prefers-reduced-motion dans CSS et JS est une leçon Web Accessibility Academy gratuite sur CoddyKit. Ceci est la leçon 1 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 Web Accessibility Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Web Accessibility Academy comprend 4 leçons au total.
Un réglage que vous pouvez lire
Les systèmes d’exploitation permettent de demander moins de mouvement. La fonctionnalité multimédia prefers-reduced-motion transmet directement ce choix à votre site. 🎚️
Où les utilisateurs l’activent
Les utilisateurs activent la réduction des mouvements dans les réglages du système sur macOS, iOS, Windows et Android. Votre rôle est d’écouter ce choix, pas de le remettre en question.
Deux valeurs
La fonctionnalité renvoie l’un de deux états. Il s’agit soit de reduce, qui signifie réduire les animations, soit de no-preference pour tous les autres utilisateurs.
L’interroger en CSS
Placez les styles apaisés dans une requête multimédia. Lorsqu’un utilisateur demande de réduire les mouvements, vous pouvez réduire les transitions à presque rien.
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; }
}Réduire, sans toujours supprimer
Apaiser les mouvements ne signifie pas figer la page. Remplacez un grand glissement par un doux fondu afin que l’interface reste vivante sans jamais donner de secousse.
Concevoir d’abord avec les mouvements activés
Créez vos styles animés habituels, puis ajoutez la requête pour les atténuer. Cette approche progressive préserve une expérience par défaut riche.
Le lire en JavaScript
Pour les animations contrôlées par un script, interrogez directement le navigateur. matchMedia indique si l’utilisateur préfère actuellement réduire les mouvements.
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
if (mq.matches) { /* skip the big animation */ }Réagir aux changements en temps réel
Les utilisateurs peuvent modifier ce réglage pendant la session. Écoutez les changements afin que vos animations JavaScript respectent la nouvelle préférence sans rechargement.
mq.addEventListener('change', e => updateMotion(e.matches));Gérer le comportement du défilement
Le défilement fluide est lui aussi un mouvement. Dans la requête, définissez scroll-behavior sur auto afin que les déplacements soient instantanés pour les personnes qui le demandent.
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}Un véritable besoin
Ce réglage n’est pas un simple confort facultatif. Chez certains utilisateurs, les mouvements importants provoquent de véritables nausées ou des étourdissements ; il est donc important de respecter leur demande.
Désactivé par défaut, c’est plus sûr
En cas de doute, choisissez par défaut l’option la plus sûre. Privilégier des mouvements apaisés ne nuit à personne et rend la page confortable pour tous.
Vérification rapide
Comment un site Web apprend-il qu’un utilisateur souhaite moins de mouvements ?
Récapitulatif
Lisez prefers-reduced-motion en CSS ou avec matchMedia, puis apaisez les animations au lieu de supprimer toute vie de la page. Respectez également les changements effectués en temps réel. ✅
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 30
- Leçons
- 120
Questions Fréquemment Posées
La leçon « prefers-reduced-motion dans CSS et JS » est-elle gratuite ?
Oui — le texte complet de « prefers-reduced-motion dans CSS et JS » 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 Web Accessibility Academy, passe à CoddyKit PRO. Le cours Web Accessibility Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « prefers-reduced-motion dans CSS et JS » ?
Détectez et respectez le réglage de mouvement choisi par l'utilisateur. Tu pratiques Web Accessibility 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 Web Accessibility Academy ?
Aucune expérience préalable n'est requise. Web Accessibility 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 1 sur 4.
Combien de temps prend la leçon « prefers-reduced-motion dans CSS et JS » ?
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 Web Accessibility Academy ?
Oui. Chaque leçon Web Accessibility 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
- prefers-reduced-motion dans CSS et JS
- Troubles vestibulaires et risques liés à la parallaxe
- Le seuil de trois flashs pour les crises épileptiques
- Mettre en pause, arrêter et masquer les contenus en mouvement automatique