préfère-réduire-le-mouvement: parfois, il suffit de moins bouger

La requête multimédia à mouvement de préférence réduit détecte si l'utilisateur a demandé au système d'exploitation de minimiser la quantité d'animation ou de mouvement qu'il utilise.

Thomas Steiner

Tout le monde n'aime pas les animations ou les transitions décoratives, et certains utilisateurs souffrent directement du mal des transports lorsqu'ils sont confrontés au défilement parallaxe, aux effets de zoom, etc. La requête média prefers-reduced-motion des préférences de l'utilisateur vous permet de concevoir une variante de votre site avec un nombre réduit de mouvements, pour les utilisateurs qui ont exprimé cette préférence.

Trop de mouvements dans la vie réelle et sur le Web

L'autre jour, je faisais du patin à glace avec mes enfants. C'était une belle journée, le soleil brûlait et la patinoire était pleine de gens ⛸. Le seul problème: je ne supporte pas bien la foule. Avec autant de cibles mobiles, je ne me concentre pas sur quoi que ce soit et je me retrouve perdu avec une impression de surcharge visuelle complète, presque comme regarder un fourmilier 🐜.

Dans certains cas, la même chose peut se produire sur le Web: avec des annonces clignotantes, des effets de parallaxe sophistiqués, des animations surprenantes, des vidéos à lecture automatique, etc., le Web peut parfois être assez écrasant. Heureusement, contrairement à la réalité, il existe une solution à cela. La requête média CSS prefers-reduced-motion permet aux développeurs de créer une variante d'une page pour les utilisateurs qui préfèrent réduire les mouvements. Cela peut aller de l'absence de lecture automatique de vidéos, de la désactivation de certains effets purement décoratifs ou de la refonte complète d'une page pour certains utilisateurs.

Avant de plonger au cœur de cette fonctionnalité, prenons un peu de recul et réfléchissons à la façon dont les animations sont utilisées sur le Web. Si vous le souhaitez, vous pouvez également ignorer les informations générales et accéder directement aux détails techniques ci-dessous.

Animation sur le Web

Les animations sont souvent utilisées pour fournir des commentaires à l'utilisateur, par exemple pour l'informer qu'une action a été reçue et est en cours de traitement. Par exemple, sur un site Web d'achat, un produit peut être animé de manière à "s'envoler" dans un panier d'achat virtuel, représenté par une icône dans l'angle supérieur droit du site.

Un autre cas d'utilisation implique l'utilisation du mouvement pour pirater la perception des utilisateurs en combinant des écrans squelettes, des métadonnées contextuelles et des aperçus d'images de mauvaise qualité. Cela occupe beaucoup de temps pour l'utilisateur et la rend plus rapide. L'idée est de fournir du contexte à l'utilisateur et de charger les éléments le plus rapidement possible.

Enfin, il existe des effets décoratifs tels que les dégradés animés, le défilement parallaxe, les vidéos en arrière-plan et plusieurs autres. Bien que de nombreux utilisateurs apprécient ces animations, d'autres ne les détestent pas parce qu'elles se sentent distraites ou ralenties. Dans le pire des cas, les utilisateurs peuvent même souffrir du mal des transports comme s'il s'agissait d'une expérience de la vie réelle. Pour eux, réduire les animations est une nécessité médicale.

Trouble du spectre vestibulaire déclenché par un mouvement

Certains utilisateurs subissent des distractions ou des nausées dans le contenu animé. Par exemple, les animations de défilement peuvent provoquer des troubles vestibulaires lorsque des éléments autres que l'élément principal associé au défilement se déplacent beaucoup. Par exemple, les animations de défilement parallaxe peuvent entraîner des troubles vestibulaires, car les éléments d'arrière-plan se déplacent à un rythme différent de celui des éléments de premier plan. Les réactions du trouble vestibulaire (oreille interne) se caractérisent par des vertiges, des nausées et des migraines, et nécessitent parfois de rester alité pour récupérer.

Supprimer les mouvements sur les systèmes d'exploitation

