# Prefers reduced motion : une animation utilisable par tous

[Canonical HTML page](https://gradiently.design/fr/guide/reduced-motion)

Pour certaines personnes, un défilement parallaxe ou un zoom sur l’en-tête n’a rien de ravissant : il donne le vertige. Un seul réglage vous dit qui elles sont. Voici comment le respecter sans sacrifier votre design.

## The short version

- prefers-reduced-motion est une media feature CSS qui indique si un visiteur a demandé à son appareil de limiter les mouvements non essentiels.
- Les gens activent la réduction des animations pour de nombreuses raisons, dont les troubles vestibulaires, où le mouvement à l’écran peut provoquer vertiges, nausées ou maux de tête.
- Réduire les animations ne veut pas dire supprimer tout mouvement : remplacez les grands mouvements comme glissements, zooms et parallaxe par de doux fondus, et arrêtez les boucles automatiques.
- Un schéma fiable consiste à écrire d’abord le design fixe, puis à n’ajouter le mouvement que dans une media query prefers-reduced-motion: no-preference.
- Tous les systèmes d’exploitation ont un réglage de réduction des animations : vous pouvez donc tester votre site en l’activant.

**Prefers reduced motion**, écrit `prefers-reduced-motion` en CSS, est une media feature qui indique à votre site qu’un visiteur a demandé à son appareil de limiter les mouvements non essentiels. Quand elle renvoie `reduce`, calmez la page : arrêtez les boucles automatiques, remplacez glissements, zooms et parallaxe par de doux fondus ou rien du tout, et affichez des versions fixes des arrière-plans animés. C’est peu de travail, et cela rend le site utilisable pour des personnes qui, sinon, le quitteraient en se sentant mal.

## Pour qui existe la réduction des animations

Certaines personnes ont des troubles vestibulaires, qui touchent l’oreille interne et le sens de l’équilibre et du mouvement du cerveau. Pour elles, un grand mouvement à l’écran, surtout la parallaxe, les zooms et les éléments qui glissent sur de grandes zones, peut déclencher vertiges, nausées, maux de tête ou désorientation. D’autres trouvent le mouvement constant distrayant, souffrent de migraines, ou préfèrent simplement un écran plus calme. Toutes utilisent le même interrupteur dans les réglages de leur appareil, et elles ne devraient pas avoir à s’expliquer.

| Appareil | Où se trouve le réglage |
| --- | --- |
| Mac | Réglages Système, Accessibilité, Affichage, Réduire les animations |
| iPhone et iPad | Réglages, Accessibilité, Animation, Réduire les animations |
| Windows 11 | Paramètres, Accessibilité, Effets visuels, Effets d’animation (désactivé) |
| Android | Paramètres, Accessibilité, Supprimer les animations (le chemin varie selon le fabricant et la version) |

Les navigateurs lisent ces réglages et les transmettent à votre site via prefers-reduced-motion.

## Quoi réduire, et ce qui peut rester

Réduire les animations, ce n’est pas supprimer tout mouvement. Le but est d’enlever les mouvements qui simulent un déplacement dans l’espace ou qui occupent de grandes parties de l’écran, et d’arrêter tout ce qui se lance tout seul. Les petits retours rapides et les fondus simples sont en général acceptables, et aident souvent à comprendre ce qui a changé.

### À réduire ou supprimer

- Défilement parallaxe et mouvements liés au défilement
- Grands glissements, zooms et transitions de type page qui se tourne
- Vidéos en lecture automatique et arrière-plans animés
- Éléments qui tournent, rebondissent ou tremblent
- Carrousels qui avancent tout seuls

### En général à conserver

- Fondus d’opacité et changements de couleur
- Petits retours rapides au survol et à l’appui
- Indicateurs de progression qui montrent que le travail avance
- Mouvement lancé et contrôlé par le visiteur, comme le glisser-déposer
- Images fixes à la place d’images animées

Remplacez plutôt que de supprimer quand vous le pouvez. Si un panneau arrive normalement par le côté, faites-le apparaître en fondu. Si l’en-tête joue une boucle, montrez une image fixe. Le design reste intact ; seul le déplacement disparaît.

## Respecter prefers-reduced-motion en CSS

L’approche la plus robuste consiste à traiter le mouvement comme une amélioration. Écrivez d’abord le design fixe, puis ajoutez le mouvement dans une media query qui ne s’applique que si le visiteur n’a exprimé aucune préférence. Si la requête n’est pas prise en charge ou que le réglage est activé, la page est simplement fixe. La page de MDN sur [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) documente cette fonctionnalité.

```css
/* Still by default */
.hero-bg {
  background: linear-gradient(135deg, #1e1b4b, #6d28d9 55%, #db2777);
  background-size: 100% 100%;
}
.card {
  opacity: 0;
  transition: opacity 200ms ease-out; /* a fade is fine for everyone */
}
.card.is-visible {
  opacity: 1;
}

/* Movement only for visitors with no preference */
@media (prefers-reduced-motion: no-preference) {
  .hero-bg {
    background-size: 200% 200%;
    animation: drift 20s linear infinite alternate;
  }
  .card {
    transform: translateY(24px);
    transition: opacity 200ms ease-out, transform 300ms cubic-bezier(0, 0, 0.2, 1);
  }
  .card.is-visible {
    transform: none;
  }
}

@keyframes drift {
  to { background-position: 100% 100%; }
}
```

Le mouvement comme amélioration. Avec la réduction des animations activée, les cartes apparaissent toujours en fondu, mais rien ne se déplace et l’arrière-plan reste immobile.

> **À propos de la réinitialisation globale** Un extrait très répandu met toutes les animations et transitions à une durée quasi nulle quand la réduction est activée. C’est un filet de sécurité utile pour du vieux code, mais il supprime aussi des fondus utiles et peut casser des scripts qui attendent la fin d’une animation. Préférez décider composant par composant.

## Réduction des animations en JavaScript, vidéo et canvas

Le mouvement piloté par des scripts, comme les effets de défilement, les arrière-plans canvas ou WebGL et la vidéo, demande une vérification en JavaScript. Lisez le réglage avec `matchMedia` et écoutez les changements, car les gens peuvent le modifier pendant que votre page est ouverte.

```js
const query = matchMedia('(prefers-reduced-motion: reduce)')
const video = document.querySelector('.hero-video')

function apply() {
  if (query.matches) {
    video?.pause()            // the poster image stays
    stopBackgroundLoop()      // your canvas or WebGL loop: draw one frame, then stop
  } else {
    video?.play().catch(() => {})
    startBackgroundLoop()
  }
}

query.addEventListener('change', apply)
apply()
```

Une seule vérification pour tout ce qui est scripté. Gardez l’affiche ou une seule image rendue, pour que la page paraisse toujours finie.

Les vidéos d’arrière-plan et les dégradés vivants sont les fautifs les plus courants, car ils se lancent tout seuls. [Vidéo en arrière-plan de site web](https://gradiently.design/fr/guide/video-background-website) et [dégradés shader](https://gradiently.design/fr/guide/shader-gradients) montrent chacun où placer la vérification.

## Ce que dit le WCAG sur le mouvement

Trois critères de succès des Web Content Accessibility Guidelines traitent du mouvement. Prendre en charge la réduction des animations est le moyen pratique de respecter le premier ; un contrôle de pause traite le deuxième.

| Critère | Niveau | En bref |
| --- | --- | --- |
| 2.3.3 Animation from Interactions | AAA | Le mouvement déclenché par une interaction peut être désactivé, sauf s’il est essentiel |
| 2.2.2 Pause, Stop, Hide | A | Un contenu en mouvement qui démarre seul et dure plus de cinq secondes peut être mis en pause ou masqué |
| 2.3.1 Three Flashes or Below Threshold | A | Rien ne clignote plus de trois fois par seconde |

Les explications du W3C sur [Animation from Interactions](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) détaillent le premier, avec des exemples.

## Concevoir des versions fixes qui restent belles

La version fixe ne doit pas sembler cassée. Pour les arrière-plans animés, choisissez l’image qui rend le mieux seule, pas celle qui se trouve être la première. Pour les entrées en scène, vérifiez que la mise en page finale est complète sans elles. Pour les boucles faites à partir d’une matière de marque, une image fixe bien choisie de cette même matière préserve l’identité. Les [principes du motion design](https://gradiently.design/fr/guide/motion-design-principles) suggèrent de tester chaque animation sur une seule image figée pour cette raison.

Gradiently suit la même règle : les Marks vivants de l’app restent immobiles quand votre appareil demande la réduction des animations, et tout design exporté en boucle peut aussi l’être en PNG fixe du même Mark, pour les endroits où le mouvement n’est pas bienvenu. Pour les posts sociaux, où l’on ne peut pas détecter le réglage, le plus prévenant est un mouvement lent et doux ; voir [arrière-plans en dégradé animé](https://gradiently.design/fr/guide/animated-gradient-background).

1. **Activez le réglage** Activez la réduction des animations dans votre système d’exploitation et rechargez le site.
2. **Vérifiez tout ce qui bouge** En-têtes, carrousels, effets de défilement, vidéos, canvas et états de chargement doivent tous être calmes.
3. **Changez-le pendant que la page est ouverte** Vos scripts doivent suivre le changement sans rechargement.
4. **Émulez-le dans les outils de développement** Chrome et Firefox peuvent émuler la media feature, ce qui est plus rapide en cours de travail.
5. **Regardez le design fixe** Assurez-vous que la version réduite paraît voulue et complète, pas comme quelque chose qui n’a pas chargé.

## FAQ

### Qu’est-ce que prefers-reduced-motion ?

C’est une media feature CSS qui indique à un site si le visiteur a demandé à son appareil de limiter les mouvements non essentiels. Ses valeurs sont reduce et no-preference.

### Réduire les animations veut-il dire tout supprimer ?

Non. Supprimez ou remplacez les grands mouvements, la parallaxe, les zooms et les boucles automatiques, mais les doux fondus et les petits retours sont en général acceptables.

### Comment tester prefers-reduced-motion ?

Activez le réglage de réduction des animations dans votre système d’exploitation et rechargez la page, ou émulez la media feature dans les outils de développement de Chrome ou Firefox.

### Le WCAG exige-t-il de prendre en charge la réduction des animations ?

Le critère WCAG 2.3.3 Animation from Interactions, de niveau AAA, demande que le mouvement déclenché par une interaction puisse être désactivé, et prendre en charge la réduction des animations est le moyen habituel d’y répondre. Des critères de niveau A couvrent aussi la mise en pause des animations automatiques et la limitation des flashs.

### Pourquoi certaines personnes activent-elles la réduction des animations ?

Certaines ont des troubles vestibulaires, où le mouvement à l’écran peut provoquer vertiges ou nausées ; d’autres ont des migraines, trouvent le mouvement distrayant ou préfèrent simplement un écran plus calme.