C'est quoi
Un contenu « en mouvement » au sens du RGAA 13.8, c'est tout élément qui se déplace, clignote ou défile automatiquement dès le chargement de la page.
Exemples courants :
- Carrousels et sliders défilant en boucle
- Bandeaux de texte défilants
- Animations CSS ou JavaScript en boucle infinie
- GIF animés en lecture automatique
Le critère 13.8 distingue deux cas. Premier cas : un contenu en mouvement ou clignotant déclenché automatiquement (carrousel, animation en boucle, GIF) doit pouvoir être mis en pause, arrêté ou masqué. Deuxième cas : un contenu mis à jour automatiquement (fil d'actualité, compteur) doit lui aussi être contrôlable. Le contrôle n'est pas exigé si le mouvement s'arrête de lui-même en moins de 5 secondes ET ne se répète pas, ou s'il est déclenché par une action de l'utilisateur. Une boucle infinie de 3 secondes reste non conforme.
Qui est touché
- Les personnes ayant des troubles de l'attention (TDAH, dyslexie) : un élément qui bouge en périphérie du regard perturbe la lecture du contenu principal.
- Les personnes épileptiques photosensibles : les clignotements peuvent déclencher des crises (les fréquences élevées sont aussi couvertes par le critère 13.7).
- Les personnes utilisant un lecteur d'écran : un carrousel qui tourne en arrière-plan peut interrompre la synthèse vocale à chaque nouvelle diapositive.
- Les personnes avec des troubles vestibulaires : certaines animations de défilement ou de parallaxe provoquent des vertiges.
Impact business
Un contenu en mouvement incontrôlable n'est pas un simple inconfort - il peut rendre la page inutilisable.
Pour un utilisateur de lecteur d'écran, un carrousel qui avance automatiquement toutes les 3 secondes provoque une annonce vocale répétée qui couvre le reste du contenu. Impossible de lire un article ou de remplir un formulaire normalement.
Pour les personnes sensibles aux mouvements, la page devient pénible à consulter après quelques secondes.
La correction est rapide - un bouton pause suffit dans la majorité des cas - mais l'absence de ce contrôle touche des profils très différents d'utilisateurs.
Comment le détecter
- Audit Mynto : le scan détecte les éléments animés (carrousels, transitions CSS en boucle) et vérifie la présence d'un contrôle accessible.
- Manuel : charge la page et observe pendant 10 secondes. Y a-t-il un élément qui se déplace, défile ou clignote automatiquement ? Si oui, cherche un bouton pause, stop ou masquer clairement identifié et accessible au clavier.
- Inspecte le code : repère les attributs
autoplay, les intervalles JavaScript (setInterval) et les animations CSS avecanimation-iteration-count: infinite. Une animation en boucle est concernée quelle que soit la durée d'un cycle.
Comment corriger
<div class="carousel">
<!-- Défilement automatique, aucun contrôle proposé -->
<div class="slide">...</div>
<div class="slide">...</div>
</div><div class="carousel" role="region" aria-label="Carrousel">
<div class="slide">...</div>
<div class="slide">...</div>
<!-- Bouton pause visible, focusable au clavier, intitulé explicite -->
<!-- Un script doit réellement arrêter le défilement du carrousel -->
<button type="button" id="carousel-pause">Mettre en pause le carrousel</button>
</div>La correction minimale consiste à ajouter un bouton pause, stop ou masquer : visible, focusable au clavier et avec un intitulé explicite.
Deux approches possibles :
- Bouton pause/lecture : le plus courant sur les carrousels. Bascule entre lecture automatique et arrêt. L'intitulé doit changer en conséquence (
aria-label="Reprendre le carrousel"quand en pause). - Limiter la durée : si l'animation s'exécute une seule fois et se termine en moins de 5 secondes, elle est hors du périmètre du critère. Cela ne vaut que pour une animation non répétée.
Sur WordPress, la plupart des plugins de carrousel (Swiper, Slider Revolution, Smart Slider) proposent une option de démarrage manuel ou un bouton pause dans leurs réglages. Active cette option avant de toucher au code.
Pour les animations CSS en boucle, respecte aussi la media query prefers-reduced-motion : les utilisateurs qui ont activé la réduction des animations dans leur OS doivent voir une version statique ou ralentie.
@media (prefers-reduced-motion: reduce) {
.carousel { animation: none; }
}
Cet exemple coupe l'animation pour ces utilisateurs, mais il ne dispense pas du bouton de contrôle visible dans la page.
Questions fréquentes
Un GIF animé en boucle est-il concerné par le critère 13.8 ?
Oui, si le GIF dure plus de 5 secondes et démarre automatiquement. La solution la plus simple est de le remplacer par une image statique avec un bouton pour lancer l'animation sur demande. Tu peux aussi proposer un contrôle global pour arrêter tous les GIF animés de la page.
La media query prefers-reduced-motion suffit-elle pour valider le critère ?
Non. prefers-reduced-motion est une bonne pratique complémentaire, mais elle ne suffit pas. Le critère 13.8 exige un contrôle visible directement dans la page, indépendamment des préférences système de l'utilisateur.
Un carrousel qui s'arrête au survol de la souris respecte-t-il le critère ?
Non. S'arrêter au survol ne suffit pas : les utilisateurs clavier et lecteur d'écran ne peuvent pas survoler un élément. Il faut un mécanisme accessible au clavier, typiquement un bouton pause.
Le critère s'applique-t-il aux vidéos en lecture automatique ?
En partie. Le son déclenché automatiquement est couvert par le critère 13.9. Une vidéo muette qui défile ou se déplace relève du 13.8. Dans les deux cas, un contrôle utilisateur est obligatoire.
À lire aussi
Cette erreur est-elle sur ton site ?
Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.