Pendant longtemps, de nombreux systèmes d'exploitation disposent de paramètres d'accessibilité permettant de spécifier une préférence pour réduire les mouvements. Les captures d'écran ci-dessous montrent la préférence Réduire l'animation de macOS Mojave et la préférence Supprimer les animations d'Android Pie. Lorsque ces préférences sont cochées, le système d'exploitation n'utilise pas d'effets décoratifs tels que des animations de lancement de l'application. Les applications elles-mêmes peuvent et doivent respecter ce paramètre, et supprimer toutes les animations inutiles.

Supprimer l'animation sur le Web

Le niveau 5 de requêtes média apporte également au Web la préférence de mouvement réduite de l'utilisateur. Les requêtes média permettent aux auteurs de tester et d'interroger les valeurs ou les fonctionnalités du user-agent ou de l'appareil d'affichage indépendamment du document affiché. La requête média prefers-reduced-motion permet de détecter si l'utilisateur a défini une préférence de système d'exploitation afin de minimiser la quantité d'animation ou de mouvement qu'il utilise. Deux valeurs sont possibles:

• no-preference: indique que l'utilisateur n'a fait aucune préférence dans le système d'exploitation sous-jacent. Cette valeur de mot clé est évaluée comme false dans le contexte booléen.
• reduce: indique que l'utilisateur a défini une préférence pour le système d'exploitation, indiquant que les interfaces doivent minimiser les mouvements ou les animations, de préférence au point où tous les mouvements non essentiels sont supprimés.

Utiliser la requête média à partir de contextes CSS et JavaScript

Comme pour toutes les requêtes média, prefers-reduced-motion peut être vérifié à partir d'un contexte CSS et d'un contexte JavaScript.

Prenons l'exemple d'un bouton d'inscription important sur lequel je souhaite que l'utilisateur clique. Je pourrais définir une animation "vibreur" accrocheuse, mais en tant que bon citoyen Web, je la diffuserai uniquement pour les utilisateurs qui sont explicitement d'accord avec les animations, mais pas pour tout le monde. Il peut s'agir d'utilisateurs qui ont désactivé les animations ou d'utilisateurs de navigateurs qui ne comprennent pas la requête média.

/*
  If the user has expressed their preference for
  reduced motion, then don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use animations on buttons.
*/
@media (prefers-reduced-motion: no-preference) {
  button {
    /* `vibrate` keyframes are defined elsewhere */
    animation: vibrate 0.3s linear infinite both;
  }
}

Pour illustrer l'utilisation de prefers-reduced-motion avec JavaScript, imaginons que j'ai défini une animation complexe avec l'API Web Animations. Bien que les règles CSS soient déclenchées de manière dynamique par le navigateur lorsque les préférences de l'utilisateur changent, pour les animations JavaScript, je dois écouter moi-même les modifications, puis arrêter manuellement mes animations potentiellement en cours (ou les redémarrer si l'utilisateur me le permet):

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
  console.log(mediaQuery.media, mediaQuery.matches);
  // Stop JavaScript-based animations.
});

Notez que les parenthèses autour de la requête média sont obligatoires:

window.matchMedia('prefers-reduced-motion: reduce');

window.matchMedia('(prefers-reduced-motion: reduce)');

Utiliser la requête média à partir de contextes <picture>

Un cas d'utilisation intéressant consiste à rendre la lecture d'un fichier AVIF, WebP ou GIF animé dépendant de l'attribut media. Si (prefers-reduced-motion: no-preference) renvoie true, vous pouvez afficher la version animée, sinon la version statique:

<picture>
  <!-- Animated versions. -->
  <source
    srcset="nyancat.avifs"
    type="image/avif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <source
    srcset="nyancat.gif"
    type="image/gif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <!-- Static versions. -->
  <img src="nyancat.png" alt="Nyan cat" width="250" height="250" />
</picture>

Vous trouverez l'exemple ci-dessous. Essayez de modifier les préférences de mouvement de votre appareil pour voir la différence.

