Animation et mouvement

Avez-vous déjà roulé en voiture, en bateau ou en avion et avez soudainement ressenti le monde tourner ? Ou avez eu une migraine si grave que les animations sur votre téléphone ou votre tablette, créé pour "séduire" vous rendre malade tout à coup ? Ou peut-être avez-vous toujours été sensibles à tous les types de mouvements ? Ce sont des exemples de différents types les troubles vestibulaires.

À l'âge de 40 ans, plus de 35% des adultes auront souffert d'une certaine forme de dysfonctionnement vestibulaire. Cela peut entraîner une étourdissement temporaire, des vertiges induits par une migraine ou une handicap vestibulaire permanent.

Au-delà des vertiges, de nombreuses personnes trouvent qu'elles bougent, clignotent ou font défiler l'écran gênant les contenus. Personnes avec TDAH et d'autres troubles du déficit de l'attention peuvent être si distraits des éléments qu'ils oublient pourquoi ils se sont même rendus sur votre site Web ou votre application dans en premier lieu.

Dans ce module, nous allons voir comment mieux accompagner les utilisateurs avec tous les types de troubles déclenchés par le mouvement.

Contenu clignotant et déplacé

Lorsque vous créez une animation et un mouvement, vous devez vous demander si le mouvement de l'élément est excessif. Par exemple, le scintillement de couleurs du sombre au clair ou les mouvements rapides à l'écran peuvent provoquer des crises chez les personnes atteintes d'épilepsie photosensible. On estime que 3% des personnes atteintes d'épilepsie souffrent de photosensibilité, surtout chez les femmes et les jeunes.

Les consignes sur le flash des WCAG ne recommandent pas ce qui suit:

Ces flashs peuvent, au mieux, empêcher l'utilisation d'une page Web ou, au pire, à la maladie.

Pour tout mouvement extrême, vous devez impérativement le tester à l'aide de la Outil d'analyse de l'épilepsie photosensible (PEAT, Photossensitive Epilepsy Analysis Tool). PEAT est un outil sans frais pour déterminer si le contenu, la vidéo ou les animations de l'écran sont susceptibles de provoquer des crises d'épilepsie. Tous les contenus n'ont pas besoin d'être évalués par PEAT, mais avec des transitions rapides ou clignotantes entre le mode clair et le mode sombre les couleurs d'arrière-plan doivent être évaluées, par sécurité.

Une autre question que vous devez vous poser au sujet de l'animation et du mouvement est de savoir si le mouvement de l'élément est essentiel pour comprendre le contenu ou les actions à l'écran. Si ce n'est pas essentiel, envisagez de supprimer tout mouvement, même les micro-mouvements, de l'élément que vous construisez ou concevez.

Supposons que vous pensiez que le mouvement de l'élément n'est pas essentiel, mais pourrait l'améliorer l'expérience globale de l'utilisateur, ou vous ne pouvez pas supprimer le mouvement pour une autre ou motif. Dans ce cas, vous devez suivre les WCAG consignes relatives aux mouvements. Les consignes stipulent que vous devez créer une option pour que les utilisateurs puissent suspendre, arrêter ou masquer le mouvement pour: les éléments non essentiels en mouvement, clignotants ou défilants qui démarrent automatiquement, durent plus de cinq secondes et font partie d'autres pages éléments.

Mettre en pause, arrêter ou masquer le mouvement

Mettre en veille, arrêter ou masquer à votre page pour permettre aux internautes de désactiver l'animation de mouvement. Vous pouvez le faire au niveau de l'écran ou de l'élément.

Par exemple, supposons que votre produit numérique comporte de nombreuses animations. Envisagez d'ajouter un bouton d'activation/de désactivation JavaScript accessible pour permettre aux utilisateurs de contrôler leur expérience. Lorsque le bouton bascule « désactivé le mouvement », toutes les animations sont figées sur cet écran et toutes les autres.

Utiliser des requêtes média

En plus d'être sélectif dans vos animations, donner à vos utilisateurs des options mettre en pause, arrêter, masquer le mouvement et éviter les boucles d'animation infinies envisagez également d'ajouter une requête média axée sur les mouvements. Vos utilisateurs peuvent ainsi plus de choix en ce qui concerne ce qui s’affiche à l’écran.

