Animation et mouvement

Vous est-il déjà arrivé de conduire en voiture, en bateau ou en avion et vous avez soudainement senti que le monde tourne ? Ou avez-vous déjà eu une migraine si grave que les animations sur votre téléphone ou votre tablette, créées pour vous « réjouir », vous rendent soudainement malade ? Ou peut-être avez-vous toujours été sensible à tous les types de mouvements ? Ce sont des exemples de différents types de troubles vestibulaires.

Vers 40 ans, plus de 35% des adultes auront souffert d'une dysfonction vestibulaire. Cela peut entraîner des vertiges temporaires, des vertiges dus à une migraine ou une déficience vestibulaire plus permanente.

En plus de déclencher le vertige, de nombreuses personnes trouvent que le contenu mobile, clignotant ou défilant est gênant. Les personnes souffrant de TDAH et d'autres troubles du déficit de l'attention peuvent être si distraites par vos éléments animés qu'elles oublient pourquoi elles ont même accédé à votre site Web ou application en premier lieu.

Dans ce module, nous examinerons certaines des méthodes permettant de mieux accompagner les personnes souffrant de tous types de troubles déclenchés par le mouvement.

Contenu clignotant et mobile

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

Les directives sur le flash des WCAG recommandent ce qui suit:

• Clignote plus de trois fois en une seconde
• Clignotement en dessous du seuil général de flash et de rouge.

Ces flashs peuvent au mieux entraîner l'impossibilité d'utiliser une page Web ou, au pire, entraîner des maladies.

En cas de mouvement extrême, il est impératif de le tester à l'aide de l'outil d'analyse de l'épilepsie photosensible (PEAT). PEAT est un outil sans frais permettant de 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 les contenus qui présentent des transitions rapides ou clignotantes entre des couleurs d'arrière-plan clair et sombre doivent être évalués, par mesure de sécurité.

Une autre question que vous devriez vous poser à propos 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, pensez à 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 qu'il pourrait améliorer l'expérience globale de l'utilisateur, ou que vous ne puissiez pas supprimer le mouvement pour une autre raison. Dans ce cas, vous devez suivre les directives sur les mouvements des WCAG. Les consignes indiquent que vous devez créer une option permettant aux utilisateurs de mettre en pause, d'arrêter ou de masquer le mouvement: éléments non essentiels qui se déplacent, clignotent ou défilent qui démarrent automatiquement, durent plus de cinq secondes et font partie d'autres éléments de la page.

Mettre en pause, arrêter ou masquer un mouvement

Ajoutez un mécanisme de mise en pause, d'arrêt ou de masquage à votre page pour permettre aux utilisateurs de désactiver les animations de mouvement potentiellement problématiques. Cette opération peut s'effectuer 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 JavaScript accessible pour permettre aux utilisateurs de contrôler leur expérience. Lorsque le bouton est défini sur "Mouvement désactivé", 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 au sujet de vos animations, de donner aux utilisateurs la possibilité de mettre en pause, d'arrêter et de masquer le mouvement, et d'éviter les boucles d'animation infinies, vous pouvez également ajouter une requête multimédia axée sur le mouvement. Cela offre encore plus de choix à vos utilisateurs concernant ce qui s'affiche à l'écran.

@prefers-reduced-motion

Comme les requêtes média axées sur la couleur dans le module de couleur, la requête multimédia "@prefers-reduced-motion" vérifie les paramètres de l'OS de l'utilisateur liés à l'animation.

L'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 cadrés de manière positive ou négative. Avec @prefers-reduced-motion, vous pouvez concevoir un site qui respecte ces préférences.

Sous macOS et Android, l'utilisateur active ce paramètre pour réduire les mouvements. Sous macOS, un utilisateur peut définir Réduire le mouvement dans Paramètres > Accessibilité > Affichage. Le paramètre d'Android est Supprimer les animations. Sous Windows, ce paramètre est affiché positivement sous la forme Show animations (Afficher les animations), qui est activé par défaut. L'utilisateur doit désactiver ce paramètre pour réduire les mouvements.

Comme illustré dans la série d'exemples suivante, vous pouvez également coder toutes vos animations pour qu'elles s'arrêtent dans un délai de cinq secondes maximum, au lieu de les lire en boucle infinie.

Amélioration progressive pour le mouvement

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

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 en mouvement réduit au lieu de la version en mouvement complet. À moins que les utilisateurs ne demandent spécifiquement des animations, celles-ci sont désactivées.

Nous ne pouvons pas prédire quel niveau de mouvement causera des problèmes aux personnes souffrant de crises d'épilepsie, de troubles vestibulaires ou autres. Même un faible mouvement sur l'écran peut déclencher des vertiges, une vision floue ou pire. Ainsi, dans l'exemple suivant, aucune animation n'est définie par défaut.

Requêtes média en couches

Vous pouvez utiliser plusieurs requêtes média afin d'offrir encore plus de choix à vos utilisateurs. Utilisons ensemble @prefers-color-scheme, @prefers-contrast et @prefers-reduced-motion.

Laissez le choix à vos utilisateurs

Bien qu'il puisse être amusant d'intégrer des animations dans nos produits numériques pour satisfaire les utilisateurs, il est essentiel que nous nous souvenions que certaines personnes seront concernées par ces conceptions. La sensibilité au mouvement peut toucher n'importe qui, qu'il s'agisse d'une légère gêne ou d'une maladie ou d'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, plutôt que de deviner à quel point le mouvement est trop important. Par exemple, ajoutez un bouton d'activation pour activer ou désactiver l'animation sur votre site ou dans votre application Web. Vous pouvez désactiver ce bouton par défaut.

Testez vos connaissances

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