Découvrir les préférences de l'utilisateur au moment de la demande

L'en-tête d'optimisation client Sec-CH-Prefers-Reduced-Motion permet aux sites d'obtenir les préférences de mouvement de l'utilisateur au moment de la requête, ce qui permet aux serveurs d'intégrer le code CSS approprié pour des raisons de performances.

Démonstration

J'ai créé une petite démo basée sur les incroyables chats d'état HTTP 🐈 HTTP de Rogério Vicente. Tout d'abord, prenez un moment pour apprécier la blague, c'est hilarant et j'attendrai. Maintenant que vous êtes de retour, laissez-moi vous présenter la démonstration. Lorsque vous faites défiler la page vers le bas, chaque catégorie d'état HTTP apparaît alternativement du côté droit ou du côté gauche. C'est une animation à 60 FPS tout en douceur, mais comme indiqué ci-dessus, certains utilisateurs peuvent ne l'aimer ni avoir le mal des transports. La démo est donc programmée pour respecter prefers-reduced-motion. Cela fonctionne même de manière dynamique. Les utilisateurs peuvent donc modifier leurs préférences à la volée, sans qu'il soit nécessaire d'actualiser la page. Si un utilisateur préfère un mouvement réduit, les animations de révélation inutiles ont disparu et il ne reste que le mouvement de défilement normal. L'enregistrement d'écran ci-dessous montre la démonstration en action:

Conclusions

Le respect des préférences des utilisateurs est essentiel pour les sites Web modernes, et les navigateurs proposent de plus en plus de fonctionnalités permettant aux développeurs Web de le faire. Un autre exemple lancé est prefers-color-scheme, qui détecte si l'utilisateur préfère un jeu de couleurs clair ou sombre. Vous pouvez tout savoir sur prefers-color-scheme dans mon article Hello Darkness, My Old Friend 🌒.

Le groupe de travail CSS standardise actuellement davantage de requêtes média de préférence utilisateur telles que prefers-reduced-transparency (détecte si l'utilisateur préfère une transparence réduite), prefers-contrast (détecte si l'utilisateur a demandé au système d'augmenter ou de diminuer le contraste entre les couleurs adjacentes) et inverted-colors (détecte si l'utilisateur préfère des couleurs inversées).

(Bonus) Forcer la réduction des mouvements sur tous les sites Web

Tous les sites n'utiliseront pas prefers-reduced-motion, ou ce n'est peut-être pas assez important pour vous. Si, pour une raison quelconque, vous souhaitez arrêter l'animation sur tous les sites Web, c'est possible. Pour ce faire, vous pouvez injecter une feuille de style avec le code CSS suivant dans chaque page Web que vous consultez. Plusieurs extensions de navigateur permettent d'effectuer cette opération. Si vous les utilisez à vos propres risques,

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    transition-delay: 1ms !important;
  }
}

Pour cela, le CSS ci-dessus remplace la durée de toutes les animations et transitions sur une durée si courte qu'elles ne sont plus perceptibles. Étant donné que certains sites Web nécessitent l'exécution d'une animation pour fonctionner correctement (peut-être parce qu'une certaine étape dépend du déclenchement de l'événement animationend), l'approche animation: none !important; plus radicale ne fonctionnerait pas. Même le piratage ci-dessus n'est pas garanti pour réussir sur tous les sites Web (par exemple, il ne peut pas arrêter les mouvements initiés via l'API Web Animations). Veillez donc à le désactiver lorsque vous remarquez un dysfonctionnement.

Liens associés

• Dernier brouillon de la spécification des requêtes média de niveau 5 de l'éditeur.
• prefers-reduced-motion sur État de la plate-forme Chrome.
• prefers-reduced-motion Bug Chromium.
• Clignez l'intention d'implémenter la publication.

Remerciements

Nous remercions vivement Stephen McGruer, qui a implémenté prefers-reduced-motion dans Chrome et qui, en collaboration avec Rob Dodson, a également lu cet article. Image héros par Hannah Cauhepe sur Unsplash.