prefers-reduced-motion : rendre vos animations accessibles

Les animations web peuvent enrichir l'expérience utilisateur, mais elles représentent aussi un obstacle majeur pour certaines personnes. Environ 35 % de la population adulte souffre de troubles vestibulaires à un moment de sa vie. Pour ces utilisateurs, les animations mal conçues peuvent provoquer nausées, vertiges et migraines.

Comprendre les enjeux des animations

Les troubles vestibulaires

L'oreille interne joue un rôle crucial dans notre perception du mouvement. Lorsqu'une animation simule un déplacement (parallaxe, zoom, rotation), le cerveau peut recevoir des signaux contradictoires entre ce que voient les yeux et ce que ressent le système vestibulaire.

Les effets les plus problématiques incluent :

• Le parallaxe scrolling (arrière-plans qui bougent à des vitesses différentes)
• Les animations de transition prolongées
• Les effets de zoom et de rotation
• Les clignotements rapides

Ce que dit le RGAA

Le RGAA s'appuie sur les WCAG pour encadrer les animations. Plusieurs critères sont concernés :

• Critère 13.8 : Chaque page web doit permettre de contrôler les animations déclenchées automatiquement
• Critère 13.9 : Le contenu en mouvement doit pouvoir être arrêté

La solution : prefers-reduced-motion

La media query CSS prefers-reduced-motion permet de détecter si l'utilisateur a activé l'option « réduire les animations » dans son système d'exploitation.

Implémentation basique

/* Animations par défaut */
.element {
  transition: transform 0.3s ease;
}

/* Désactivation pour les utilisateurs sensibles */
@media (prefers-reduced-motion: reduce) {
  .element {
    transition: none;
  }
}

Approche progressive

Une meilleure pratique consiste à partir d'une base sans animation :

/* Pas d'animation par défaut */
.element {
  transition: none;
}

/* Animations uniquement si acceptées */
@media (prefers-reduced-motion: no-preference) {
  .element {
    transition: transform 0.3s ease;
  }
}

Cette approche garantit que les utilisateurs n'ayant pas configuré leur système ne subissent pas d'animations non désirées.

Bonnes pratiques pour les animations accessibles

Règles à respecter

1. Durée limitée : Évitez les animations de plus de 5 secondes sans contrôle utilisateur
2. Pas de flash : Jamais plus de 3 flashs par seconde (critère WCAG 2.3.1)
3. Contrôle utilisateur : Proposez toujours un bouton pause/stop pour les contenus animés
4. Finalité claire : L'animation doit servir l'expérience, pas la distraire

Alternatives à proposer

Lorsque vous désactivez une animation, pensez aux alternatives :

@media (prefers-reduced-motion: reduce) {
  .carousel {
    /* Remplacer le défilement par une transition instantanée */
    scroll-behavior: auto;
  }

  .fade-in {
    /* Remplacer le fondu par une apparition directe */
    opacity: 1;
    animation: none;
  }
}

Tester vos animations

Dans Chrome DevTools

1. Ouvrez les DevTools (F12)
2. Menu > More tools > Rendering
3. Activez "Emulate CSS media feature prefers-reduced-motion"

Sur les systèmes d'exploitation

• Windows 10/11 : Paramètres > Options d'ergonomie > Affichage > Désactiver les animations
• macOS : Préférences système > Accessibilité > Affichage > Réduire les animations
• iOS : Réglages > Accessibilité > Mouvement > Réduire les animations
• Android : Paramètres > Accessibilité > Supprimer les animations

Au-delà du CSS : JavaScript

Pour les animations JavaScript, vérifiez la préférence utilisateur :

const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

if (!prefersReducedMotion) {
  // Lancer l'animation
  startAnimation();
}

Conclusion

Créer des animations accessibles n'est pas une contrainte, c'est une opportunité d'améliorer l'expérience pour tous. En utilisant prefers-reduced-motion et en respectant les critères WCAG, vous garantissez que votre site reste agréable sans exclure personne.

Pour aller plus loin, consultez notre guide sur les alternatives textuelles et notre article sur le design system accessible.