La requête multimédia "preferred-reduced-motion" détecte si l'utilisateur a demandé au système d'exploitation de réduire la quantité d'animation ou de mouvement qu'il utilise.
Tout le monde n'aime pas les animations décoratives ou les transitions, et certains utilisateurs éprouvent directement le mal des transports lorsqu'ils sont confrontés au défilement parallaxe, aux effets de zoom, etc. La requête multimédia prefers-reduced-motion de préférences utilisateur vous permet de concevoir une variante de votre site avec réduction du mouvement pour les utilisateurs qui ont exprimé cette préférence.
Il y a 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 patinoire était remplie de gens ⛸. Le seul problème à cela: je ne gère pas bien la foule. Avec autant de cibles en mouvement, je n'arrive pas à me concentrer sur quoi que ce soit, et je me retrouve perdu et j'ai un sentiment de surcharge visuelle complète, presque comme si je regardais une truffe 🐜.
La même chose peut parfois se produire sur le Web: avec des annonces clignotantes, des effets de parallaxe fantaisistes, des animations d'affichage surprenantes, des vidéos en lecture automatique, etc., le Web peut parfois être assez envahissant... Heureusement, contrairement à la vraie vie, 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 des vidéos à la désactivation de certains effets purement décoratifs, en passant par la refonte complète d'une page pour certains utilisateurs.
Avant de plonger dans le détail de cette fonctionnalité, revenons un peu en arrière et voyons à quoi servent les animations 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
Une animation est souvent utilisée 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 à "voler" dans un panier d'achat virtuel, représenté sous la forme d'une icône en haut à droite du site.
Un autre cas d'utilisation consiste à utiliser le mouvement pour pirater la perception de l'utilisateur en utilisant un mélange d'écrans squelettes, de métadonnées contextuelles et d'aperçus d'images de mauvaise qualité pour occuper beaucoup de temps à l'utilisateur et rendre l'expérience globale plus rapide. L'idée est de donner du contexte à l'utilisateur sur ce qui va suivre et, pendant ce temps, de charger les choses 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 d'arrière-plan, etc. Bien que de nombreux utilisateurs apprécient ces animations, certains ne les détestent pas parce qu'ils se sentent distraits ou ralentis par elles. 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.
Troubles du spectre vestibulaire déclenché par le mouvement
Certains utilisateurs souffrent de distraction ou de nausée liée aux contenus animés. 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 (de l'oreille interne) incluent des étourdissements, des nausées et des migraines. Elles nécessitent parfois de se reposer au lit 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 une réduction de mouvement pendant une longue période. Les captures d'écran ci-dessous montrent la préférence Réduire le mouvement 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 les animations de lancement d'applications. 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 de requêtes média 5 permet également aux utilisateurs de voir leurs mouvements réduits sur le Web. Les requêtes multimédias 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 pour minimiser la quantité d'animation ou de mouvement utilisée. 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 étantfalsedans le contexte booléen.reduce: indique que l'utilisateur a défini une préférence de système d'exploitation indiquant que les interfaces doivent minimiser le mouvement ou l'animation, 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.
Pour illustrer ces deux éléments, supposons que je dispose d'un bouton d'inscription important sur lequel je veux que l'utilisateur clique. Je pourrais définir une animation "vibreur" qui attire l'attention, mais en tant que bon citoyen du Web, je ne la diffuserai que pour les utilisateurs qui acceptent explicitement les animations, mais pas pour tous les autres (par exemple, les utilisateurs qui ont désactivé les animations ou ceux qui utilisent 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;
}
}
Pour illustrer comment utiliser prefers-reduced-motion avec JavaScript, imaginons que j'ai défini une animation complexe avec l'API Web Animations. Alors que les règles CSS sont déclenchées de manière dynamique par le navigateur lorsque les préférences de l'utilisateur changent, je dois écouter moi-même les animations JavaScript, puis arrêter manuellement les 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 à faire en sorte que la lecture d'un fichier AVIF, WebP ou GIF animé dépende de l'attribut media. Si (prefers-reduced-motion: no-preference) renvoie la valeur true, vous pouvez afficher la version animée sans risque, 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 du client Sec-CH-Prefers-Reduced-Motion permet aux sites d'obtenir les préférences de mouvement de l'utilisateur de manière facultative au moment de la demande. Les serveurs peuvent ainsi intégrer le CSS approprié pour des raisons de performances.
Démonstration
J'ai créé une petite démonstration à partir des incroyables chats HTTP de Rogério Vicente. Tout d'abord, prenez un moment pour apprécier la blague, c'est hilarant et je patiente. 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. Il s'agit d'une animation de 60 FPS très fluide, mais comme indiqué ci-dessus, certains utilisateurs peuvent ne pas l'aimer ou même avoir le mal des transports. La démo est donc programmée pour respecter prefers-reduced-motion. Cette approche fonctionne même de manière dynamique. Les utilisateurs peuvent donc modifier leurs préférences à la volée, sans avoir à recharger la page. Si un utilisateur préfère un mouvement réduit, les animations d'affichage inutiles disparaissent, et seul le mouvement de défilement régulier reste à gauche. L'enregistrement d'écran ci-dessous montre la démonstration en action:
prefers-reduced-motion
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 pour permettre aux développeurs Web de le faire. Autre exemple : prefers-color-scheme, qui détecte si l'utilisateur préfère un jeu de couleurs clair ou sombre. Vous pouvez tout lire sur prefers-color-scheme dans mon article Hello Darkness, My Old Friend 🌒.
Le groupe de travail CSS standardise actuellement davantage de requêtes médias axées sur les préférences des utilisateurs 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 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 à votre goût.
Si, pour une raison quelconque, vous souhaitez arrêter les mouvements sur tous les sites Web, c'est tout à fait possible. Pour ce faire, vous pouvez injecter une feuille de style avec le CSS suivant dans chaque page Web que vous consultez. Il existe plusieurs extensions de navigateur qui permettent d'effectuer cette opération (à 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;
}
}
Le code CSS ci-dessus remplace les durées de toutes les animations et transitions sur une durée si courte qu'elles ne sont plus visibles. Étant donné que certains sites Web dépendent 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 décrit ci-dessus n'est pas garanti sur tous les sites Web (par exemple, il ne peut pas arrêter une action lancée via l'API Web Animations). Veillez donc à le désactiver lorsque vous remarquez un dysfonctionnement.
Liens associés
- Dernière version préliminaire de la spécification des requêtes média de niveau 5 de l'éditeur
prefers-reduced-motionsur l'état de la plate-forme Chrome.prefers-reduced-motionBug Chromium.- Blink Intent d'implémentation de la publication.
Remerciements
Merci beaucoup à Stephen McGruer, qui a implémenté prefers-reduced-motion dans Chrome et qui, conjointement avec Rob Dodson, a également lu cet article.
Image principale d'Hannah Cauhepe sur Unsplash.