Résumé

  • La recommandation WCAG 2.1 du W3C, publiée en 2018, prévoit que l'animation déclenchée par une interaction puisse être désactivée lorsqu'elle ne porte aucune fonction ou information essentielle.
  • Le premier projet public de Media Queries Level 5, en mars 2020, décrit prefers-reduced-motion avec les valeurs reduce et no-preference. Une technique du WAI montre comment supprimer un effet pour la première, ou partir d'une page immobile et réserver l'effet à la seconde.

La carte faisait une roulade chaque fois que l'on appuyait sur Suivant. Son auteur voyait une transition pleine de vie. Le lecteur voulait surtout découvrir la carte suivante sans regarder une petite acrobatie. Il avait déjà exprimé son choix dans les réglages du système ou du navigateur. La question pour le site devenait simple : allait-il écouter la personne qui utilisait la page, ou refaire son numéro ?

La recommandation WCAG 2.1 du 5 juin 2018 avait donné à ce choix une place explicite. Son critère 2.3.3 porte sur l'animation de mouvement déclenchée par une interaction : le lecteur doit pouvoir la désactiver lorsqu'elle ne contribue pas de manière essentielle au fonctionnement ou à l'information. Le critère laisse aux éditeurs le soin de dessiner leur interface. Il établit que la chorégraphie d'un bouton ne passe pas avant la possibilité de lire.

Le premier projet public de Media Queries Level 5, daté du 3 mars 2020, a décrit le moyen pour CSS de recevoir ce choix : prefers-reduced-motion. Deux valeurs y figurent. reduce signale qu'une préférence pour moins de mouvement a été communiquée au système. no-preference signifie qu'aucune préférence ne lui a été communiquée; cette valeur est même fausse lorsque l'on teste la fonctionnalité comme une simple condition booléenne. Le silence du lecteur n'est pas un rappel pour trois pirouettes supplémentaires.

Le navigateur transmet ainsi une indication issue de l'environnement du lecteur. Le site garde la main sur ses règles CSS. Il peut remplacer la carte sans déplacement, réduire l'amplitude d'une transition, ou décider que son effet n'apparaîtra que dans certaines conditions. Une demande réglée une fois par le lecteur peut traverser plusieurs sites; chaque éditeur doit encore décider quoi faire de ses propres animations. C'est précisément là que se joue l'expérience.

Le projet de travail du 18 décembre 2021 conserve cette distinction entre reduce et no-preference dans la famille des fonctionnalités liées aux préférences. L'historique des publications du W3C place le premier projet public en 2020 et les versions de travail suivantes jusqu'en 2021. Au fil de ces textes, la demande du lecteur reçoit une forme assez claire pour être employée dans une feuille de style.

La technique C39 publiée par WAI, actualisée en janvier 2026, propose deux portes d'entrée. On peut écrire une animation puis la retirer dans @media (prefers-reduced-motion: reduce). On peut aussi commencer par une présentation fixe et n'ajouter le mouvement que sous @media (prefers-reduced-motion: no-preference). Pour notre carte gymnaste, la seconde approche force une bonne question de rédaction : que raconte la roulade que la carte posée calmement ne raconte pas déjà ?

C39 vise ici le mouvement CSS lancé par une action du lecteur, un clic ou un défilement par exemple. Le texte WAI rappelle que certains effets peuvent distraire ou donner la nausée. La règle WCAG de 2018 réserve une place au mouvement essentiel. Un lecteur n'a donc pas à expliquer son état de santé à chaque site pour que sa préférence influence une transition décorative.

Le détail décisif se trouve dans la carte qui remplace l'ancienne. Si elle surgit sans mouvement, le lecteur doit toujours reconnaître que le contenu a changé et trouver aussitôt où reprendre sa lecture. Cette exigence pousse l'équipe à dessiner un état d'arrivée solide, plutôt qu'à compter sur un bond spectaculaire pour annoncer la nouveauté. La préférence du lecteur devient ainsi un bon exercice de mise en page pour tout le monde : une carte lisible d'abord, une fantaisie éventuelle ensuite.

Le choix artistique reste dans les mains de l'éditeur, et l'indication de mouvement arrive jusqu'à lui par le navigateur. La carte suivante doit apparaître et rester lisible. Si elle peut le faire assise, pourquoi lui imposer un tour de piste à chaque clic ? La page garde sa personnalité; elle apprend simplement à écouter avant de danser.