L'utilisation de l'animation sur le Web est un excellent moyen d'apporter une touche unique à votre conception et peut-être d'ajouter un peu de plaisir à votre expérience utilisateur. Les animations bien conçues sont informatives ; ils permettent à l'utilisateur de savoir que quelque chose s'est produit ou sont utilisés pour guider l'utilisateur vers une nouvelle tâche qui nécessite son attention. Idéalement, les animations seraient utiles, prévisibles et cohérentes.
D'un autre côté, une mauvaise utilisation des animations peut distraire, détourner l'attention de la tâche en cours, ou peut-être laisser quelqu'un mal à l'aise et désorienté.
Et au fait, lorsque nous parlons d'"animation", nous incluons essentiellement tout ce qui bouge sur l'écran ; Images .gif , vidéo, carrousels et tout élément de page qui se déplace sur n'importe quel type d'interaction avec la souris ou le clavier.
Animation et accessibilité
Comment l'ajout d'animations à un site Web, une application ou même un système d'exploitation peut-il avoir un impact négatif sur les personnes handicapées ? Voici quelques façons :
- Lorsqu'il s'agit d'une personne ayant une déficience cognitive, mettre en place une scène ou une activité très animée à la fin d'une action, ou avoir d'autres éléments mobiles à l'écran, comme une vidéo ou une publicité en lecture automatique, peut être très distrayant. A tel point qu'ils peuvent ressentir le besoin de recommencer la tâche.
- Pour les personnes sensibles au mal des transports ou aux problèmes vestibulaires, certaines animations peuvent provoquer des nausées ou des vertiges.
Qu'est-ce qui constitue une "mauvaise" expérience d'animation ?
Tout le monde aura une réaction différente, ou peut-être aucune réaction du tout, à un morceau d'animation. Pour ceux qui éprouvent une réaction négative, comment éviter de créer une telle expérience ?
Voici quelques points à prendre en compte lors de la création d'animations :
- Taille du mouvement . Des animations petites ou compactes, comme un spinner de chargement, sont utiles. Cependant, s'il y a quelque chose qui se déplace d'un côté de l'écran à l'autre, en particulier des éléments de contenu critiques, cela peut être problématique. Gardez les animations petites et utiles.
- Orientation et vitesse . Les effets de parallaxe et le scroll jacking, qui ont tendance à impliquer des éléments de premier plan et d'arrière-plan se déplaçant à des vitesses différentes, ou des objets se déplaçant dans des directions différentes de celles attendues, peuvent causer des problèmes. Permettez à l'utilisateur de faire défiler à son propre rythme.
- Distance . Pour les animations qui semblent s'étendre sur de grandes longueurs d'espace, bien que seulement la taille d'un écran d'ordinateur, peuvent parfois déclencher une expérience négative. Encore une fois, il est préférable de garder les animations petites et compactes afin d'éviter une expérience utilisateur négative. Évitez d'animer de longues longueurs de contenu.
- Clignotant . Évitez les contenus stroboscopiques ou clignotants qui peuvent être préjudiciables à toute personne susceptible de faire des crises. Si un tel contenu est requis, réduisez le contenu clignotant à pas plus de trois fois par période d'une seconde.
Comment assurer une animation accessible
Examinons quelques façons de créer une expérience accessible et inclusive grâce à l'utilisation de l'animation :
- Concevez des animations subtiles . Utiliser des animations d'une manière subtile et utilisée comme un moyen de guider l'utilisateur peut être très utile. Essayez de minimiser les animations qui modifient la vitesse, le mouvement et le contrôle par défaut auxquels les utilisateurs sont habitués. Par exemple, lors de l'ajout d'un article à un panier, une animation peut indiquer que cette activité est terminée. Un autre exemple pourrait être lors de la soumission d'un formulaire dynamique, animer un message d'erreur ou de réussite pour attirer l'attention des utilisateurs sur ce domaine.
- Les animations doivent être facilement compréhensibles et prévisibles . Conformément au thème "subtil", l'animation devrait idéalement être utilisée de manière à ce que les gens puissent comprendre la signification de l'animation. Un exemple dont; le spinner de chargement classique. Cela aide à informer l'utilisateur que des progrès sont en cours et qu'un processus d'arrière-plan est en cours d'exécution. Il transmet essentiellement le message : "Veuillez patienter pendant que nous traitons vos données".
- Concevez un état "pas d'animation" . Il est possible pour les utilisateurs de "désactiver" les animations au niveau du système d'exploitation. Par exemple, les paramètres d'accessibilité de macOS comportent l'option "Réduire le mouvement". Nous en discuterons plus en détail sous peu.
- Autoriser la mise en pause des animations . S'il y a des vidéos d'arrière-plan, des curseurs de carrousel ou même des images GIF animées à l'écran, fournissez un moyen de mettre ces types de contenu en pause. Construisez le contrôle de pause dans chaque élément, mais s'il y a de nombreuses animations différentes à arrêter, envisagez de concevoir et d'implémenter un contrôle global "Pause de toutes les animations". Vos utilisateurs sensibles au mal des transports vous remercieront.
L'animation est quelque chose qui peut être inattendu, et quand elle est là, nous n'avons généralement pas beaucoup de contrôle sur l'expérience. Comment pouvons-nous garantir, lorsque l'animation est utilisée, que nous créons également une expérience accessible ?
La prefers-reduced-motion
Un outil de la boîte à outils du développeur que nous pouvons utiliser est la requête multimédia CSS prefers-reduced-motion préféré. Cette requête multimédia permet aux développeurs de créer un état "pas d'animation" (ou moins d'animation, selon vos besoins) pour les interfaces utilisateur.
Afin de donner le choix de vivre des animations à nos utilisateurs, macOS, iOS et Windows proposent un paramètre pour supprimer toutes les animations appelé "Réduire le mouvement". Lorsque ce paramètre est activé dans les paramètres du système d'exploitation, le code de la prefers-reduced-motion se déclenche, permettant cet état "pas d'animation".
Voyons d'abord comment activer ce paramètre "Réduire le mouvement" dans macOS :
- Réglages
- Accessibilité
- Affichage
- Cochez la case "Réduire le mouvement"
Et dans Windows 10 :
- Réglages
- Rechercher, "Paramètres système avancés"
- Paramètres de performances
- Décochez la case "Animer les champs et les éléments à l'intérieur des fenêtres"
Avec cet ensemble, tout code dans la requête multimédia prefers-reduced-motion s'exécutera.
Codage d'un état "pas d'animation"
Lorsque nous voulons supprimer ou désactiver un élément d'animation dans un site Web, nous pouvons ajouter le CSS à une requête prefers-reduced-motio .
Par exemple, s'il y avait une transition définie sur tous les éléments de button pour animer la propriété background-color sur :hover et :focus , le CSS pourrait ressembler à :
button { background-color: Crimson; color: White; transition: background-color 0.25s; } button:focus, button:hover { background-color: FireBrick; }
Et si, par exemple, l'utilisateur final ne voulait pas attendre .25 seconde pour que la transition se termine pour une raison quelconque, nous pourrions fournir un état "pas d'animation" en utilisant la requête multimédia prefers-reduced-motion :
@media (prefers-reduced-motion) { button { transition: none; } } Et c'est tout! En incluant ce morceau de CSS, toutes les animations de transition définies sur le sélecteur de button seront supprimées lorsque l'utilisateur aura sélectionné l'option "Réduire le mouvement" dans les paramètres de son système d'exploitation.
Prise en charge du navigateur
Au moment d'écrire ces lignes, Safari, Chrome et Firefox prennent en charge cette requête multimédia avec d'autres navigateurs et à la traîne. Cependant, ne laissons pas cela nous empêcher de pérenniser notre code. Les personnes à l'avenir qui auront besoin de ce paramètre et s'y fier vous remercieront.
En utilisant la prefers-reduced-motion , nous permettons à nos utilisateurs de supprimer toutes les animations qu'ils pourraient trouver gênantes ou discordantes. N'oubliez pas que la clé ici est de fournir une expérience utilisateur utilisable et confortable afin que les gens puissent apprécier, revenir et partager le contenu que nous créons.
Critères de réussite WCAG
Cela revient à 2.3.3 Animation from Interactions qui indique :
"L'animation de mouvement déclenchée par l'interaction peut être désactivée, sauf si l'animation est essentielle à la fonctionnalité ou à l'information transmise."