@prefers-reduced-motion

Comme les requêtes multimédias axées sur les couleurs du module "color", la requête multimédia @prefers-reduced-motion vérifie les paramètres de système d'exploitation de l'utilisateur liés à l'animation.

Interface utilisateur des paramètres d'affichage de macOS, avec l'option "Réduire les mouvements" activée

Un utilisateur peut définir des préférences d'affichage pour réduire les mouvements. Ces paramètres sont différents selon les systèmes d'exploitation, et peuvent être présentés de façon positive ou négative. Avec @prefers-reduced-motion, vous pouvez concevoir un site qui respecte ces préférences.

Navigateurs pris en charge

  • Chrome: 74 <ph type="x-smartling-placeholder">
  • Edge: 79 <ph type="x-smartling-placeholder">
  • Firefox: 63 <ph type="x-smartling-placeholder">
  • Safari: 10.1. <ph type="x-smartling-placeholder">

Source

Sous macOS et Android, l'utilisateur active ce paramètre pour réduire les mouvements. Sous macOS, l'utilisateur peut réduire les mouvements dans Paramètres > Accessibilité > Affichage. Le paramètre d'Android est Supprimer les animations. Sous Windows, ce paramètre est encadré positif sur Afficher les animations, qui est activé par défaut. Un utilisateur doit activer pour réduire les mouvements.

Comme illustré dans l'ensemble d'exemples suivant, vous pouvez également coder toutes vos animations pour qu'elles s'arrêtent en moins de cinq secondes, au lieu d'être lues en boucle infinie.

Amélioration progressive du mouvement

En tant que concepteurs et développeurs, nous avons beaucoup de choix à faire, y compris les états de mouvement par défaut et la quantité de mouvements à afficher. Revenons au dernier exemple concernant le mouvement.

Supposons que nous décidions que l'animation n'est pas nécessaire pour comprendre le contenu à l'écran. Dans ce cas, nous pouvons choisir de définir l'état par défaut sur l'animation de mouvement réduite plutôt que sur la version de mouvement complète. Les animations sont désactivées, sauf si les utilisateurs demandent spécifiquement des animations.

Nous ne pouvons pas prédire quel niveau de mouvement causera des problèmes pour les personnes atteintes convulsions, troubles vestibulaires et autres troubles visuels. Même une petite quantité de mouvement sur l'écran peut déclencher des vertiges, une vision trouble, ou pire. Dans la section Dans l'exemple suivant, aucune animation n'est définie par défaut.

Requêtes média superposées

Vous pouvez utiliser plusieurs requêtes média pour offrir encore plus de choix aux utilisateurs. utiliser @prefers-color-scheme, @prefers-contrast et @prefers-reduced-motion l'ensemble de ces données.

Laisser les utilisateurs choisir

Même s'il peut être amusant d'intégrer de l'animation à nos produits numériques pour séduire utilisateurs, il est essentiel de se rappeler que certaines personnes seront affectées par ces conceptions. La sensibilité au mouvement peut affecter n’importe qui, d’une légère inconfort à causer une maladie débilitante ou une crise d'épilepsie.

Vous pouvez utiliser un certain nombre d’outils différents pour permettre à l’utilisateur de décider ce qui lui convient le mieux pour eux, plutôt que de deviner à quel point le mouvement est trop important. Par exemple, ajoutez un activer ou désactiver l'animation sur votre site ou dans votre application Web. Envisagez d'utiliser désactivé par défaut.

Testez vos connaissances

Testez vos connaissances sur l'accessibilité des mouvements et des animations.

Que pouvons-nous créer qui reflète les paramètres du système d'exploitation pour le mouvement ?

@prefers-reduced-motion
Oui. Cette requête média vous permet de déterminer la quantité de mouvements à utiliser en fonction des paramètres d'affichage d'un utilisateur. Ces paramètres diffèrent selon les systèmes d'exploitation. Envisagez donc d'implémenter un choix pour les mouvements en plus de cette requête média.
Boutons d'activation/de désactivation JavaScript
Pas tout à fait. Les boutons permettent à l'utilisateur de faire un choix après avoir accédé à votre site Web, mais ne peuvent pas lire ses paramètres.