Animation et mouvement

Vous est-il déjà arrivé d'être en voiture, en bateau ou en avion et d'avoir soudainement l'impression que le monde tournait autour de vous ? Ou d'avoir une migraine si forte que les animations sur votre téléphone ou votre tablette, créées pour vous "faire plaisir", 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.

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

Au-delà du déclenchement de vertiges, de nombreuses personnes trouvent le contenu en mouvement, clignotant ou défilant distrayant. Les personnes atteintes de ADHD et d'autres troubles du déficit de l'attention peuvent être tellement distraites par vos éléments animés qu'elles oublient pourquoi elles ont consulté votre site Web ou votre application en premier lieu.

Dans ce module, nous examinerons quelques moyens d'aider les personnes souffrant de tous types de troubles déclenchés par le mouvement.

Contenu clignotant et en mouvement

Lorsque vous créez une animation et un mouvement, demandez-vous si le mouvement de l'élément est excessif. Par exemple, les couleurs qui clignotent du foncé 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é, et que ce phénomène est plus fréquent chez les femmes et les jeunes.

Les consignes des WC0}WCAG sur le clignotement déconseillent les éléments suivants :

• Clignotements plus de trois fois par seconde
• Clignotements en dessous du seuil général de clignotement et du seuil de clignotement rouge.

Ces clignotements peuvent, au mieux, entraîner une incapacité à utiliser une page Web ou, au pire, provoquer une maladie.

Pour tout 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 qui permet de déterminer si le contenu, la vidéo ou les animations de l'écran sont susceptibles de provoquer des crises. Il n'est pas nécessaire d'évaluer tout le contenu avec PEAT, mais le contenu qui contient des clignotements ou des transitions rapides entre des couleurs d'arrière-plan claires et foncées doit être évalué, par mesure de 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 le cas, envisagez de supprimer tout mouvement, même les micro-mouvements, de l'élément que vous créez ou concevez.

Supposons que vous pensez 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 pouvez pas supprimer le mouvement pour une autre raison. Dans ce cas, vous devez suivre les consignes des WCAG sur le mouvement . Les consignes indiquent que vous devez créer une option permettant aux utilisateurs de mettre en pause, d'arrêter ou de masquer les mouvements 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 éléments de la page.

Mettre en pause, arrêter ou masquer le 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. Vous pouvez le faire au niveau de l'écran ou de l'élément.

Supposons, par exemple, que votre produit numérique comporte de nombreuses animations. Envisagez d'ajouter un bouton JavaScript accessible pour permettre aux utilisateurs de contrôler leur expérience. Lorsque le bouton est activé sur "Mouvement désactivé", toutes les animations sont figées sur cet écran et sur tous les autres.

Utiliser des requêtes média

En plus d'être sélectif quant à vos animations, de donner à vos utilisateurs la possibilité de mettre en pause, d'arrêter ou de masquer les mouvements, et d'éviter les boucles d'animation infinies, vous pouvez également envisager d'ajouter une requête média axée sur le mouvement. Cela donne encore plus de choix à vos utilisateurs en ce qui concerne ce qui s'affiche à l'écran.

@prefers-reduced-motion

Semblable aux requêtes média axées sur la couleur dans le module de couleur, la @prefers-reduced-motion requête média vérifie les paramètres du système d'exploitation de l'utilisateur liés à l'animation.

Un utilisateur peut définir des préférences d'affichage pour réduire le mouvement. Ces paramètres varient d'un système d'exploitation à l'autre et peuvent être formulés de manière positive ou négative. Avec @prefers-reduced-motion, vous pouvez concevoir un site qui respecte ces préférences.

Sur macOS et Android, l'utilisateur active le paramètre pour réduire le mouvement. Sur macOS, un utilisateur peut définir l'option Réduire les mouvements dans Paramètres > Accessibilité > Écran. Le paramètre d'Android est Supprimer les animations. Sur Windows, le paramètre est formulé de manière positive comme Afficher les animations, qui est activé par défaut. Un utilisateur doit désactiver ce paramètre pour réduire le mouvement.

Pour garantir l'accessibilité aux personnes qui ont des difficultés avec le mouvement, même les animations plus courtes que le seuil de cinq secondes décrit dans les consignes WCAG 2.0 AA doivent être abordées avec prudence. La méthode la plus fiable consiste à donner aux utilisateurs qui ont indiqué une préférence pour un mouvement réduit un contrôle exclusif sur les animations, en leur permettant de lancer et d'arrêter l'animation à l'aide de commandes dédiées, telles qu'un bouton de lecture et un bouton de pause.

Amélioration progressive du 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. Examinez à nouveau le dernier exemple sur 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éduit au lieu de la version de mouvement complet. Sauf si les utilisateurs demandent spécifiquement des animations, celles-ci sont désactivées.

Nous ne pouvons pas prédire le niveau de mouvement qui causera des problèmes aux personnes souffrant de crises, de troubles vestibulaires et d'autres troubles visuels. Même une petite quantité de mouvement à l'écran peut provoquer des étourdissements, une vision floue ou pire. Par conséquent, dans l'exemple suivant, nous n'utilisons aucune animation par défaut.

Requêtes média en couches

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

Laisser vos utilisateurs choisir

Bien qu'il puisse être amusant d'intégrer des animations à nos produits numériques pour ravir les 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, allant d'un léger inconfort à une maladie ou une crise invalidante.

Vous pouvez utiliser différents outils pour permettre à l'utilisateur de décider ce qui lui convient le mieux, plutôt que de deviner la quantité de mouvement qui est excessive. Par exemple, ajoutez un bouton pour activer ou désactiver l'animation sur votre site ou votre application Web. Envisagez de définir ce bouton sur Désactivé par défaut.