Animations et accessibilité : le mouvement réduit

Le mouvement guide l’œil, donne du rythme, fait sentir une matière. Pour une partie de vos visiteurs, il donne aussi le vertige, la nausée, ou les empêche de lire. Les règles qui les protègent sont peu nombreuses et précises : un réglage du système, deux critères des WCAG, les règles internationales d’accessibilité du web, et une limite sur les flashs.

Qui le mouvement gêne

• Les personnes atteintes d’un trouble vestibulaire, l’oreille interne qui tient l’équilibre. Une page qui glisse, zoome ou défile à plusieurs vitesses peut leur causer vertiges, nausées, maux de tête, parfois une migraine qui oblige à s’allonger (W3C). MDN cite le zoom et le déplacement de grandes surfaces parmi les déclencheurs.
• Les personnes qui ont un trouble de l’attention, des difficultés de lecture ou une déficience intellectuelle. Un élément qui bouge à côté du texte attire l’œil sans cesse et détourne de la lecture (W3C). Le mouvement gêne aussi les lecteurs d’écran.
• Les personnes épileptiques photosensibles, pour qui des flashs rapides peuvent déclencher une crise (W3C).

Les deux premiers publics ont chacun leur critère, que l’on confond souvent. Le troisième a une règle à part.

Le réglage « réduire les animations »

Windows, macOS, iOS et Android permettent de demander moins d’animations : « Effets d’animation » à désactiver sous Windows 11, « Réduire les animations » sur iPhone et sur Mac, « Supprimer les animations » sous Android. Les navigateurs transmettent ce choix aux pages, qui le lisent avec la requête CSS prefers-reduced-motion. Elle vaut reduce quand le visiteur l’a demandé, no-preference sinon, et fonctionne dans tous les navigateurs courants depuis janvier 2020 (MDN).

Le réglage demande moins de mouvement : on retire ce qui décore, on garde ce qui informe (web.dev). La méthode la plus sûre consiste à écrire vos animations sous la condition no-preference : seuls les visiteurs qui n’ont rien demandé les voient, et les autres reçoivent une page calme par défaut. Concrètement :

Le fondu reste permis : pour le critère 2.3.3, le W3C ne compte pas comme mouvement un changement d’opacité, de couleur ou de flou qui ne modifie ni la taille, ni la forme, ni la position d’un élément.

WCAG 2.3.3 : le mouvement que le visiteur déclenche

Ce qu’il demande. Une animation de mouvement déclenchée par une action du visiteur (faire défiler, cliquer, survoler) doit pouvoir être désactivée, sauf si elle est essentielle. Une animation est essentielle quand la retirer changerait le sens ou la fonction du contenu : l’aperçu d’un logiciel d’animation, par exemple.

À qui il sert. Aux personnes atteintes de troubles vestibulaires.

Son niveau. AAA, le plus exigeant des trois niveaux. Il est rarement exigé, mais il décrit précisément ce que ces personnes subissent.

Comment le tenir. Le W3C propose de respecter prefers-reduced-motion, en CSS ou en JavaScript, ou d’offrir sur le site un réglage qui coupe les animations. Pour ce critère, suivre le réglage du système est donc une réponse reconnue.

WCAG 2.2.2 : ce qui bouge tout seul

Ce qu’il demande. Tout contenu qui bouge, clignote ou défile doit pouvoir être mis en pause, arrêté ou masqué par le visiteur, s’il remplit trois conditions à la fois :

1. il démarre tout seul ;
2. il dure plus de cinq secondes ;
3. il s’affiche en même temps que d’autres contenus.

Seul un mouvement essentiel à l’activité y échappe. Le critère couvre aussi le contenu qui se met à jour tout seul, comme un fil d’actualité, sans délai de cinq secondes.

À qui il sert. Aux personnes qui ont un trouble de l’attention ou des difficultés de lecture, et à celles qui lisent lentement ou suivent mal ce qui bouge.

Son niveau. A, le premier. Il s’applique à tout ce que contient la page, décor compris : un seul élément qui bouge peut gêner l’usage de tout le reste (W3C).

Ce qu’il vise en pratique. Un carrousel automatique, un bandeau qui défile, un compteur qui tourne en boucle, une vidéo de fond qui tourne sans fin : tous remplissent les trois conditions. Une animation d’entrée de deux secondes, elle, n’est pas concernée.

Le mouvement réduit ne suffit pas ici. Le W3C ne range pas prefers-reduced-motion parmi les techniques qui satisfont 2.2.2. La personne que votre boucle distrait n’a pas forcément changé ce réglage, ni même appris qu’il existe. Il faut un moyen visible sur la page : la technique G4 du W3C décrit un bouton qui met en pause et reprend là où l’on s’était arrêté. Placez-le près du contenu qui bouge, donnez-lui un libellé clair (« Mettre la vidéo en pause »), et rendez-le utilisable au clavier.

En France, le RGAA, le référentiel d’accessibilité de l’administration, traduit ce critère en 13.8 : un mouvement déclenché automatiquement doit durer cinq secondes au plus, ou pouvoir être arrêté et relancé, masqué, ou remplacé par l’information sans mouvement, au moyen d’un bouton par exemple. Il précise qu’une pause obtenue seulement en posant le focus sur l’élément ne compte pas.

La parallaxe

La parallaxe fait défiler l’arrière-plan moins vite que le premier plan, pour donner de la profondeur. Le W3C la cite comme exemple type d’animation déclenchée par le défilement : souvent décorative, elle devrait pouvoir se désactiver.

Si vous en voulez :

• gardez une faible amplitude, sur une zone limitée plutôt que sur tout l’écran ;
• ne transformez pas le défilement vertical en mouvement horizontal, un cas que le W3C prend en exemple ;
• figez-la quand le visiteur a demandé moins d’animations ;
• vérifiez le texte posé dessus : il doit rester lisible à chaque position (voir la palette de couleurs).

Les flashs : trois par seconde au plus

Le critère 2.3.1 (niveau A) interdit tout ce qui flashe plus de trois fois en une seconde, sauf si les flashs restent sous des seuils précis de surface et d’intensité. Le rouge saturé est le plus dangereux (W3C). Le RGAA reprend la règle à son critère 13.7.

Pour une vidéo de fond, regardez-la en entier avant de la publier : un éclair, un néon qui grésille, une lumière stroboscopique, une suite de coupes rapides entre une image sombre et une image claire peuvent dépasser la limite. Coupez ou ralentissez le passage en cause.

Sur les sites que compose l’atelier de 29webs, la vidéo de fond s’efface quand le visiteur a demandé moins d’animations, et son affiche reste à l’écran.

En résumé : écrivez vos animations sous la condition no-preference, remplacez les glissés par des fondus, figez la parallaxe et les vidéos quand le mouvement réduit est demandé, et ajoutez un bouton pause à tout ce qui bouge seul plus de cinq secondes. Aucun flash plus de trois fois par seconde.