3.4 Mouvement et lecture

Cette page a été traduite avec l'aide d'une IA. L'original en anglais fait foi.

La lecture est un acte moteur. L'œil ne balaie pas une ligne d'un mouvement continu ; il bondit par saccades et se pose en fixations, et la compréhension se produit dans les atterrissages. Tout ce qui bouge sur la page entre en concurrence avec ces atterrissages. Le mouvement est le plus puissant signal d'attention dont dispose le système visuel — une alarme évolutive que la volonté ne peut pas désactiver — et c'est pourquoi les éléments animés à proximité du texte sont si corrosifs pour la lecture, et pourquoi un texte qui bouge lui-même est à peine lisible.

Le web moderne est saturé de mouvement : animations d'entrée, décors en parallaxe, apparitions déclenchées au défilement, carrousels à avancement automatique. Une partie relève du métier. Une grande partie n'est que décoration aux dépens du lecteur. Et pour un groupe de lecteurs, c'est pire qu'une distraction.

Troubles vestibulaires : le mouvement comme atteinte

Pour les personnes atteintes de troubles vestibulaires — des affections de l'oreille interne et du système de l'équilibre — le mouvement à l'écran peut déclencher vertiges, nausées et maux de tête qui persistent longtemps après avoir détourné le regard. Les déclencheurs sont précis et bien décrits par les utilisateurs concernés : de grands éléments glissant à travers la fenêtre, des effets de zoom et de mise à l'échelle, des couches de parallaxe se déplaçant à des vitesses différentes, et des animations liées au défilement qui découplent ce que voit l'œil de ce qu'a fait la main. Ce n'est pas de l'agacement ; c'est une réaction physique, plus proche du mal des transports que du dégoût. Une page peut rendre un lecteur malade.

