moving-content-pausable

Un contenu qui bouge de lui-même devrait pouvoir être mis en pause, arrêté ou masqué

manualWCAG 2.2.2 (A)confiance : lowgravité : moderateoperable

Pose la question, pour les éléments animés au chargement de la page pendant plus de cinq secondes ou sans fin, de savoir si le mouvement peut être mis en pause, arrêté ou masqué.

Applicabilité. Éléments dont une animation est en cours au début de l’analyse, une animation CSS, une transition CSS ou une animation lancée par un script, sur une timeline temporelle (et non pilotée par le défilement), qui sont affichés, et dont l’animation dure plus de cinq secondes depuis son début (son délai et chaque itération) ou ne se termine jamais. Un tel mouvement a démarré sans que l’utilisateur l’ait demandé. Sans getAnimations d’un navigateur (jsdom), rien n’est applicable.

Attendu. Le critère WCAG 2.2.2 demande qu’un contenu en mouvement, clignotant ou défilant qui démarre automatiquement, dure plus de cinq secondes et est présenté en parallèle à d’autres contenus puisse être mis en pause, arrêté ou masqué, sauf si le mouvement est essentiel. Savoir si un contrôle le permet, et si le mouvement est essentiel, revient à une personne : chaque élément donne donc lieu à une question (cantTell), une seule fois, quel que soit le nombre d’animations qu’il exécute.

Ce que rapporte un constat.

reasonCode : MOVING_CONTENT_LOOPS pour une animation qui ne se termine jamais, MOVING_CONTENT_OVER_5S pour une animation qui se termine après plus de cinq secondes.
animations : les animations de l’élément, jusqu’à cinq, chacune avec son kind (css-animation, css-transition ou script), son name (le nom de l’animation ou la propriété en transition, '' s’il n’y en a pas) et son endTime, en millisecondes depuis son début, null lorsqu’elle ne se termine jamais.

Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.

Exemples

can't tell

<style>@keyframes slide { to { transform: translateX(40px) } }</style>
<p style="animation: slide 2s linear infinite">Breaking news</p>

Le paragraphe bouge de lui-même sans fin dès le chargement de la page ; une personne vérifie qu’un contrôle permet de le mettre en pause, de l’arrêter ou de le masquer.

Comment vérifier

Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.

`MOVING_CONTENT_LOOPS`

Chargez la page et observez l’élément indiqué par le rapport ; son animation démarre d’elle-même et ne s’arrête jamais.
Cherchez un moyen de le mettre en pause, de l’arrêter ou de le masquer. Il est souvent à côté du contenu, comme un bouton pause sur un diaporama, mais il peut se trouver n’importe où dans la page, comme un réglage qui arrête les animations. Essayez-le à la souris et au clavier (atteignez-le avec Tab, appuyez sur Entrée ou Espace).
Vérifiez si le mouvement s’arrête réellement ou si le contenu est masqué, et que cela dure.
S’il n’y a pas de contrôle, déterminez si le mouvement est essentiel (le retirer changerait le sens) ou s’il s’agit d’un indicateur de chargement affiché seul.

Réussite. Un contrôle utilisable au clavier met en pause, arrête ou masque le mouvement, où qu’il se trouve dans la page, ou le mouvement est essentiel.

Échec. Le contenu continue de bouger et rien dans la page qui soit utilisable au clavier ne le met en pause, ne l’arrête ou ne le masque, ce qui ne respecte pas le critère WCAG 2.2.2.

`MOVING_CONTENT_OVER_5S`

Chargez la page et observez l’élément indiqué par le rapport ; son animation démarre d’elle-même et dure plus de cinq secondes.
Cherchez un moyen de le mettre en pause, de l’arrêter ou de le masquer. Il est souvent à côté du contenu, comme un bouton pause sur un diaporama, mais il peut se trouver n’importe où dans la page, comme un réglage qui arrête les animations. Essayez-le à la souris et au clavier (atteignez-le avec Tab, appuyez sur Entrée ou Espace).
Vérifiez si le mouvement s’arrête réellement ou si le contenu est masqué, et que cela dure.
S’il n’y a pas de contrôle, déterminez si le mouvement est essentiel (le retirer changerait le sens) ou s’il s’agit d’un indicateur de chargement affiché seul.

Réussite. Un contrôle utilisable au clavier met en pause, arrête ou masque le mouvement, où qu’il se trouve dans la page, ou le mouvement est essentiel.

Échec. Le contenu continue de bouger et rien dans la page qui soit utilisable au clavier ne le met en pause, ne l’arrête ou ne le masque, ce qui ne respecte pas le critère WCAG 2.2.2.

Voir le code source