Certains lecteurs souffrent de migraines ou de problèmes d’équilibre à cause du mouvement des pages. Le système d'exploitation le sait déjà ; il expose la préférence aux pages Web en tant que requête multimédia à mouvement réduit. Votre travail consiste à y acheminer chaque animation volontaire.

@media (prefers-reduced-motion: no-preference) {
  .reading-bar { animation: reading linear;
    animation-timeline: scroll(root block); }
  .card { transition: transform 0.3s ease; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Ce que réduire devrait signifier pour vous

  • Le mouvement décoratif s’arrête complètement : parallaxe, badges flottants, chorégraphie d’entrée.
  • Des changements d’état significatifs continuent de se produire, instantanément : les panneaux s’ouvrent ; pas de toboggan. L'information arrive sans le trajet.
  • Les animations attachées pilotées par défilement sont couvertes par la même porte ; les lier à aucune préférence signifie que les lecteurs qui ne prennent pas en charge ou qui se désengagent obtiennent la mise en page immobile sans interruption visuelle.

L’audit qui reste honnête

  1. Définissez la préférence du système d'exploitation sur (macOS : réduire la bascule de mouvement, puis recharger) et cliquez sur chaque élément interactif du site.
  2. Saisissez votre CSS pour l'animation et la transition, et vérifiez que chacun se trouve à l'intérieur de la porte sans préférence ou se dégrade en instantané.
  3. Faites de même pour JS : les transitions de vue, les révélations d'IntersectionObserver et les appels à défilement fluide nécessitent tous le même respect.
  4. Conservez la version !important comme filet de sécurité au niveau du plan du site, pas comme votre premier outil ; une animation routé est une meilleure conception qu'une dérogation d'urgence.

Le cadre très gacor : le mouvement devient une fonctionnalité demandée, pas une sortie forcée. Peu d’esthétiques sur le Web vieillissent plus vite que l’animation pour elle-même, et une requête médiatique fait que ce choix respecte les deux esthétiques.