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

La requête média "Preferreds-reduced-motion" détecte si l'utilisateur a demandé ou non le système d'exploitation afin 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 expérimentent directement le mouvement en cas de déficience parallaxe, d'effets de zoom, etc. Contenu multimédia des préférences de l'utilisateur La requête prefers-reduced-motion vous permet de concevoir une variante de votre site avec réduction de l'animation, pour les utilisateurs qui ont exprimé cette préférence.

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 74
• <ph type="x-smartling-placeholder"></ph> 79
• <ph type="x-smartling-placeholder"></ph> 63
• <ph type="x-smartling-placeholder"></ph> 10,1

Source

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 brillait et la glace la patinoire était remplie de personnes ⛸. Le seul problème: je ne gère pas bien la foule. Ainsi, avec un grand nombre de cibles mobiles, je ne me concentre sur rien, et je me retrouve perdu et j'ai le sentiment d'être complet. une surcharge visuelle, presque comme regarder une fourmilier 🐜.

<ph type="x-smartling-placeholder">

</ph>

La surcharge visuelle dans la vraie vie.

La même chose peut parfois se produire sur le Web: annonces clignotantes, effets de parallaxe fantaisistes, effets surprenants révéler des animations, des vidéos en lecture automatique, etc., le Web peut parfois être assez lourd... Heureusement, contrairement à la réalité, il existe une solution à cela. 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 les mouvements ont été réduits. Cela peut aller de l'absence de lecture automatique des vidéos, désactiver certains effets purement décoratifs, à la refonte complète d'une page pour certains utilisateurs.

Avant de plonger dans le détail de cette fonctionnalité, je vais prendre un peu de recul et réfléchir à 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 accéder directement aux détails techniques.

Animation sur le Web

Les animations sont souvent utilisées pour fournir des commentaires à l'utilisateur, par exemple pour lui indiquer que une action a été reçue et est en cours de traitement. Par exemple, sur un site marchand, un produit peut être animé pour "voler" ; dans un panier d'achat virtuel, représenté sous la forme d'une icône dans le coin supérieur droit le site.

Un autre cas d'utilisation implique l'utilisation du mouvement pour pirater la perception des utilisateurs en utilisant un mélange d'écrans de squelette, de métadonnées contextuelles et d'aperçus d'images de faible qualité pour occupent beaucoup de temps de l'utilisateur et rendent l'ensemble de l'expérience plus rapide. L'idée est de donner le contexte à l'utilisateur de ce qui va suivre et en attendant, charger les choses le plus rapidement possible.

Enfin, il existe des effets décoratifs : dégradés animés, défilement en parallaxe, arrière-plan, etc. des vidéos et plusieurs autres. Si de nombreux utilisateurs apprécient ces animations, certains les détestent parce que ils se sentent distraits ou ralentis par eux. Dans le pire des cas, les utilisateurs peuvent même souffrir de mouvements comme s'il s'agissait d'une expérience de la vie réelle. Pour ces utilisateurs, réduire les animations est donc nécessaire.

Trouble du spectre vestibulaire déclenché par un mouvement

Certains utilisateurs la distraction ou la nausée d'un contenu animé. Par exemple, les animations de défilement peuvent provoquer des troubles vestibulaires lorsque des éléments autres que le associé au défilement se déplacent beaucoup. Par exemple, les animations de défilement parallaxe peut provoquer des troubles vestibulaires, car les éléments en arrière-plan se déplacent à une vitesse différente de celle du premier plan éléments. Les réactions associées au trouble vestibulaire (oreille interne) incluent des vertiges, des nausées et des migraines des maux de tête et peuvent nécessiter de se reposer pour récupérer.

Supprimer les mouvements sur les systèmes d'exploitation

De nombreux systèmes d'exploitation disposent de paramètres d'accessibilité permettant de spécifier une préférence pour la réduction pendant longtemps. Les captures d'écran suivantes montrent la préférence Réduire le mouvement de macOS Mojave et Préférence Supprimer les animations d'Android Pie. Lorsque ces préférences sont cochées, le système d'exploitation de ne pas utiliser d'effets décoratifs comme les animations de lancement de l'appli. Les applications elles-mêmes peuvent et doit également respecter ce paramètre et supprimer toutes les animations inutiles.

Supprimer l'animation sur le Web

Dans Requêtes média de niveau 5, l'animation réduite des préférences de l'utilisateur sur le Web également. Les requêtes média permettent aux auteurs de tester et d'interroger des valeurs ou des caractéristiques du user-agent ou de l'appareil d'affichage indépendamment du document affiché. La requête média prefers-reduced-motion est utilisé pour détecter si l'utilisateur a défini une préférence pour le système d'exploitation afin de réduire la quantité d'animation ou le 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 du système d'exploitation. 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 de système d'exploitation pour indiquer que les interfaces doivent minimiser les mouvements ou les animations, de préférence au point où tous les éléments non essentiels le mouvement est supprimé.

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 vous pouvez définir un "vibreur" qui attire l'attention mais en tant que citoyen du Web, je ne jouerai pour les utilisateurs qui sont explicitement d’accord avec les animations, mais pas tous les autres, qui peuvent être des utilisateurs qui ont désactivé les animations ou qui consultent des 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;
  }
}

