Les contenus animés de votre site — carrousels, bandeaux défilants, GIF animés — peuvent-ils être mis en pause ou arrêtés par l'utilisateur ?
Critère officiel 13.8 — Dans chaque page web, chaque contenu en mouvement ou clignotant est-il contrôlable par l’utilisateur ?
Pourquoi c'est important
Les contenus en mouvement permanent perturbent la concentration des personnes ayant des troubles de l'attention, des migraines ou des vertiges. Un bandeau d'actualités défilant en continu impose un mouvement parasite constant dans le champ de vision, rendant difficile la lecture du contenu statique de la page.
Exemples concrets
Ce qui est conforme
Le carrousel de la page d'accueil démarre automatiquement mais affiche un bouton « Pause » visible dès le chargement. En cliquant dessus, le carrousel s'arrête jusqu'à ce que l'utilisateur clique sur « Lecture ». Aucune animation ne force la distraction.
Ce qui pose problème
Le bandeau d'actualités défile en continu sans aucun contrôle disponible. Un usager avec des troubles de l'attention ou une migraine est constamment distrait par ce mouvement et ne peut pas lire tranquillement le reste de la page.
Comment agir
Pour tout contenu animé automatiquement, prévoyez un bouton Pause visible dès le chargement de la page. La meilleure pratique est d'arrêter l'animation par défaut et de proposer un bouton Lecture — l'inverse de ce que font la plupart des sites, mais la seule approche vraiment respectueuse. Appliquez cette règle aux carrousels, aux bandeaux défilants et aux GIF animés dans les actualités.
Règles clés
- Tout mouvement automatique de plus de 5 secondes doit avoir un contrôle pause/stop accessible au clavier.
- Le contrôle pause doit être placé AVANT le contenu animé dans le DOM — premier élément focusable lié à l'animation.
- Respecter prefers-reduced-motion : désactiver ou réduire les animations pour les utilisateurs qui ont activé cette préférence système.
- Un GIF animé peut être rendu accessible via un bouton toggle play/pause ou en proposant une image statique alternative.
- Les transitions CSS courtes (< 5 secondes, non en boucle) sont exemptées.
Erreurs fréquentes
- Carrousel en défilement automatique sans bouton pause accessible avant les slides
- Vidéo de fond (hero) en autoplay sans bouton pause
- Animation CSS en boucle infinie (animation: spin infinite) sans contrôle utilisateur
- GIF animé en boucle sans alternative statique ni contrôle
- Fil d'actualité ou ticker en défilement continu sans pause
- prefers-reduced-motion ignoré — animations non désactivées pour les utilisateurs qui ont coché 'Réduire les animations' dans leur OS
Exemples de code
carrousel sans bouton pause
✗ Non conforme<!-- Carrousel auto-défilant -->
<div class="carousel" data-autoplay="true"
data-interval="4000">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<!-- Boutons prev/next mais pas de pause -->
<button class="prev">‹</button>
<button class="next">›</button>
</div>Le carrousel défile automatiquement sans possibilité de pause. Même avec des boutons prev/next, l'utilisateur ne peut pas arrêter le mouvement pour lire une slide.
carrousel avec bouton pause accessible
✓ Conforme<section aria-label="Actualités" aria-roledescription="carrousel">
<!-- Bouton pause AVANT les slides -->
<button type="button" id="btn-pause"
aria-label="Mettre le défilement en pause">
⏸ Pause
</button>
<div class="slides">
<div role="group" aria-roledescription="slide"
aria-label="1 sur 3">Slide 1</div>
<div role="group" aria-roledescription="slide"
aria-label="2 sur 3" hidden>Slide 2</div>
</div>
<button aria-label="Slide précédente">‹</button>
<button aria-label="Slide suivante">›</button>
</section>
<script>
let paused = false;
const btn = document.getElementById('btn-pause');
btn.addEventListener('click', () => {
paused = !paused;
btn.textContent = paused ? '▶ Reprendre' : '⏸ Pause';
btn.setAttribute('aria-label',
paused ? 'Reprendre le défilement'
: 'Mettre le défilement en pause');
// logique pause/reprise de l'intervalle...
});
</script>Le bouton pause est le premier élément focusable du carrousel — avant les slides. aria-label change dynamiquement selon l'état. Le carrousel utilise les attributs ARIA recommandés par l'APG.
animation CSS et prefers-reduced-motion
✓ Conforme/* Animation de rotation d'une icône de chargement */
.spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Respecter la préférence système */
@media (prefers-reduced-motion: reduce) {
.spinner {
animation: none;
/* Alternative : clignotement très lent
ou indication textuelle */
}
/* Désactiver toutes les animations non essentielles */
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}prefers-reduced-motion désactive les animations pour les utilisateurs ayant coché 'Réduire les animations' dans les préférences de leur système d'exploitation. La règle * { animation-duration: 0.01ms } désactive toutes les animations non essentielles d'un coup.
Référence WCAG : 2.2.1, 2.2.2