Animations déclenchées par les interactions

Silktide vous invite à vérifier que les animations de mouvement déclenchées par l'interaction utilisateur - parallaxe au défilement, transformations au survol, transitions au clic - peuvent être désactivées, sauf si le mouvement est essentiel. Il s'agit du critère de succès 2.3.3 (niveau AAA) des .

Il s'agit d'un : déterminer si le mouvement est essentiel, si un interrupteur existe et si prefers-reduced-motion est implémenté correctement nécessite une personne interagissant 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 - vertiges, nausées, migraines - chez les personnes qui y sont sensibles. Les systèmes d'exploitation proposent une préférence "Réduire les animations" précisément pour cette raison. Les sites qui l'ignorent obligent ces utilisateurs à soit supporter le mouvement, soit abandonner la page.

Ceci est différent de Mettre en pause, arrêter, masquer (2.2.2), qui couvre les animations que la page lance d'elle-même. 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, donnez le focus, cliquez. Relevez tout mouvement qui déplace du contenu dans l'espace (parallaxe, entrées en glissement, rebonds, transitions de type retournement de page). Les simples fondus d'opacité ne sont pas concernés.
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 doivent s'arrêter.
Si le site ne respecte pas la préférence du système, cherchez un contrôle sur la page qui désactive les animations non essentielles. Confirmez qu'il fonctionne et ne masque pas de contenu.
Les mouvements essentiels à la fonction (un indicateur de chargement, une barre de progression, un aperçu dans un éditeur d'animations) sont exempts - consignez ce jugement lorsque vous approuvez.

Comment corriger

Privilégiez la prise en compte 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 une interaction.
Évitez la parallaxe et les grandes transitions spatiales lorsqu'un effet plus simple suffit.

Si la page ne comporte aucun mouvement déclenché par une interaction, ou si chacun de ces mouvements peut être désactivé (ou est essentiel), le constat.

Comment Silktide teste cela

Silktide ne peut pas observer le mouvement dans le temps à partir d'une exploration statique, ce contrôle affiche donc une invite d'examen par page décrivant ce qu'il faut vérifier. Aucun outil courant du marché n'automatise 2.3.3 - il n'existe pas de règle ACT du W3C pour cela, et ni axe ni Siteimprove ne proposent de contrôle pour ce critère.