Dans chaque page web, chaque contenu en mouvement ou clignotant est-il contrôlable par l’utilisateur ?
Un carrousel qui défile en boucle, une bannière qui clignote, un texte défilant sans fin : pour une personne souffrant de troubles de l’attention ou de troubles cognitifs, ces contenus rendent la page illisible. Pour certaines personnes épileptiques, un clignotement prolongé peut déclencher une crise. Un mouvement qu’on ne peut pas arrêter, c’est du contenu qu’on ne peut pas lire.
La règle est directe : tout contenu en mouvement ou clignotant déclenché automatiquement doit soit durer moins de 5 secondes, soit être contrôlable via un mécanisme explicite. Ce mécanisme peut être un bouton pour mettre en pause et relancer, un bouton pour masquer et réafficher, ou un bouton pour afficher la totalité du contenu sans animation.
Attention au piège le plus courant : suspendre le mouvement uniquement pendant la prise de focus (via animation-play-state: paused sur :focus, par exemple) ne satisfait pas le critère. Dès que l’utilisateur quitte l’élément, le mouvement reprend. Le contrôle doit persister jusqu’à ce que l’utilisateur décide explicitement de relancer.
Le bouton de contrôle doit lui-même être accessible : atteignable au clavier, avec un intitulé compréhensible et un contraste suffisant. Un bouton « Pause » visuellement présent mais inatteignable via Tab ne remplit pas le critère.
2 tests pour confirmer que les contenus en mouvement peuvent être mis en pause
Mécanisme de contrôle des contenus en mouvement automatique
- Repérez tous les contenus en mouvement déclenchés automatiquement au chargement ou à l’affichage : images animées (GIF, SVG animé), effets CSS (
animation,transitionen boucle), scripts (carrousels auto-play, bandeaux défilants, loaders décoratifs). - Pour chaque contenu identifié, vérifiez qu’au moins une de ces conditions est remplie :
- La durée totale du mouvement est inférieure à 5 secondes ;
- Un mécanisme accessible permet d’arrêter et de relancer le mouvement ;
- Un mécanisme accessible permet de masquer puis de réafficher le contenu ;
- Un mécanisme accessible permet d’afficher tout le contenu sans mouvement.
- Vérifiez que le mécanisme est atteignable au clavier, possède un intitulé compréhensible, et que la mise en pause via la prise de focus seule n’est PAS le seul moyen de contrôle. Le test est validé si chaque contenu en mouvement satisfait au moins une condition.
Mécanisme de contrôle des contenus clignotants automatiques
- Repérez tous les contenus clignotants déclenchés automatiquement : images dont la visibilité alterne (GIF multi-frames), textes ou icônes dont la visibilité est commutée via CSS (
visibility,opacity) ou JavaScript en boucle. - Pour chaque contenu identifié, vérifiez qu’au moins une de ces conditions est remplie :
- La durée totale du clignotement est inférieure à 5 secondes ;
- Un mécanisme accessible permet d’arrêter et de relancer le clignotement ;
- Un mécanisme accessible permet de masquer puis de réafficher le contenu ;
- Un mécanisme accessible permet d’afficher l’intégralité du contenu sans clignotement.
- Vérifiez que la mise en pause via la prise de focus seule n’est PAS le seul mécanisme disponible. Exception : les barres de progression ne peuvent pas être stoppées par nature — le critère est non applicable pour ces éléments. Le test est validé si chaque contenu clignotant satisfait au moins une condition.
Exemples
❌ Non conforme : Bandeau défilant en boucle sans contrôle
<div class="ticker">
<p style="animation: scroll 10s linear infinite;">
Dernières actualités — Conférence le 15 avril — Inscriptions ouvertes —
</p>
</div>Le texte défile en boucle infinie sans aucun bouton d’arrêt. Un utilisateur souffrant de troubles de l’attention ne peut pas lire le reste de la page pendant que ce contenu bouge dans son champ visuel. La propriété infinite signale immédiatement en audit que la durée dépasse 5 secondes et qu’un mécanisme de contrôle est obligatoire.
✅ Conforme : Bandeau défilant avec bouton Pause accessible
<div class="ticker-wrapper">
<button
id="ticker-btn"
aria-label="Mettre en pause le bandeau d'actualités"
onclick="toggleTicker()">
Pause
</button>
<div class="ticker" id="ticker-content">
<p>Dernières actualités — Conférence le 15 avril — Inscriptions ouvertes —</p>
</div>
</div>
<script>
let paused = false;
function toggleTicker() {
const el = document.getElementById('ticker-content');
const btn = document.getElementById('ticker-btn');
paused = !paused;
el.style.animationPlayState = paused ? 'paused' : 'running';
btn.setAttribute(
'aria-label',
paused
? 'Relancer le bandeau d’actualités'
: 'Mettre en pause le bandeau d’actualités'
);
btn.textContent = paused ? 'Lecture' : 'Pause';
}
</script>Le bouton est placé avant le contenu animé dans l’ordre du DOM : il est le premier élément atteint au clavier. L’aria-label se met à jour selon l’état, ce qui informe les lecteurs d’écran du résultat de l’action. L’animation reste stoppée après activation et ne reprend que sur action explicite de l’utilisateur — pas seulement pendant le focus.
❌ Non conforme : GIF clignotant en boucle infinie
<img src="promo-flash.gif" alt="Promotion Flash -50%">Un GIF dont les frames alternent entre deux états contrastés crée un effet de clignotement. S’il boucle indéfiniment et dure plus de 5 secondes, aucun mécanisme de contrôle n’est présent. L’utilisateur ne peut pas le stopper. Selon la fréquence, ce contenu peut également poser un problème au regard du critère 13.7 sur les effets de flash dangereux.
✅ Conforme : Animation CSS courte — exemptée par la durée
<div role="status" class="notification">
<p class="fade-in">Votre message a été envoyé.</p>
</div>
<style>
.fade-in {
animation: fadeIn 0.4s ease-in forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>L’animation dure 0,4 seconde : bien en dessous du seuil de 5 secondes. Aucun mécanisme de contrôle n’est requis. La valeur forwards garantit que l’animation ne boucle pas — l’élément reste visible dans son état final.
Astuces et pièges
⚠️ La pause sur :focus n’est pas un mécanisme valide
C’est l’erreur la plus fréquente en audit. Certains développeurs appliquent animation-play-state: paused sur :focus et considèrent le critère satisfait. Ce n’est pas le cas : dès que le focus quitte l’élément, le mouvement reprend. Le RGAA exige un mécanisme persistant activé délibérément par l’utilisateur, pas une suspension conditionnelle à la présence du focus.
⚠️ Les barres de progression sont non applicables
Une barre de chargement ne peut pas être stoppée par nature : arrêter l’animation reviendrait à arrêter le processus qu’elle représente. Le critère 13.8 est non applicable pour ces éléments. En revanche, un carrousel décoratif habillé en barre de progression reste soumis au critère.
💡 Le bouton de contrôle doit lui-même passer l’audit
Un bouton Pause non atteignable au clavier, sans contraste suffisant, ou avec un intitulé vide ne résout rien. Vérifiez que le contrôle respecte les critères relatifs aux couleurs et à la navigation clavier. La bonne pratique : placer le bouton immédiatement avant le contenu animé dans l’ordre du DOM.
⚠️ prefers-reduced-motion ne remplace pas le mécanisme RGAA
Respecter la préférence système prefers-reduced-motion est une excellente pratique, mais ce n’est pas ce que le critère 13.8 évalue. La vérification porte sur la page elle-même, indépendamment des réglages système. Un site peut satisfaire prefers-reduced-motion et échouer au critère 13.8 si aucun bouton explicite n’est présent pour les utilisateurs dont le système ne remonte pas cette préférence.
⚠️ Les animations déclenchées au scroll sont aussi concernées
Une classe CSS ajoutée dynamiquement via un IntersectionObserver (bibliothèques AOS, ScrollReveal, etc.) déclenche une animation au moment de l’affichage de l’élément. C’est bien un déclenchement automatique « lors de l’affichage d’un contenu » au sens du critère. Si ces animations durent plus de 5 secondes sans mécanisme de contrôle, le test 13.8.1 est en échec.
Questions fréquentes
Quand un carrousel déclenché au clic est-il soumis au critère RGAA 13.8 ?
Non. Le critère 13.8 cible les contenus déclenchés automatiquement — au chargement ou à l’affichage d’un contenu. Un carrousel qui n’avance que si l’utilisateur clique sur « Suivant » n’est pas concerné. En revanche, si le carrousel démarre automatiquement à l’ouverture de la page, il est soumis au critère dès que sa durée dépasse 5 secondes.
Comment auditer concrètement le critère RGAA 13.8 sur le contenu en mouvement ?
Chargez la page et observez immédiatement ce qui bouge ou clignote sans action de votre part. L’onglet Animations de Chrome DevTools liste les animations actives. Pour chaque élément repéré : mesurez la durée (si < 5 s, non applicable), puis cherchez un bouton de contrôle. Vérifiez qu’il est atteignable via Tab, qu’il a un intitulé explicite, et que l’animation reste stoppée après activation.
Quelle règle RGAA s'applique à un GIF animé qui boucle trois fois puis s'arrête ?
Oui, si la durée totale est inférieure à 5 secondes. Le calcul : nombre de frames × durée par frame × nombre de répétitions. Un GIF de 2 frames à 0,5 s par frame répété 3 fois dure 3 secondes : conforme sans mécanisme de contrôle. Au-delà de 5 secondes, un mécanisme explicite devient obligatoire.
Quelle est la différence entre le critère 13.7 et le critère 13.8 ?
Le critère 13.7 concerne les effets de flash dangereux pour les personnes épileptiques (fréquence > 3 Hz sur une surface > 21 824 px). Le critère 13.8 concerne le contrôle utilisateur sur tout mouvement ou clignotement, quelle que soit la fréquence. Les deux peuvent s’appliquer simultanément : un bandeau clignotant lentement (1 Hz) est hors du champ du critère 13.7 mais reste soumis au critère 13.8.
Dans quels cas un lien vers une version sans animations satisfait-il le critère RGAA 13.8 ?
Oui, à condition que la page alternative soit réellement équivalente en contenu et accessible. Mais c’est rarement la solution la plus robuste : elle multiplie les URLs à maintenir et fragmente l’expérience. Un bouton directement sur la page est plus direct, moins coûteux à maintenir, et ne déplace pas le problème sur une autre URL.