Accessibilité et animations, un duo pas toujours gagnant
Les animations sur une interface web peuvent grandement faciliter la compréhension d’un message, apporter une touche de dynamisme et d’originalité. Elles sont de plus en plus présentes sous la forme d’animations CSS, vidéos ou bien encore de GIFs. Cependant, cette démultiplication des éléments animés peut entraîner une perte de lisibilité et devenir néfaste à la compréhension. Donc loin de sa fonction première. Nous allons voir pourquoi et comment il est essentiel de les utiliser de manière intelligente.
Aujourd’hui, dans un monde de sur-sollicitations, certains utilisateurs préfèrent avoir une expérience utilisateur allégée. Une expérience plus “sobre” et plus “statique” ou du moins avoir le contrôle sur un maximum d’éléments animés. C’est d’autant plus vrai pour certaines personnes atteintes d’un handicap, même temporaire.
Pour réduire ce potentiel inconfort et répondre à ce besoin d’accessibilité, il existe plusieurs moyens de personnaliser le niveau d’animation. Ainsi, il est possible de répondre indépendamment aux besoins de ceux qui acceptent les animations et ceux qui souhaitent les réduire.
Juste avant de commencer, il est bon de rappeler ce que nous entendons par “animations”. Dans cet article, nous catégoriserons comme “animations” tous les éléments qui donnent l’illusion de mouvement. Les changements de couleur, de flou ou d’opacité sont d’autres points que nous n’aborderons pas aujourd’hui.
Les préconisations du Web Content Accessibility Guidelines (WCAG).
Vous connaissez sûrement, mais il est bon de le rappeler, que le WCAG est aujourd’hui le référentiel international en termes d’accessibilité et des préconisations à respecter pour mettre ses interfaces web en conformité. Il s’agit d’un document complet qui régit un certain nombre de règles pour améliorer au maximum l’accessibilité d’un site web et favoriser une expérience fluide pour les personnes en situation de handicap, mais également pour tous les utilisateurs au sens large.
Et c’est notamment sur la base de certaines de ces recommandations que nous allons expliquer pourquoi les animations peuvent être un frein à l’expérience.
Pause / Stop / Hide donnons le contrôle aux utilisateurs.
Des carrousels automatiques, des logos ou des actualités qui défilent, etc. sont dès exemples d’animations que l’on retrouve sur la majorité des sites. Pourtant, ces éléments peuvent être perturbants pour les utilisateurs. Ces mouvements non contrôlés et non désirés peuvent entraîner des difficultés de lecture, faire « scintiller » la vue, entraîner une gêne ou fatigue.
Parmi toutes les recommandations du WCAG, on retrouve donc une recommandation visant à réduire les animations à lancement automatique.
N’importe quel contenu se lançant automatiquement, qui dure plus de cinq secondes et vivant en parallèle d’un autre contenu, doit pouvoir être mis en pause, arrêté ou caché par l’utilisateur.
Souvenez-vous, Google avec son navigateur Chrome avait été parmi les premiers à intervenir sur le sujet, il y a quelques années, en interdisant le lancement automatique de son (musique, vidéo en background, etc.) sans intervention de l’utilisateur.
Des recommandations apportent de nouvelles normes (et ne sont pas encore obligatoires).
Réduire les animations à l’essentiel.
Trop c’est trop ! Faire du bling bling ou simplement mettre des paillettes dans l’interface web n’apporte en général que peu d’éléments pour aider à la compréhension. Pourtant, ça reste courant sur une même page d’avoir plusieurs animations sans réelle valeur ajoutée.
C’est donc un autre principe évoqué par le WCAG qui consiste à réfléchir à deux fois avant d’implémenter une animation.
L’idée n’est pas de les bannir, c’est elles qui font vivre votre UI, mais de les réduire.
Les animations qui se lancent à la suite d’une action de l’utilisateur sont déconseillées, sauf si elles sont nécessaires au bon fonctionnement du site ou que cela bloque l’accès à l’information. Ce qu’il faut garder en tête, c’est qu’une action ne doit pas être intrusive et doit aider à la compréhension de ce qu’il se passe.
Pour reprendre le point dont nous parlions dans l’introduction, ces recommandations ne concernent que les animations qui imitent un mouvement ou en donnent l’impression. Les variations de couleur, de bordures ou d’opacité ne sont pas comptées ici puisqu’elles sont souvent au contraire nécessaires à la compréhension. Elles font partie du retour d’information envoyé à l’utilisateur.
C’est son choix et on le respecte : prefered-reduced-motion.
Ce qui nous intéresse dans cet article, c’est de tenir compte des préférences de l’utilisateur en termes d’animations. Il est bien évidemment possible d’intégrer des animations à vos interfaces, mais permettre à l’utilisateur de les désactiver reste indispensable.
D’ailleurs, est-ce que vous savez comment désactiver les animations de votre côté ?
Sur mac, par exemple, ça se passe ici :
Préférences systèmes → Accessibilité → Onglet Affichage → Réduire les animation
Comment réduire les animations sur mac
Le WCAG stipule bien que ces choix doivent être pris en compte car certaines animations peuvent causer des soucis à des personnes atteintes de diverses pathologies. L’utilisateur doit pouvoir désactiver ou non une section qui clignote ou des éléments qui bougent un peu trop rapidement pour qu’il puisse comprendre et accéder au contenu correctement.
Pour cela, il existe en CSS une media query appelée preferes-reduced-motion et qui permet de ne jouer des animations que si l’utilisateur ne les a pas désactivées.
Illustration de l’utilisation de prefers-reduced-motion
Il est aussi possible de limiter les mouvements initiés en Javascript puisque toutes les media queries sont accessibles depuis window comme ci-dessous.
Illustration d’une utilisation en Javascript
En faisant ça, les utilisateurs qui demanderont à Chrome de réduire les animations pendant leur navigation, ne verront pas celles que vous aurez encadrées par ces règles. Par exemple, lorsque l’utilisateur ferme une bannière de consentement à l’utilisation de cookies, l’animation de translation vers le bas peut avoir lieu, ou non.
Je veux un site qui « claque » !
Tous les sites dits “créatifs” dont l’essence même est basée sur des animations, du WebGL et autres, ne sont souvent plus rien sans leur aspect animé. Notre approche n’est pas de supprimer complètement toutes les animations, mais de réfléchir lors de la conception du site à proposer une version complètement statique qui permettra à tous d’accéder au même contenu.
Par exemple, il peut être intéressant de mettre une bannière ou une courte phrase informant l’utilisateur qu’il visionne une version minimaliste de l’expérience que vous vouliez proposer tout en lui permettant quand même d’accéder à l’expérience enrichie s’il le souhaite.
Que retenir de tout ça ?
Les animations aujourd’hui peuvent être de plus en plus denses. Que ce soit en CSS ou avec l’aide d’un peu de JavaScript on les trouve partout. Sans vouloir les retirer à tout prix, l’important est de les utiliser de manière intelligente. En se basant et en respectant le consentement de l’utilisateur, on peut offrir une expérience adaptée et personnalisée aux besoins de chacun. L’accessibilité est un sujet de front sur le web (sans jeu de mot), et les animations en font partie intégrante. Elles ne peuvent être négligées.