Animation et mouvement

Vous êtes-vous déjà retrouvé en voiture, en bateau ou en avion et avez-vous soudainement eu l'impression que le monde tournait autour de vous ? Ou avez-vous déjà eu une migraine si forte que les animations sur votre téléphone ou votre tablette, créées pour vous "faire plaisir", vous ont soudainement rendu malade ? Ou peut-être avez-vous toujours été sensible à tous les types de mouvements ? Voici des exemples de différents types de troubles vestibulaires.

À l'âge de 40 ans, plus de 35 % des adultes auront déjà souffert d'une forme de dysfonctionnement vestibulaire. Cela peut entraîner un vertige temporaire, un vertige induit par une migraine ou un trouble vestibulaire plus permanent.

Au-delà du vertige, 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 allons examiner quelques moyens de mieux aider les personnes souffrant de troubles déclenchés par le mouvement.

Contenu avec clignotement et en mouvement

Lorsque vous créez une animation ou un mouvement, demandez-vous si le mouvement de l'élément est excessif. Par exemple, les couleurs qui clignotent en passant du sombre au clair ou les mouvements rapides sur l'écran peuvent provoquer des crises d'épilepsie chez les personnes atteintes d'épilepsie photosensible. On estime que 3 % des personnes atteintes d'épilepsie souffrent de photosensibilité, qui est plus fréquente chez les femmes et les jeunes.

Les consignes du WCAG sur le clignotement déconseillent les éléments suivants :

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

Ces flashs peuvent, au mieux, empêcher l'utilisateur d'utiliser une page Web ou, au pire, entraîner 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 permettant d'identifier 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 ceux qui contiennent des transitions clignotantes ou rapides entre des couleurs de fond claires et sombres doivent l'être, par précaution.

Une autre question à vous poser concernant l'animation et le 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 créez 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 utilisateur globale, ou que vous ne pouvez pas supprimer le mouvement pour une autre raison. Dans ce cas, vous devez suivre les consignes du WCAG sur le mouvement. Les consignes indiquent que vous devez proposer aux utilisateurs une option permettant de mettre en pause, d'arrêter ou de masquer les éléments non essentiels qui bougent, clignotent ou défilent, qui démarrent automatiquement, qui durent plus de cinq secondes et qui font partie d'autres éléments de la page.

Mettre en pause, arrêter ou masquer les mouvements

Ajoutez un mécanisme de 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.

Par exemple, supposons que votre produit numérique inclut de nombreuses animations. Envisagez d'ajouter un bouton bascule JavaScript accessible pour permettre aux utilisateurs de contrôler leur expérience. Lorsque le bouton est basculé 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. Vos utilisateurs disposent ainsi d'encore plus de choix concernant ce qui s'affiche à l'écran.

@prefers-reduced-motion

Semblable aux requêtes média axées sur les couleurs dans le module de couleur, la requête média @prefers-reduced-motion vérifie les paramètres de l'OS 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 selon les systèmes d'exploitation 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 animations dans Paramètres > Accessibilité > Écran. Le paramètre Android est Supprimer les animations. Sur Windows, le paramètre est formulé de manière positive : 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é préférer un mouvement réduit un contrôle exclusif sur les animations, en leur permettant de les lancer et de les arrêter à l'aide de commandes dédiées, telles qu'un bouton de lecture et un bouton de pause, respectivement.

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 l'ampleur du mouvement à afficher. Revenons sur le 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 à mouvement réduit au lieu de la version à mouvement complet. Les animations sont désactivées, sauf si les utilisateurs les demandent spécifiquement.

Nous ne pouvons pas prédire le niveau de mouvement qui causera des problèmes aux personnes souffrant de troubles épileptiques, vestibulaires et autres troubles visuels. Même un léger mouvement à l'écran peut déclencher des vertiges, une vision floue ou pire. Ainsi, dans l'exemple suivant, nous choisissons par défaut de ne pas utiliser d'animation.

Requêtes média par calques

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

Autoriser vos utilisateurs à choisir

Bien qu'il puisse être amusant d'intégrer des animations dans 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, d'un léger inconfort à une maladie ou une crise invalidante.

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