Certaines personnes ressentent une gêne suite à des mouvements importants ou répétés. La fonctionnalité multimédia de préférence à mouvement réduit permet à une page de réduire l'animation non essentielle lorsque l'appareil du visiteur le demande.

@media (prefers-reduced-motion: reduce) {
  .card {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    transition-duration: 0.01ms;
  }
}

Réduisez le mouvement, pas l’information

  • Gardez les changements d’état visibles avec un style immédiat ou un message d’état concis.
  • Évitez les clignotements, la parallaxe et les mouvements importants lorsqu'un fondu plus simple ou un changement instantané fonctionne.
  • Ne supprimez pas les indicateurs de mise au point et ne rendez pas les commandes plus difficiles à utiliser en mode de mouvement réduit.

Testez les deux paramètres

Activez la réduction des mouvements dans les outils du système d'exploitation ou du navigateur et essayez chaque élément interactif. Confirmez que la page reste compréhensible lorsque l'animation est supprimée.

Une valeur par défaut respectueuse donne aux visiteurs le contrôle sans les obliger à trouver un paramètre spécial à l'intérieur du site.