Quand un son se déclenche automatiquement sur une page — fond sonore, jingle d'accueil, vidéo en autoplay avec son — l'utilisateur peut-il l'arrêter facilement ?
Critère officiel 4.10 — Chaque son déclenché automatiquement est-il contrôlable par l’utilisateur ?
Pourquoi c'est important
Un son qui se déclenche sans action de l'utilisateur perturbe gravement les personnes utilisant un logiciel de lecture : le son du site se superpose à la voix du logiciel, rendant la page totalement inutilisable. C'est l'un des obstacles les plus invalidants pour les personnes aveugles.
Exemples concrets
Ce qui est conforme
La page d'accueil dispose d'un bandeau vidéo avec son. Un bouton « Couper le son » visible et accessible au clavier apparaît dès le chargement de la page, avant même le contenu principal.
Ce qui pose problème
La page d'accueil lance automatiquement une vidéo promotionnelle avec de la musique. Il n'y a aucun bouton pour arrêter le son, et le lecteur d'écran est couvert par la musique : la page est inutilisable.
Comment agir
La solution la plus ferme : supprimez les sons automatiques et les vidéos en autoplay avec son. Si vous tenez à la vidéo d'ambiance, demandez à votre prestataire de la configurer en muet par défaut, avec activation manuelle. Un son qui se déclenche sans action de l'utilisateur est presque toujours une mauvaise pratique — pour l'accessibilité et pour l'expérience de tous les visiteurs.
Règles clés
- Si un son se déclenche automatiquement et dure plus de 3 secondes, un mécanisme accessible de contrôle doit être disponible AVANT ou au tout début du contenu sonore.
- Le mécanisme de contrôle (pause, stop, volume) doit être atteignable au clavier sans parcourir tout le contenu de la page.
- La solution la plus simple et robuste : ne pas déclencher de son automatiquement (autoplay="false").
- Si l'autoplay est impératif (contexte éditorial fort) : placer le bouton de contrôle en tout premier dans le DOM, avant la source sonore.
- L'attribut muted sur une vidéo autoplay est acceptable — le son est absent par défaut, l'utilisateur choisit de l'activer.
Erreurs fréquentes
- Vidéo ou audio en autoplay sans bouton pause/stop accessible
- Carrousel ou slider avec fond sonore automatique
- Musique d'ambiance déclenchée au chargement de la page
- Autoplay contourné via JavaScript après un court délai pour éviter les blockers
- Bouton pause présent mais non atteignable au clavier avant que le son ne commence
Exemples de code
autoplay sans contrôle
✗ Non conforme<video src="presentation.mp4" autoplay></video>Vidéo qui démarre automatiquement avec le son. Aucun bouton pause n'est fourni. Le lecteur d'écran est immédiatement parasité.
autoplay muet — acceptable
✓ Conforme<video src="animation-fond.mp4" autoplay muted loop
aria-hidden="true"></video>L'autoplay est muet par défaut (muted). Aucune interférence sonore. aria-hidden="true" si la vidéo est purement décorative. L'utilisateur choisit d'activer le son si des contrôles sont fournis.
autoplay avec son — contrôle accessible
✓ Conforme<!-- Bouton pause AVANT la vidéo dans le DOM -->
<button type="button" id="btn-pause-video"
aria-label="Mettre en pause la vidéo de présentation">
Pause
</button>
<video id="video-presentation" src="presentation.mp4"
autoplay aria-describedby="btn-pause-video">
</video>
<script>
const video = document.getElementById('video-presentation');
const btn = document.getElementById('btn-pause-video');
btn.addEventListener('click', () => {
if (video.paused) {
video.play();
btn.textContent = 'Pause';
btn.setAttribute('aria-label',
'Mettre en pause la vidéo de présentation');
} else {
video.pause();
btn.textContent = 'Lecture';
btn.setAttribute('aria-label',
'Reprendre la lecture de la vidéo de présentation');
}
});
</script>Le bouton de pause est positionné avant la vidéo dans le DOM — il est le premier élément focusable lié à la vidéo. Son aria-label reflète l'état courant (Pause / Lecture).
Référence WCAG : 1.4.2