Respecter les préférences de mouvement des utilisateurs —

Lorsque vous travaillez avec le mouvement sur le Web, il est important de considérer que tout le monde ne le vit pas de la même manière. Ce qui peut sembler lisse et lisse pour certains peut être ennuyeux ou distrayant pour d'autres – ou pire, provoquer des sensations de malaise ou même provoquer des convulsions. Les sites Web avec beaucoup de mouvement peuvent également avoir un impact plus important sur la durée de vie de la batterie des appareils mobiles ou entraîner l'utilisation de plus de données (la lecture automatique de vidéos, par exemple, nécessitera plus de données d'un utilisateur qu'un fichier statique image). Ce ne sont là que quelques-unes des raisons pour lesquelles les sites à forte densité de mouvement peuvent ne pas être souhaitables pour tous.

La plupart des nouveaux systèmes d'exploitation permettent à l'utilisateur de définir ses préférences de mouvement dans ses paramètres au niveau du système. La requête média prefers-reduced-motion (qui fait partie de la spécification Level 5 Media Queries) nous permet de détecter les préférences de mouvement des utilisateurs au niveau du système et d'appliquer des styles CSS qui les respectent.

Les deux options pour préfère-mouvement réduit sont réduire ou pas de préférence. Nous pouvons l'utiliser de la manière suivante dans notre CSS pour désactiver l'animation d'un élément si l'utilisateur a explicitement défini une préférence pour un mouvement réduit :

.some-element {
  animation : rebond 1200ms ;
}

@media (préfère-mouvement réduit : réduire) {
  .quelque-élément {
    animation : aucune ;
  }
}

Inversement, nous pourrions définir l'animation uniquement si l'utilisateur n'a pas de préférence de mouvement. Cela a l'avantage de réduire la quantité de code que nous devons écrire, et signifie qu'il est moins probable que nous oublions de répondre aux préférences de mouvement des utilisateurs :

@media (prefers-reduced-motion: no-preference) {
  .some-element {
    animation : rebond 1200ms ;
  }
}

Un avantage supplémentaire est que les navigateurs plus anciens qui ne prennent pas en charge préfère-mouvement réduit ignoreront la règle et afficheront uniquement notre élément original sans mouvement.

Quelle règle ?[19659010]Contrairement aux media queries min-width et max-widthoù le consensus plus ou moins établi est mobile-first (privilégiant donc min-width) , il n'y a pas une seule "bonne" façon d'écrire vos styles de mouvement réduit. J'ai tendance à privilégier le deuxième exemple (appliquer des animations uniquement si préfère-mouvement réduit : aucune-préférence évalue vrai), pour les raisons énumérées ci-dessus. Tatiana Mac a écrit cet excellent article qui couvre certaines des approches que les développeurs pourraient envisager d'adopter, ainsi que de nombreux autres points intéressants, y compris les questions clés à poser lors de la conception avec mouvement sur le Web.

Comme toujours, la communication d'équipe et une stratégie cohérente sont essentiels pour garantir que toutes les bases sont couvertes en matière d'accessibilité Web.

Plus après le saut ! Continuez à lire ci-dessous ↓

prefers-reduced-motion a de nombreuses applications au-delà de l'application (ou non) d'animations ou de transitions d'images clés. Un exemple est le défilement fluide. Si nous définissons scroll-behaviour: smooth sur notre élément htmllorsqu'un utilisateur clique sur un lien d'ancrage dans la page, il défile en douceur jusqu'à la position appropriée sur la page (actuellement non pris en charge dans Safari):

html {
  comportement de défilement : lisse ;
}

Malheureusement, en CSS, nous n'avons pas beaucoup de contrôle sur ce comportement pour le moment. Si nous avons une longue page de contenu, la page défile très rapidement, ce qui peut être une expérience assez désagréable pour une personne sensible au mouvement. En l'enveloppant dans une requête média, nous pouvons empêcher ce comportement d'être appliqué dans les cas où l'utilisateur a une préférence reduced-motion :

@media (prefers-reduced- mouvement : sans préférence) {
  html {
    comportement de défilement : lisse ;
  }
}

Traitement des préférences de mouvement en Javascript

Parfois, nous devons appliquer le mouvement en JavaScript plutôt qu'en CSS. Nous pouvons également détecter les préférences de mouvement d'un utilisateur avec JS, en utilisant matchMedia. Voyons comment nous pouvons implémenter conditionnellement un comportement de défilement fluide dans notre code JS :

/* Définir la requête multimédia */
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)')

button.addEventListener('click', () => {
  /* Si la requête média correspond, définissez la variable de comportement de défilement sur 'auto',
  sinon, définissez-le sur 'lisse' */
  comportement const = prefersReducedMotion.matches ? 'auto' : 'lisse'

  /* Lorsque le bouton est cliqué, l'utilisateur défile vers le haut */
  window.scrollTo({
    x : 0,
    y : 0,
    comportement
  })
})

Le même principe peut être utilisé pour détecter s'il faut implémenter des interfaces utilisateur riches en mouvements avec des bibliothèques JS – ou même s'il faut charger les bibliothèques elles-mêmes.

Dans l'extrait de code suivant, la fonction revient tôt si l'utilisateur préfère mouvement réduit, évitant l'importation inutile d'une grande dépendance – une performance gagnante pour l'utilisateur. Si aucune préférence de mouvement n'est définie, nous pouvons importer dynamiquement la bibliothèque d'animation Greensock et initialiser nos animations.

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)')

const loadGSAPAndInitAnimations = () => {
  /* Si l'utilisateur préfère les mouvements réduits, ne rien faire */
  if (préfèreReducedMotion.matches) return
  
  /* Sinon, importe le module GSAP et initialise les animations */
  import('gsap').then((objet) => {
    const gsap = objet.default
    /* Initialiser les animations avec GSAP ici */
  })
}

loadGSAPAndInitAnimations()

reduced-motion Doesn't Mean No Motion

Lors du style pour les préférences de mouvement réduit, il est important que nous fournissions toujours à l'utilisateur des indicateurs significatifs et accessibles de quand un l'action a eu lieu. Par exemple, lors de la désactivation d'un état de survol gênant ou à forte intensité de mouvement pour les utilisateurs qui préfèrent un mouvement réduit, nous devons veiller à fournir un style alternatif clair lorsque l'utilisateur survole l'élément.

La démo suivante montre un style élaboré. transition lorsque l'utilisateur survole ou se concentre sur un élément de la galerie s'il n'a pas de préférence de mouvement définie. S'ils préfèrent un mouvement réduit, la transition est plus subtile, mais indique toujours clairement l'état de survol :