Chapitre 8.5 — Contrôle des médias

⏱️ TL;DR — Un média qui démarre tout seul est un piège d’accessibilité. La règle 1.4.2 (Contrôle du son, niveau A) est nette : si un son se déclenche automatiquement et dure plus de 3 secondes, tu dois offrir un moyen de le mettre en pause, l’arrêter ou couper le volume — indépendamment du volume système. Idéalement : pas d’autoplay sonore du tout. Même logique pour le contenu qui bouge ou défile automatiquement. Et si tu construis un lecteur custom, ses boutons doivent avoir un nom accessible, marcher au clavier, et exposer leur état (lecture/pause).

🎯 Objectifs

• Appliquer la règle des 3 secondes de 1.4.2 (couper/pauser un son qui démarre seul).
• Bannir l’autoplay sonore et fournir un contrôle clair.
• Traiter de même le contenu en mouvement/défilement automatique.
• Rendre un lecteur custom accessible : nom, clavier, état des boutons.

La règle des 3 secondes (1.4.2)

WCAG 1.4.2 : si un contenu audio se joue automatiquement pendant plus de 3 secondes, il faut un mécanisme pour le mettre en pause / l’arrêter, ou pour régler son volume de façon indépendante du volume général du système. Pourquoi cette règle est stricte : un son inattendu recouvre la synthèse vocale d’un lecteur d’écran. L’utilisateur n’entend plus sa voix de navigation, ne trouve pas d’où vient le bruit, et peut se retrouver totalement bloqué.

La bonne pratique dépasse la lettre du critère : ne lance aucun son automatiquement. Laisse l’utilisateur décider de jouer le média.

<!-- ❌ Autoplay avec son : recouvre le lecteur d'écran, aucune pause offerte -->
<video src="promo.mp4" autoplay></video>
<audio src="jingle.mp3" autoplay></audio>
 
<!-- ✅ L'utilisateur décide : contrôles présents, pas de lecture auto sonore -->
<video src="promo.mp4" controls></video>
<audio src="jingle.mp3" controls></audio>

Si tu veux vraiment une vidéo qui démarre seule (fond décoratif), elle doit être muette — et de préférence respecter prefers-reduced-motion :

<!-- ✅ Vidéo d'ambiance : muette, en boucle, sans contrôles requis -->
<video src="ambiance.mp4" autoplay muted loop playsinline></video>

⚠️ Piège — L’autoplay avec son est l’une des pires expériences d’accessibilité (et d’UX tout court). Pour un utilisateur de lecteur d’écran, une musique ou une voix qui démarre sans prévenir noie la synthèse vocale : il perd le fil de la page, cherche frénétiquement le bouton pause… qui n’existe pas. Les navigateurs bloquent d’ailleurs souvent l’autoplay sonore — ne construis rien qui en dépende. Règle simple : le son ne démarre que sur action de l’utilisateur.

Le mouvement, même combat

La logique de 1.4.2 s’étend au visuel qui bouge : un carrousel qui défile seul, une animation en boucle, un bandeau qui clignote. Tout contenu en mouvement, clignotement ou défilement automatique qui démarre seul et dure plus de 5 secondes doit pouvoir être mis en pause, arrêté ou masqué par l’utilisateur (c’est le pendant « animation » du principe, critère 2.2.2). Un carrousel automatique sans bouton pause est un classique des audits ratés.

Le mouvement pose aussi un enjeu de santé (troubles vestibulaires, épilepsie photosensible) traité à part : on y consacre la Partie 13 — Mobile, responsive & mouvement, notamment prefers-reduced-motion et la règle des flashs.

♿ Côté utilisateur — Un utilisateur de lecteur d’écran arrive sur ta page ; un jingle démarre. Sa synthèse vocale, qui annonce « Accueil, titre de niveau 1… », est couverte par ta musique. Il n’entend plus sa propre navigation, ne sait pas quelle touche presser, et le bouton pause est planqué en bas de page. Beaucoup quittent le site sur-le-champ. Le silence par défaut, c’est le respect de son canal auditif — le seul dont il dispose.

Lecteur custom : les contrôles doivent être irréprochables

Si tu remplaces les contrôles natifs par les tiens, tu hérites de la responsabilité de les rendre accessibles. Trois exigences.

1. Un nom accessible sur chaque bouton. Ce sont presque toujours des boutons icônes (voir SVG & icônes) : ils ont donc besoin d’un aria-label ou d’un texte masqué.

2. Tout au clavier. Chaque contrôle est un vrai <button> (pas une <div>), atteignable par Tab, activable par Entrée/Espace, avec un focus visible.

3. L’état doit être exposé. Un bouton play/pause change d’état : le lecteur d’écran doit l’entendre. Deux techniques.

<!-- ✅ Option A : le libellé change avec l'état -->
<button id="pp" aria-label="Lecture">▶</button>
<!-- au clic, on bascule le libellé -->
<script>
  const pp = document.querySelector('#pp');
  pp.addEventListener('click', () => {
    const enLecture = pp.getAttribute('aria-label') === 'Pause';
    pp.setAttribute('aria-label', enLecture ? 'Lecture' : 'Pause');
  });
</script>

<!-- ✅ Option B : aria-pressed reflète l'état enfoncé/relâché -->
<button aria-pressed="false" aria-label="Lecture / pause">▶</button>
<!-- au clic, basculer aria-pressed entre "true" et "false" -->

L’essentiel : que l’utilisateur sache, à l’oreille, si le média est en lecture ou en pause. Un bouton dont l’icône change visuellement mais dont le nom accessible reste figé ne dit rien au lecteur d’écran.

🧭 Sur A11yLearn — La règle produit est simple : aucun média ne démarre avec du son sans clic de l’apprenant. La bande-annonce d’un cours sur la page d’accueil est muted et en boucle ; la vidéo de leçon utilise controls et attend l’action. Le lecteur custom du player de cours est bâti sur de vrais <button> : chaque contrôle porte un aria-label, le bouton lecture/pause bascule son libellé (« Lecture » ↔ « Pause ») à chaque clic, et le focus reste visible. Résultat : un apprenant au clavier ou au lecteur d’écran pilote la vidéo aussi bien qu’à la souris.

💡 Réflexe — Avant de livrer une page avec du média, coupe ta souris et débranche tes yeux du son : le média démarre-t-il tout seul ? Puis-je le mettre en pause au clavier ? Le lecteur d’écran annonce-t-il l’état ? Si l’une des réponses cloche, tu as un défaut 1.4.2 ou clavier à corriger avant tout le reste.

✏️ Exercices

Exercice 1 — Autorisé ou non ? Dis si c’est conforme et pourquoi : (a) une vidéo de fond muette en boucle qui démarre seule, (b) un jingle de 10 s qui se lance à l’arrivée sur la page, sans bouton, (c) un carrousel qui défile automatiquement toutes les 4 s sans contrôle.

Exercice 2 — Rends ce bouton correct. Ce bouton pause/lecture ne dit rien au lecteur d’écran quand son état change.

<button onclick="toggle()"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></button>

<button onclick="toggle()" aria-label="Lecture">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</button>

🧠 Quiz de révision

Partie suivante : Partie 9 — Formulaires accessibles — labels, erreurs et validation pour des formulaires utilisables par tous.