Chaque son déclenché automatiquement est-il contrôlable par l’utilisateur ?
Un lecteur d’écran parle. Si votre page diffuse un son au chargement, l’utilisateur aveugle entend deux voix simultanément : la sienne et la vôtre. Dans la majorité des cas, il ne comprend ni l’une ni l’autre. C’est la raison d’être de ce critère.
Le critère 4.10 demande qu’un son déclenché automatiquement soit contrôlable par l’utilisateur. Trois conditions permettent de valider : la séquence dure 3 secondes ou moins, ou un dispositif (bouton pause, stop, coupure du son) est présent dans la page ou sur l’élément sonore et accessible au clavier, ou le volume de la séquence est réglable indépendamment du volume système.
Les éléments concernés sont nombreux : <audio>, <video>, <object>, <embed>, <bgsound>, mais aussi tout code JavaScript utilisant la Web Audio API ou un appel à .play() au chargement. Si votre page d’accueil s’ouvre avec une musique d’ambiance, une vidéo en lecture automatique avec son, ou une annonce vocale, ce critère s’applique.
Le bouton de contrôle doit être placé avant l’élément sonore dans l’ordre de tabulation. Un bouton en bas de page que l’utilisateur atteint après trente secondes de son ne remplit pas l’intention du critère.
Un test pour détecter la lecture automatique de son
Contrôle d'un son déclenché automatiquement
- Chargez la page dans un navigateur, son système activé.
- Notez si un son se déclenche automatiquement (musique, vidéo avec audio, annonce vocale, jingle).
- Si aucun son ne se déclenche automatiquement, le test ne s’applique pas.
- Si un son se déclenche, vérifiez qu’au moins une des conditions suivantes est remplie :
- La durée totale de la séquence sonore est inférieure ou égale à 3 secondes.
- Un bouton (pause, stop ou muet) est présent dans la page ou sur l’élément sonore, et il est accessible au clavier.
- Un contrôle de volume propre à la séquence est disponible, indépendant du volume système.
- Si au moins une condition est remplie, le test est validé.
- Éléments à inspecter :
<audio autoplay>,<video autoplay>,<object>,<embed>,<bgsound>, et tout appel JavaScript à.play()ou à la Web Audio API au chargement.
Exemples
❌ Non conforme : Vidéo en lecture automatique avec son, sans aucun contrôle
<video src="intro.mp4" autoplay loop>
<p>Votre navigateur ne supporte pas la balise video.</p>
</video>La vidéo démarre avec le son dès le chargement de la page, sans bouton pour la mettre en pause ou la couper. L’attribut loop signifie que la séquence ne s’arrête jamais. Un utilisateur de lecteur d’écran entend simultanément la piste audio de la vidéo et la voix de synthèse de son outil, sans pouvoir arrêter l’une ou l’autre sans quitter la page. Échec F93.
✅ Conforme : Audio automatique avec bouton de contrôle accessible avant l’élément
<button type="button" id="ctrl-jingle" aria-pressed="true"
onclick="var a=document.getElementById('jingle'); a.paused ? (a.play(), this.setAttribute('aria-pressed','true')) : (a.pause(), this.setAttribute('aria-pressed','false'))">
Mettre en pause la musique d’accueil
</button>
<audio id="jingle" src="jingle.mp3" autoplay></audio>Le bouton est placé avant l’élément <audio> dans le DOM, donc avant lui dans l’ordre de tabulation. Son libellé est explicite. L’attribut aria-pressed informe les lecteurs d’écran de l’état courant (son actif ou mis en pause). L’utilisateur peut reprendre le contrôle sans traverser toute la page.
✅ Conforme : Audio automatique court — condition durée satisfaite
<!-- Jingle de 2 secondes au chargement, aucun contrôle supplémentaire requis -->
<audio src="notification-2s.mp3" autoplay></audio>Une séquence de 2 secondes satisfait la condition de durée (≤ 3 secondes). Aucun bouton de contrôle n’est obligatoire. La perturbation est trop brève pour masquer durablement le discours du lecteur d’écran. Attention : sans l’attribut loop, la séquence s’arrête bien seule.
Astuces et pièges
⚠️ L’attribut muted ne couvre pas le critère
<video autoplay muted> coupe le son par défaut, mais si vous ajoutez un bouton « Activer le son », la vidéo peut reprendre avec audio sans contrôle de pause disponible. Testez toujours le parcours complet : activez le son, puis vérifiez qu’un bouton permet de l’arrêter. En audit, ce schéma représente l’une des non-conformités les plus fréquentes sur les pages vitrine.
⚠️ Le bouton de contrôle placé après l’élément sonore dans le DOM
La technique G170 recommande de placer le contrôle en début de page, avant l’élément déclencheur. Un bouton « Couper le son » situé en pied de page oblige l’utilisateur au clavier à traverser tous les éléments interactifs pendant que le son joue. C’est techniquement un contrôle présent, mais l’intention du critère n’est pas respectée.
⚠️ Sons déclenchés par JavaScript sans balise média visible
La Web Audio API et les appels new Audio(’file.mp3’).play() dans un listener DOMContentLoaded constituent des sons automatiques au sens du critère. Ils n’ont aucun contrôle natif du navigateur. Inspectez le code JavaScript : cherchez .play() et AudioContext dans les scripts chargés au démarrage. Si un son est détecté, un bouton de contrôle doit être ajouté manuellement dans la page.
⚠️ Son déclenché uniquement sur action utilisateur : hors périmètre
Si le son ne démarre qu’en réponse à un clic explicite sur un bouton « Lire », le critère 4.10 ne s’applique pas. C’est la technique G171. Le piège en audit : certains scripts déclenchent .play() sur un événement mouseover ou focus, ce qui n’est pas une action explicite de lecture. Vérifiez que la lecture ne s’initie que sur un click ou keydown intentionnel.
💡 La condition « volume indépendant » est rare mais valide
La troisième condition — contrôler le volume de la séquence indépendamment du volume système — est rarement implémentée mais parfaitement valide. Un slider de volume sur un player audio personnalisé suffit. C’est utile quand on préfère ne pas offrir de bouton stop (par exemple pour un fond sonore que l’utilisateur peut seulement atténuer à zéro).
Questions fréquentes
Comment le critère RGAA 4.10 s'applique-t-il aux vidéos autoplay muted ?
Oui, tant qu’elle reste muette. Si vous proposez un bouton « Activer le son » qui relance la vidéo avec audio, un contrôle de pause ou stop doit alors être disponible. En résumé : autoplay muted sans son activable est conforme ; autoplay muted avec option son est conforme seulement si un contrôle accompagne l’audio réactivé.
Comment auditer le critère RGAA 4.10 sur le son automatique en pratique ?
Chargez la page avec le son système activé et notez tout ce qui se joue immédiatement. Dans les outils de développement, onglet Réseau, filtrez sur « Media » pour repérer les fichiers audio ou vidéo chargés au démarrage. Inspectez le DOM : cherchez autoplay sur <audio> et <video>. Recherchez aussi .play() dans les scripts. Pour chaque son détecté, confirmez qu’une des trois conditions est remplie.
Comment s'applique la règle des 3 secondes RGAA 4.10 : par boucle ou durée totale ?
À la durée totale de la séquence déclenchée automatiquement. Un fichier audio de 2 secondes est conforme. Une musique de 2 secondes lue en boucle (loop) ne l’est pas, car la séquence globale dépasse largement 3 secondes. L’attribut loop est un signal d’alerte systématique en audit.
Quel rôle jouent les contrôles natifs <video controls> dans la conformité RGAA 4.10 ?
Oui. Si la balise porte l’attribut controls, le navigateur affiche une barre de lecture avec bouton pause et contrôle de volume, accessible au clavier. Sans controls, aucun contrôle natif n’est rendu et il faut en implémenter un manuellement. C’est la solution la plus simple et la plus robuste pour satisfaire le critère.
Comment le critère RGAA 4.10 s'applique-t-il aux notifications sonores d'une application web ?
Oui, dès qu’un son est déclenché automatiquement au chargement ou à un événement sans action explicite de l’utilisateur. Un son de notification joué à l’arrivée d’un message dans une messagerie web relève du critère si l’utilisateur n’a pas activé la lecture. Une préférence utilisateur permettant de désactiver ces sons dans les paramètres de l’application est une façon valide de satisfaire la condition « dispositif de contrôle ».