Les WCAG traitent ce point dans le critère 2.3.3 (Animation résultant d'interactions) : toute animation de mouvement déclenchée par une interaction doit pouvoir être désactivée, sauf si elle est essentielle. C'est un critère AAA, ce qui sous-estime son importance — pour la population concernée, il ne s'agit pas d'une amélioration mais de la différence entre utilisable et inutilisable.

L'interrupteur du lecteur : prefers-reduced-motion

Tous les grands systèmes d'exploitation offrent désormais un réglage « réduire les animations », et la requête média prefers-reduced-motion l'expose aux feuilles de style et aux scripts. La respecter est une exigence dure de la pratique responsable, non une amélioration progressive, pour une raison simple : les personnes qui l'ont activée l'ont fait parce que le mouvement leur nuit. Ignorer ce réglage, c'est ignorer un aménagement médical déclaré.

Bien le respecter exige davantage que d'éteindre les animations :

• Remplacez le déplacement par l'opacité. Un fondu communique « ceci est apparu » sans rien translater à travers l'écran ; les fondus enchaînés sont largement tolérés là où les glissements et les zooms ne le sont pas.
• Désactivez entièrement la parallaxe et les effets liés au défilement en mode mouvement réduit — il n'existe pas de version réduite de la parallaxe qui vaille d'être conservée.
• Appliquez la préférence dans les animations pilotées par JavaScript, pas seulement en CSS ; la requête média est interrogeable depuis un script, et les bibliothèques d'animation peuvent y être conditionnées.
• N'interprétez pas « réduire » comme « supprimer tout changement d'état ». Les transitions instantanées peuvent elles aussi désorienter ; l'objectif est d'éliminer le mouvement spatial gratuit, pas le retour d'information.

Un texte en mouvement est un texte illisible

Un texte qui défile, s'égrène, glisse ou clignote met purement et simplement en échec la machinerie des saccades et des fixations. Les lecteurs malvoyants, les lecteurs utilisant une loupe d'écran (pour qui une cible mobile peut sortir de la région agrandie au milieu d'un mot), les lecteurs dyslexiques ou ayant des difficultés d'attention, et les lecteurs qui lisent simplement lentement sont tous punis de manière disproportionnée : le texte s'en va avant qu'ils l'aient fini.

Le critère 2.2.2 des WCAG (Mettre en pause, arrêter, masquer) — un critère de niveau A, l'échelon le plus bas et le moins négociable — exige que tout contenu en mouvement, clignotant ou défilant qui démarre automatiquement et dure plus de cinq secondes dispose d'un mécanisme pour le mettre en pause, l'arrêter ou le masquer. Le contrevenant de loin le plus courant est le carrousel à avancement automatique, surtout lorsqu'il porte du texte. Un carrousel qui tourne sur minuterie garantit que certains lecteurs ne finiront jamais une diapositive ; le bouton « pause », quand il existe, est régulièrement minuscule, dépourvu d'étiquette, ou découvert seulement après la frustration qu'il aurait dû prévenir. Si un contenu compte, il mérite l'immobilité. S'il tourne automatiquement, le design a déjà concédé qu'il ne compte pas — et il ne devrait avancer que sous le contrôle du lecteur.

Les effets de texte déclenchés au défilement méritent une suspicion particulière : paragraphes qui apparaissent en fondu à leur entrée dans la fenêtre, titres assemblés lettre par lettre, texte épinglé pendant que l'arrière-plan défile. Chacun insère une animation entre le lecteur et les mots. Le lecteur est venu lire ; faites que les mots soient là.

Un mouvement qui respecte la lecture

Rien de tout cela ne plaide pour un web statique. Le mouvement a un travail légitime : indiquer qu'une action a été enregistrée, montrer où est parti un panneau refermé, attirer l'œil vers un changement qu'il aurait autrement manqué. Le mouvement mis à ce service est bref, petit, rare, et jamais appliqué au texte courant. Un jeu de tests utile :

• Le mouvement transmet-il quelque chose dont le lecteur a besoin, ou décore-t-il quelque chose qui plaît au designer ?
• Se trouve-t-il près d'un texte — ou sur un texte — que quelqu'un est en train de lire ?
• S'exécute-t-il une fois, brièvement, ou tourne-t-il en boucle ?
• Respecte-t-il complètement prefers-reduced-motion ?

Bref, utile, à l'écart du texte en cours de lecture, respectueux de l'utilisateur : le mouvement qui passe ces tests mérite sa place.

Pourquoi ce chapitre est nouveau

La première édition est antérieure aux conditions qui rendent ce chapitre nécessaire. En 2005, CSS ne savait pas animer ; tout mouvement sérieux exigeait Flash, et son débat d'accessibilité tournait autour du clignotement et du risque d'épilepsie, pas de l'atteinte vestibulaire. La requête prefers-reduced-motion n'est apparue dans les navigateurs qu'en 2017, le critère WCAG 2.3.3 est arrivé avec la version 2.1 en 2018, et le style maison du web moderne, saturé d'animations déclenchées au défilement, est plus jeune encore. Le mouvement est devenu bon marché ; la discipline de la retenue est ce que ces recommandations peuvent désormais ajouter.

En CSS

/* Default: entrance combines movement and fade */
.reveal {
  animation: slide-fade-in 300ms ease-out;
}

@keyframes slide-fade-in {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}

/* Reduced motion: keep the fade, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    animation: fade-in 200ms ease-out;
  }

  @keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* Coarse safety net for unaudited animation — a last
   resort, not the practice; it also removes the fades
   and feedback worth keeping */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Recommandations

• Respectez prefers-reduced-motion partout — en CSS comme en JavaScript — comme une exigence dure.
• En mode mouvement réduit, remplacez les glissements et les zooms par des fondus ; supprimez purement et simplement la parallaxe et les effets liés au défilement.
• N'animez jamais le texte courant. Lecture et mouvement sont ennemis.
• Satisfaites WCAG 2.2.2 : tout ce qui bouge automatiquement pendant plus de cinq secondes exige une commande visible de pause, d'arrêt ou de masquage.
• Évitez les carrousels à avancement automatique pour tout contenu signifiant ; s'il en existe un, laissez le lecteur le piloter.
• Gardez le mouvement utile bref, petit et sans boucle, et tenez-le à l'écart du texte en cours de lecture.
• Testez les pages clés avec le réglage système de réduction des animations activé ; traitez toute animation spatiale survivante comme un bogue.

Pour aller plus loin

• MDN : prefers-reduced-motion
• web.dev : prefers-reduced-motion
• WCAG 2.2, Comprendre : 2.3.3 Animation résultant d'interactions
• WCAG 2.2, Comprendre : 2.2.2 Mettre en pause, arrêter, masquer