Mettre en pause, arrêter, masquer

Ce que le critère demande

Pour tout contenu qui remplit simultanément les trois conditions suivantes : (a) se déplace, clignote, défile ou se met à jour automatiquement, (b) démarre automatiquement, (c) dure plus de cinq secondes et s’affiche en parallèle d’un autre contenu, l’utilisateur doit disposer d’un mécanisme pour le mettre en pause, l’arrêter ou le masquer. Il en va de même pour le contenu mis à jour automatiquement sans mouvement (fils d’actualité en direct, tableaux de score, discussions).

Exceptions : lorsque le mouvement est essentiel à l’activité (une vidéo en cours de lecture, un tutoriel d’animation), et lorsque le contenu est le seul élément à l’écran (un indicateur de chargement avant l’apparition du contenu).

Comment le satisfaire

• Ajoutez un bouton Pause/Lecture visible à chaque carrousel, diaporama ou bannière à défilement automatique. Faites-en le premier élément focalisable du widget carrousel.
• Mettez automatiquement en pause les carrousels au survol et lors du focus clavier — mais l’utilisateur doit toujours pouvoir les arrêter complètement.
• Pour les bandeaux défilants et les fils de cours boursiers, exposez un bouton de pause sur la même ligne, d’une taille minimale de 24×24 pixels.
• Pour les tableaux de bord à actualisation automatique (Kibana, Grafana, sports en direct), proposez à l’utilisateur un sélecteur d’intervalle d’actualisation incluant une option « Actualisation manuelle uniquement ».
• Les GIF animés en boucle infinie doivent être remplacés par des éléments <video> exposant les contrôles natifs, ou par un modèle de lecture au clic.

Échecs courants

• Les carrousels de bannières qui défilent toutes les trois à cinq secondes sans contrôle de pause — toujours l’échec 2.2.2 le plus fréquent lors des audits.
• Les arrière-plans vidéo en lecture automatique sans contrôles, en particulier sur les pages marketing.
• Les bandeaux de sites d’actualité défilant horizontalement sans bouton de pause.
• Les illustrations SVG animées sur les pages d’accueil qui boucle indéfiniment sans moyen de les arrêter.
• Les notifications toast s’empilant en continu depuis un fil en direct sans possibilité de les couper.

axe et Lighthouse peuvent détecter <marquee> et certaines violations de prefers-reduced-motion, mais ne peuvent pas identifier un carrousel piloté par JavaScript sans contrôles. Une revue manuelle est nécessaire.

Pourquoi c’est important

Le contenu en mouvement automatique est l’un des modèles les plus handicapants sur le web. Il détourne l’attention des utilisateurs souffrant de troubles de l’attention (TDAH, certains troubles anxieux, syndrome post-commotion cérébrale), il oblige les utilisateurs de lecteur d’écran à perdre constamment leur place au fur et à mesure que les nœuds du DOM se mettent à jour, et il rend la lecture impossible pour les utilisateurs malvoyants qui suivent le texte lentement. Un bouton de pause est l’une des améliorations d’accessibilité les moins coûteuses et les plus efficaces qu’une équipe marketing puisse apporter.