Mettre en pause, arrêter et masquer les contenus en mouvement automatique
Laissez les utilisateurs contrôler les carrousels et les vidéos.
Mettre en pause, arrêter et masquer les contenus en mouvement automatique est une leçon Web Accessibility Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Web Accessibility Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Web Accessibility Academy comprend 4 leçons au total.
Donner le contrôle aux utilisateurs
Si un contenu bouge de lui-même, l’utilisateur doit pouvoir s’en extraire. WCAG appelle cela mettre en pause, arrêter ou masquer les contenus animés automatiquement. ⏸️
Ce qui compte comme mouvement automatique
Pensez aux carrousels, aux diaporamas qui avancent automatiquement, aux bandeaux défilants et aux vidéos d’arrière-plan en boucle. Tout ce qui s’anime sans action de l’utilisateur est concerné.
La règle des cinq secondes
Le critère vise les mouvements qui durent plus de cinq secondes et s’exécutent en parallèle d’un autre contenu. Une brève animation d’introduction est exemptée.
Pourquoi c’est important
Les contenus en mouvement captent l’attention et peuvent être impossibles à lire pour les utilisateurs ayant des sensibilités cognitives ou liées aux mouvements. Le contrôle permet de reprendre possession de la page.
Proposer un contrôle de pause
La solution la plus simple est un véritable bouton pause. Permettez aux utilisateurs de figer un carrousel afin qu’ils puissent terminer la lecture d’une diapositive tranquillement.
<button aria-label="Pause slideshow">Pause</button>Arrêter est plus fort que mettre en pause
La pause peut reprendre, tandis que l’arrêt met définitivement fin au mouvement. Les deux solutions respectent la règle, tant que l’utilisateur garde véritablement le contrôle.
Masquer est également possible
Il est parfois préférable de permettre aux utilisateurs de masquer entièrement l’élément animé. Un contrôle de fermeture sur un bandeau défilant élimine complètement la distraction.
Mettre en pause au survol et au focus
Un carrousel devrait également se mettre en pause lorsque l’utilisateur le survole ou y place le focus avec la touche de tabulation, afin que la lecture ou l’interaction ne soit jamais interrompue par l’avancement automatique.
Rendre le contrôle accessible
Le bouton de pause lui-même doit être accessible au clavier et posséder un libellé clair. Un contrôle que personne ne peut trouver ne compte pas.
Associer cette fonction à la réduction des mouvements
Mieux encore, ne lancez pas automatiquement les contenus pour les utilisateurs qui réduisent les mouvements. Associez la vérification de la préférence à un contrôle de pause visible.
@media (prefers-reduced-motion: reduce) {
.carousel { animation-play-state: paused; }
}Éviter l’avancement automatique
À vrai dire, de nombreux carrousels fonctionnent mieux sans aucun avancement automatique. Laissez les utilisateurs avancer à leur propre rythme et le problème disparaît.
Vérification rapide
Que requiert la règle « mettre en pause, arrêter ou masquer » ?
Récapitulatif
Un contenu qui se déplace automatiquement doit proposer de mettre en pause, d’arrêter ou de masquer son mouvement sous le contrôle de l’utilisateur. Rendez ce contrôle accessible au clavier et évitez la lecture automatique lorsque les mouvements sont réduits. ✅
Questions Fréquemment Posées
La leçon « Mettre en pause, arrêter et masquer les contenus en mouvement automatique » est-elle gratuite ?
Oui — le texte complet de « Mettre en pause, arrêter et masquer les contenus en mouvement automatique » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Web Accessibility Academy, passe à CoddyKit PRO. Le cours Web Accessibility Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Mettre en pause, arrêter et masquer les contenus en mouvement automatique » ?
Laissez les utilisateurs contrôler les carrousels et les vidéos. Tu pratiques Web Accessibility Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Web Accessibility Academy ?
Aucune expérience préalable n'est requise. Web Accessibility Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Mettre en pause, arrêter et masquer les contenus en mouvement automatique » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Web Accessibility Academy ?
Oui. Chaque leçon Web Accessibility Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- prefers-reduced-motion dans CSS et JS
- Troubles vestibulaires et risques liés à la parallaxe
- Le seuil de trois flashs pour les crises épileptiques
- Mettre en pause, arrêter et masquer les contenus en mouvement automatique