Animations et mouvements

Animation provenant d’interactions

Les personnes atteintes de troubles vestibulaires (de l’oreille interne) ont besoin de contrôle sur les mouvements déclenchés par des interactions. Les mouvements peuvent déclencher des réactions de troubles vestibulaires, notamment des distractions, des étourdissements, des maux de tête et des nausées.

Les directives WCAG exigent (au niveau AAA) que toute les animations de mouvement déclenchent une interaction puisse être désactivée à moins que l’animation soit essentielle à la fonctionnalité ou à l’information transmise.

Il est essentiel de déplacer tout nouveau contenu dans la clôture pour le faire défiler. Comme c’est l’utilisateur qui contrôle le mouvement de défilement essentiel, cette approche est permise.

Si le défilement d’une page entraîne le déplacement d’éléments (autre que le mouvement essentiel associé au défilement), cela posera problème.

Le « défilement par parallaxe » pose également problème. Il se produit lorsque l’arrière-plan se déplace à une vitesse différente de celle de l’avant-plan.

Les Directives WCAG recommandent de choisir l’une des trois solutions de rechange pour réduire les risques de déclencher un trouble vestibulaire:

• Évitez d’utiliser une animation inutile;
• Offrir une commande permettant aux utilisateurs de désactiver les animations non essentielles des interactions avec l’utilisateur (à l’échelle du site);
• Tirez profit de la fonction de mouvement réduit intégrée au système utilisateur-agent ou au système d’exploitation avec la requête média CSS prefers-reduced-motion:
  

  CSS

  Début du code

  @media (prefers-reduced-motion: reduce) {
     /* la commande CSS pour désactiver le mouvement est insérée ici */
  }

  Fin de code

Bon exemple : Combinaison de la fonction de mouvement réduit du système d’exploitation et d’une requête média CSS

CSS offre une requête média prefers-reduced-motion qui respecte les paramètres de mouvement spécifiés par l’utilisateur.

Cet exemple illustre un mouvement de tressautement :hover et :focus sur un bouton. Le mouvement est désactivé lorsque :

• la requête CSS média prefers-reduced-motion est fixée à reduce
• l’agent utilisateur ou le système d’exploitation intègre les fonctionnalités de mouvement réduit.

Exemple : Mouvement déclenché par une interaction de l’utilisateur

CSS

Début du code

button:focus, button:hover {
   animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
   }
@media (prefers-reduced-motion: reduce) {
   button:focus, button:hover {
      animation: none;
   }
}

Fin de code

Veuillez noter que Windows 10 permet de désactiver l’affichage des animations.

L'exemple commence

L'exemple finit

Vous pouvez plutôlt imiter la fonction de mouvement réduit du système d’exploitation dans un navigateur qui propose l’option. Par exemple, dans le menu Outils de Chrome, le sous-menu Rendu propose « Emulate CSS media feature prefers-reduced-motion » (Imiter la fonction CSS « Préférer les médias à mouvement réduit »). L’activation de cette option équivaut à modifier les paramètres du système d’exploitation.

L'exemple commence

L'exemple finit

Parallaxe

Le défilement en parallaxe se produit lorsque l’arrière-plan se déplace à une vitesse différente de celle de l’avant-plan. Il est lié à des animations non essentielles additionnelles qui apparaissent lorsque l’utilisateur fait défiler l’écran. Des éléments décoratifs se déplacent horizontalement tandis que le contenu essentiel de la page défile verticalement. Pour certaines personnes, ce mouvement peut déclencher des troubles vestibulaires comme des étourdissements, des nausées et des maux de tête.

• Évitez le défilement en parallaxe ou ajoutez une commande pour le désactiver.0
• Les utilisateurs de clavier doivent pouvoir accéder à la zone cachée d’une zone de défilement en parallaxe et utiliser toutes les fonctionnalités de la page Web.
• Si dans CSS le contenu caché est réglé à display: none, les utilisateurs de clavier pourraient ne pas avoir accès aux éléments cachés du contenu.
• Le texte doit être lisible devant l’arrière-plan et doit être conforme aux directives WCAG en matière de contraste, soit 4.5:1 pour le texte de petite taille et 3:1 pour le texte de grande taille ou en caractères gras.

Vidéos ou animations en arrière-plan

Les vidéos et les animations en arrière-plan présentent des informations supplémentaires et améliorent le contenu Web. Si des informations essentielles sont communiquées dans une vidéo en arrière-plan, la vidéo doit être entièrement accessible, avec des sous-titres et une transcription descriptive.

• Assurez-vous qu’aucun contenu ne commence à jouer automatiquement au chargement de la page.
• Permettez aux utilisateurs de contrôler la lecture et l’arrêt du contenu en mouvement ou du contenu audio.
• Les Directives WCAG de niveau AA permettent la lecture automatique des vidéos pendant un maximum de 5 secondes, mais si un contenu doit être joué pendant plus de 5 secondes, un mécanisme doit être intégré pour mettre en pause, arrêter ou masquer le contenu.

Bon exemple : Vidéo en arrière-plan avec fonction de lecture/pause

L'exemple commence

L'exemple finit

Ressources WCAG connexes