Remarque : Si vous utilisez beaucoup de code CSS lié à l'animation, vous pouvez éviter aux utilisateurs qui ont désactivé le téléchargement en sous-traitant tout CSS associé à l'animation dans une feuille de style distincte que vous ne chargez qu'en fonction de conditions à l'aide de l'attribut media de l'élément link 😎: <link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)">

Pour illustrer l'utilisation de prefers-reduced-motion avec JavaScript, imaginez que j'ai défini une animation complexe avec API Web Animations : Alors que les règles CSS est déclenchée dynamiquement par le navigateur lorsque les préférences de l'utilisateur changent, pour JavaScript animations. Je dois écouter moi-même les modifications, puis arrêter manuellement ce qui est potentiellement en cours de transfert. animations (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:

À éviter

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

À faire

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

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

Un cas d'utilisation intéressant consiste à faire en sorte que la lecture d'un fichier AVIF, WebP ou GIF animé dépende 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 pouvez voir l'exemple suivant. 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

En-tête d'indication du client Sec-CH-Prefers-Reduced-Motion permet aux sites d'obtenir les préférences de mouvement de l'utilisateur au moment de la demande permettant aux serveurs d'intégrer le code CSS approprié pour des raisons de performances.

Démo

J'ai créé une petite démo basée sur les incroyables histoires de Rogério Vicente 🐈 Chats à l'état HTTP : Tout d'abord, prenez un moment pour apprécier cette blague, hilarant et j’attendrai. Maintenant que vous êtes de retour, laissez-moi vous présenter demo. Lorsque vous faites défiler l'écran, chaque catégorie d'état HTTP apparaît en alternance du côté droit ou du côté gauche. Elle est parfaitement fluide à 60 FPS mais comme nous l'avons vu précédemment, certains utilisateurs peuvent ne l'aimer qu'une seule fois ou même tomber malade. La démo est programmée pour respecter prefers-reduced-motion. Cela fonctionne même dynamiquement, afin que les utilisateurs puissent modifier leurs préférences à la volée, sans qu'il soit nécessaire d'actualiser la page. Si un utilisateur préfère les mouvements réduits, les animations de révélation inutiles ont disparu et il ne reste que le mouvement de défilement normal. La L'enregistrement d'écran suivant montre la démonstration en action:

<ph type="x-smartling-placeholder">

</ph>

Vidéo de la Démonstration : prefers-reduced-motion application

Conclusions

Respecter les préférences des utilisateurs est essentiel pour les sites Web modernes, et les navigateurs exposent de plus en plus pour permettre aux développeurs Web de le faire. Autre exemple lancé : prefers-color-scheme, qui détecte si l'utilisateur préfère un jeu de couleurs clair ou sombre. Vous pouvez lire tout sur prefers-color-scheme dans mon article Hello Darkness, My Old Friend 🌒.

Le groupe de travail CSS standardise davantage requêtes média de préférences 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 réduire le contraste entre les couleurs adjacentes). et inverted-colors (détecte si l'utilisateur préfère les 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 vous souhaitez, pour une raison quelconque, arrêter l'animation sur tous les sites Web, c'est possible. Une façon de faire cela se produit consiste à injecter une feuille de style avec le CSS suivant dans chaque page Web que vous consultez. Il y plusieurs extensions de navigateur (vous l'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;
  }
}

Son fonctionnement est le suivant : le CSS précédent remplace la durée de toutes les animations et transitions. sur une durée si courte qu’ils ne sont plus perceptibles. Certains sites Web dépendent d'une animation doit s'exécuter correctement pour fonctionner correctement (peut-être parce qu'une certaine étape dépend du déclenchement de la événement animationend), l'approche plus radicale animation: none !important; ne fonctionnerait pas. Même le hack précédent n’est pas de réussir sur tous les sites Web (par exemple, il ne peut pas interrompre le mouvement initié à l'aide du API Web Animations). le désactiver lorsque vous remarquez un dysfonctionnement.

Liens associés

• Dernier brouillon de l'éditeur de Requêtes média niveau 5 .
• prefers-reduced-motion activé État de la plate-forme Chrome
• prefers-reduced-motion Bug Chromium.
• Clignotement Projet d'implémentation de la publication.

Remerciements

Un grand merci à Stephen McGruer qui a mis en œuvre prefers-reduced-motion dans Chrome et, avec Rob Dodson, a également lu ce document. Image héros par Hannah Cauhepe sur Unsplash.