Chapitre 13.5 — Mouvement & animation

⏱️ TL;DR — Une animation peut être plus qu’une gêne : un parallax ou une grande transition peut déclencher des nausées (troubles vestibulaires), et un clignotement rapide peut provoquer une crise d’épilepsie. Trois règles : respecter prefers-reduced-motion (la préférence système « moins d’animations »), ne jamais dépasser 3 flashs par seconde, et rendre tout contenu en mouvement automatique contrôlable (pause / arrêt / masquage). Le mouvement est un effet à utiliser avec sobriété et toujours désactivable.

🎯 Objectifs

• Respecter prefers-reduced-motion dans ton CSS.
• Connaître le seuil des flashs (risque d’épilepsie).
• Rendre le contenu animé automatique contrôlable.
• Comprendre l’impact des troubles vestibulaires.

prefers-reduced-motion : la préférence à respecter

Les systèmes d’exploitation offrent un réglage « réduire les animations ». Le navigateur l’expose via la media query prefers-reduced-motion. Le respecter est simple et devrait être systématique : on réduit ou supprime les animations non essentielles quand l’utilisateur l’a demandé.

/* ✅ Approche « safe » : on n'anime que si l'utilisateur ne l'a pas refusé */
@media (prefers-reduced-motion: no-preference) {
  .carte {
    transition: transform 0.3s ease;
  }
  .carte:hover {
    transform: translateY(-4px);
  }
}
 
/* ✅ Filet de sécurité : couper net les animations pour qui les refuse */
@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;
  }
}

Cela ne veut pas dire « zéro animation » : une micro-transition d’opacité reste en général acceptable. Ce qu’on coupe, ce sont les mouvements amples : parallax, glissements de grande amplitude, zooms, rotations, défilements animés.

♿ Côté utilisateur — Pour une personne sujette aux troubles vestibulaires, un effet parallax ou une grande transition de page peut provoquer un vertige ou une nausée réels, pas une simple gêne esthétique. Activer « réduire les animations » est sa façon de dire « épargne-moi ça ». Ignorer cette préférence, c’est lui rendre le site physiquement pénible.

Le seuil des flashs : une question de sécurité

Un contenu qui clignote ou flashe plus de trois fois par seconde peut déclencher une crise d’épilepsie photosensible. C’est un critère de niveau A, et l’un des rares où l’accessibilité touche à la sécurité physique. La règle : pas plus de 3 flashs par seconde, et éviter les grandes surfaces de rouge saturé clignotant. Dans le doute, on ne fait pas clignoter.

⚠️ Piège — Une animation « fun » (bannière clignotante, effet stroboscopique, GIF qui pulse) peut littéralement déclencher une crise chez une personne épileptique. Ce n’est pas un débat de goût : au-delà de 3 flashs/seconde, c’est un danger. Supprime, ou ralentis nettement.

Rendre le mouvement automatique contrôlable

Tout contenu qui bouge, défile ou clignote automatiquement et dure plus de quelques secondes doit pouvoir être mis en pause, arrêté ou masqué par l’utilisateur : carrousels auto, marquees, compteurs animés, arrière-plans vidéo. L’utilisateur doit garder le contrôle — l’animation ne doit pas s’imposer indéfiniment. C’est le même principe que pour les médias.

Le mieux étant de ne pas déclencher d’animation automatique du tout, ou de la conditionner à prefers-reduced-motion: no-preference.

💡 Réflexe — Pose l’animation comme une amélioration optionnelle, jamais comme un prérequis. Le site doit être parfaitement utilisable sans aucune animation. Ensuite, tu ajoutes du mouvement pour ceux qui l’acceptent (no-preference), et tu offres pause/arrêt sur tout ce qui bouge tout seul. Dans cet ordre, tu ne peux pas te tromper.

🧭 Sur A11yLearn — A11yLearn affiche une barre de progression animée et une transition de page « glissée ». On les conditionne à prefers-reduced-motion: no-preference : qui a activé « réduire les animations » voit la progression se mettre à jour sans animation et les pages apparaître sans glissement. Aucun contenu ne clignote, et le bandeau promotionnel auto-défilant reçoit un bouton pause.

✏️ Exercices

Exercice 1 — Rends cette animation respectueuse. Ce CSS anime une carte au survol sans tenir compte des préférences. Corrige-le.

.carte { transition: transform .4s; }
.carte:hover { transform: scale(1.05) rotate(2deg); }

Exercice 2 — Le bandeau qui clignote. Le marketing veut un bandeau « PROMO » qui clignote vite pour attirer l’œil. Que réponds-tu ?

🧠 Quiz de révision

Partie suivante : Tester l’accessibilité — la stratégie de test qui va au-delà des outils automatiques.