Animation déclenchée par les interactions

Silktide vous invite à vérifier que les animations de mouvement déclenchées par l’interaction de l’utilisateur — parallaxe au défilement, transformations au survol, transitions au clic — peuvent être désactivées, à moins que ce mouvement ne soit essentiel. Il s’agit du critère de réussite 2.3.3 des (niveau AAA).

Il s’agit d’un : déterminer si le mouvement est essentiel, s’il existe une commande pour l’activer/désactiver, et si prefers-reduced-motion est correctement pris en charge, nécessite qu’une personne interagisse avec la page. Silktide affiche une invite sur chaque page et une personne la confirme.

Pourquoi c’est important

Les mouvements déclenchés par le défilement, le survol ou le clic peuvent provoquer des troubles vestibulaires — étourdissements, nausées, migraines — chez les personnes qui y sont sensibles. Les systèmes d’exploitation offrent une préférence « Réduire les animations » précisément pour cette raison. Les sites qui l’ignorent obligent ces personnes à subir ces mouvements ou à abandonner la page.

Ceci est différent de Mettre en pause, arrêter, masquer (2.2.2), qui couvre les animations que la page démarre d’elle-même. Le 2.3.3 couvre les animations déclenchées par l’utilisateur.

Ce qu’il faut vérifier

Interagissez avec la page : faites défiler, survolez, placez le focus, cliquez. Relevez tout mouvement qui déplace le contenu dans l’espace (parallaxe, arrivées en glissant, rebonds, transitions de type « page qui se tourne »). Les simples fondus d’opacité ne comptent pas.
Activez le réglage du système d’exploitation « Réduire les animations » (ou émulez prefers-reduced-motion: reduce dans les outils de développement du navigateur) et recommencez. Les mouvements non essentiels devraient cesser.
Si le site ne respecte pas la préférence du système, cherchez une commande dans la page qui désactive les animations non essentielles. Confirmez qu’elle fonctionne et qu’elle ne masque pas de contenu.
Les mouvements essentiels à la fonction (un indicateur de chargement, une barre de progression, un aperçu dans un outil de création d’animations) sont exemptés — consignez ce jugement au moment d’approuver.

Comment corriger

Privilégiez le respect de prefers-reduced-motion en CSS et en JavaScript (techniques WCAG C39 et SCR40).
Ou fournissez une commande à l’échelle du site qui désactive les mouvements non essentiels déclenchés par les interactions.
Évitez la parallaxe et les grandes transitions spatiales lorsqu’un effet plus simple suffit.

Si la page n’a aucun mouvement déclenché par des interactions, ou si chaque mouvement de ce type peut être désactivé (ou est essentiel), le constat.

Comment Silktide le teste

Silktide ne peut pas observer les mouvements dans le temps à partir d’un crawl statique, donc cette vérification génère une invite d’examen par page décrivant ce qu’il faut vérifier. Aucun outil grand public n’automatise le 2.3.3 — il n’existe aucune règle ACT du W3C pour celui-ci, et ni axe ni Siteimprove ne proposent de vérification pour cela.