CSS Academy · Leçon

Animations accessibles avec prefers-reduced-motion

Respectez les besoins d’accessibilité en désactivant ou en réduisant les animations pour les utilisateurs sensibles aux mouvements.

Leçon 4 sur 413 étapes

Animations accessibles avec prefers-reduced-motion est une leçon CSS 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 CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.

Pourquoi réduire les mouvements ?

Certaines personnes souffrent de troubles vestibulaires, d’épilepsie ou d’autres problèmes de santé qui rendent les animations nocives. CSS fournit la requête média prefers-reduced-motion pour détecter et respecter leur préférence système.

La requête de préférence de mouvement réduit

Valeurs de la requête :

no-preference — l’utilisateur n’a exprimé aucune préférence
reduce — l’utilisateur a activé la réduction des mouvements dans les réglages de l’OS

<div class="box"></div>

L’option radicale (déconseillée)

Une implémentation courante mais rudimentaire qui supprime toutes les animations. Elle supprime également des repères de mouvement utiles et non désorientants :

<div class="box"></div>

Mieux : mouvement activé explicitement

Une approche plus sûre consiste à définir les animations uniquement pour les utilisateurs qui n’ont pas exprimé de préférence concernant les mouvements, en laissant l’état par défaut sans mouvement :

<button class="btn">Button</button>
<div class="card">Card</div>

Remplacer les types d’animation

Remplacez les mouvements désorientants (translation, mise à l’échelle, rotation) par des alternatives accessibles (opacité, couleur) pour les utilisateurs qui préfèrent réduire les mouvements :

<div class="card demo-hover">Hover me</div>

Animations infinies

Les animations infinies (indicateurs de chargement, pulsations) sont particulièrement problématiques. Fournissez une solution de repli statique :

<div class="spinner"></div>

Effets de parallaxe

Le défilement avec effet de parallaxe peut provoquer un mal des transports important. Désactivez-le toujours pour les utilisateurs qui préfèrent réduire les mouvements :

<div class="parallax">Parallax section</div>

Accès depuis JavaScript

Vérifiez la préférence en JavaScript lorsque vous utilisez l’API des animations web ou des bibliothèques de défilement :

<div class="spinner" id="rm-spinner"></div>
<p id="rm-status">Checking preference…</p>
<script>
  const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
  const el = document.getElementById('rm-spinner');
  const status = document.getElementById('rm-status');
  if (!reducedMotion.matches) {
    el.classList.add('spin');
    status.textContent = 'Motion allowed — spinning';
  } else {
    status.textContent = 'Reduced motion — animation skipped';
  }
</script>

WCAG et mouvements

Le critère 2.3.3 des WCAG (AAA) exige que les animations déclenchées par une interaction puissent être désactivées. Utiliser prefers-reduced-motion est l’approche CSS recommandée pour respecter ce critère.

Vérifier la réduction des mouvements

Dans l’onglet Rendu de Chrome DevTools, activez « Émuler la préférence CSS de mouvement réduit : réduire » pour effectuer une vérification sans modifier les réglages de l’OS. Sous macOS : Préférences Système → Accessibilité → Réduire les mouvements.

Documenter l’intention

Commentez les animations pour expliquer si elles sont fonctionnelles ou simplement décoratives. Les animations fonctionnelles (qui indiquent un processus ou une progression) doivent avoir des alternatives accessibles ; les animations décoratives peuvent simplement être supprimées.

Vérification rapide

Quelle approche gère le mieux la préférence de mouvement réduit pour un effet de soulèvement d’une carte au survol ?

Réponds-y dans la leçon interactive

Récapitulatif

Utilisez prefers-reduced-motion: reduce pour détecter la sensibilité aux mouvements. Au lieu de supprimer toutes les animations, fournissez un état par défaut sans mouvement et activez les mouvements uniquement dans les requêtes no-preference. Remplacez les animations de transformation désorientantes par des transitions d’opacité ou de couleur pour les utilisateurs qui préfèrent réduire les mouvements. Vérifiez le résultat avec l’émulation de DevTools.

Gratuit pour commencer

Apprends CSS 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: 40
Leçons: 159

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Animations accessibles avec prefers-reduced-motion » est-elle gratuite ?

Oui — le texte complet de « Animations accessibles avec 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 CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Animations accessibles avec prefers-reduced-motion » ?

Respectez les besoins d’accessibilité en désactivant ou en réduisant les animations pour les utilisateurs sensibles aux mouvements. Tu pratiques CSS 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 CSS Academy ?

Aucune expérience préalable n'est requise. CSS 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 « Animations accessibles avec 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 CSS Academy ?

Oui. Chaque leçon CSS 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

Syntaxe de @keyframes et propriété d’animation
Direction, mode de remplissage et répétition des animations
Chaînage et séquençage des animations
Animations accessibles avec prefers-reduced-motion

← Retour à CSS Academy