Prefers reduced motion : une animation utilisable par tous

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.

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é.

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 documente cette fonctionnalité.

/* 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%; }
}

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.

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()

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 et dégradés shader 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.

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 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é.

1. 1

   Activez le réglage

   Activez la réduction des animations dans votre système d’exploitation et rechargez le site.

2. 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. 3

   Changez-le pendant que la page est ouverte

   Vos scripts doivent suivre le changement sans rechargement.

4. 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. 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é.