Cette traduction n’a pas encore été relue par la rédaction. La version allemande fait foi. Deutsche Fassung
Accessibilité
Pourquoi les contenus en mouvement sur les sites web doivent-ils disposer d'une fonction de pause ?
Le contenu en mouvement a besoin d'une fonction de pause car le mouvement attire inévitablement le regard : À côté d'un carrousel d'images en cours, les personnes ayant des troubles de l'attention ou de la lecture ne peuvent pas saisir le texte réel. Les WCAG exigent donc : Tout ce qui se déplace automatiquement, clignote ou roule et dure plus de cinq secondes doit pouvoir être mis en pause, arrêté ou masqué. Cela s'applique également à la mise à jour automatique du contenu comme les téléscripteurs.
Carrousels, téléscripteurs et vidéos d'arrière-plan
Les plus courants sont les carrousels de page d'accueil, qui changent l'image toutes les quelques secondes, les vidéos d'arrière-plan derrière le titre principal et les téléscripteurs d'actualités. Pour beaucoup de visiteurs, c'est une épreuve, pour certains un vrai obstacle : Celui qui lit lentement perd la phrase quand l'image en dessous change. Celui qui a un trouble de l'attention ne peut pas détacher le regard du mouvement. La solution est simple — un bouton de pause visible directement sur l'élément en mouvement, utilisable à la souris et au clavier. Mieux encore : Le carrousel ne change pas du tout automatiquement, mais seulement quand les visiteurs eux-mêmes feuillettent.
Comment notre service de contrôle teste le contenu en mouvement
L'exécution automatique reconnaît de manière fiable les éléments de clignotement et de défilement obsolètes dans le code source — ils sont considérés comme une violation de ce critère. Les carrousels modernes et les vidéos d'arrière-plan, en revanche, sont des composants techniquement normaux dont le comportement ne se montre que lors de la visualisation : Il s'exécute pendant plus de cinq secondes, il y a un bouton de pause, il est accessible au clavier. Ces questions sont jugées par une personne. Le rapport de contrôle énumère chaque critère WCAG individuellement — réussi, violé, à examiner manuellement ou non automatisable — et rend ainsi visible quelle partie de l'énoncé a été mesurée et quelle partie est ouverte.
Exemples
Carrousel sans rupture
<div class="slider" data-autoplay="true" data-interval="4000">…</div><div class="slider" data-autoplay="true" data-interval="4000">
<button type="button" aria-pressed="false" class="pause">Anhalten</button>
…
</div>Mouvement qui fonctionne plus de cinq secondes et démarre automatiquement nécessite l'arrêt, l'arrêt ou la dissimulation.
- Énumérez sur votre page d'accueil tout ce qui se déplace automatiquement : carrousel, vidéo, ticker, vignettes animées.
- Dotez chacun de ces éléments d'un bouton pause visible, accessible également au clavier.
- Configurez les carrousels sur un défilement manuel — vos visiteurs décident eux-mêmes quand passer à l'image suivante.
- Supprimez les éléments blink et marquee du code source sans remplacement ; ils datent d'une autre époque du web.
- Respectez le paramètre du système d'exploitation « Réduire les mouvements » et désactivez les animations dans ce cas.
