Prefers-reduced-motion

prefers-reduced-motion est une médiarequête CSS qui détecte si l’utilisateur a activé, dans les paramètres de son appareil, une préférence système visant à réduire ou supprimer les animations et effets de mouvement pour des raisons d’accessibilité ou de confort.

Elle permet aux développeurs d’adapter ou de désactiver les animations non essentielles, en respectant le choix de l’utilisateur.

Bonnes pratiques

Bonnes pratiques

• Ne jamais utiliser d’animations pures décoratives sans tenir compte de cette préférence.
• Garder les transitions fonctionnelles (ex. : changement d’état d’un bouton) mais les rendre instantanées ou très courtes si reduce est activé.
• Tester avec les paramètres système :
  • macOS : Préférences Système > Accessibilité > Affichage > Réduire le mouvement
  • Windows : Paramètres > Accessibilité > Effets visuels > Afficher les animations
  • Android / iOS : Accessibilité > Réduire les animations

Cas d’usage

Un bouton qui « rebondit » légèrement au survol.

.button {
  padding: 12px 24px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  transition: transform 0.2s ease;
}

.button:hover {
  transform: scale(1.05);
}

Pour certains utilisateurs, ce mouvement peut causer malaise ou distraction.

Avec respect de prefers-reduced-motion

.button {
  padding: 12px 24px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  transition: transform 0.2s ease;
}

.button:hover {
  transform: scale(1.05);
}

/* Désactive le mouvement si l’utilisateur préfère moins d’animation */
@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }

  .button:hover {
    transform: none;
  }
}