Chapitre 8.4 — Vidéo & audio

⏱️ TL;DR — Le média temporel (vidéo, audio) se déroule dans le temps et exclut d’office ceux qui ne l’entendent pas ou ne le voient pas. Il faut des alternatives : sous-titres synchronisés pour la vidéo (1.2.2, A) — de vrais sous-titres qui rendent dialogues et sons signifiants, pas une simple légende ; transcription pour l’audio seul (1.2.1, A) ; audiodescription pour l’information uniquement visuelle (1.2.5, AA) ; et langue des signes pour aller plus loin (1.2.6, AAA). Techniquement, on relie un fichier .vtt à la vidéo via l’élément <track>, et le lecteur doit rester utilisable au clavier.

🎯 Objectifs

• Distinguer sous-titres, transcription, audiodescription et langue des signes.
• Savoir ce qu’un sous-titre doit contenir (dialogues + sons signifiants) — vs une légende.
• Relier un fichier de sous-titres .vtt à une <video> avec l’élément <track>.
• Vérifier qu’un lecteur vidéo reste accessible au clavier.

Le problème du média temporel

Une image, on la décrit une fois. Une vidéo avance : à chaque seconde, du son et de l’image. Deux publics sont bloqués par défaut :

• Sans le son (personnes sourdes ou malentendantes, mais aussi open space, transports) → il faut restituer le son par du texte : sous-titres, transcription.
• Sans l’image (personnes aveugles, écran non regardé) → il faut restituer l’information visuelle que le son ne dit pas : audiodescription.

WCAG traite ces cas dans la ligne de critères 1.2 (Média temporel). Voici les principaux.

Sous-titres synchronisés — vidéo (1.2.2, niveau A)

Toute vidéo préenregistrée avec du son doit avoir des sous-titres synchronisés. Attention au sens exact : un sous-titre d’accessibilité (en anglais captions) ne se limite pas aux dialogues. Il rend tout ce que l’oreille perçoit et qui compte :

• les dialogues (qui parle, si ce n’est pas évident) ;
• les sons signifiants : « [sonnerie de téléphone] », « [musique inquiétante] », « [rires] », « [applaudissements] ».

C’est la différence entre un sous-titre et une légende (subtitle, pensé pour la traduction d’une langue à l’autre, qui ne transcrit que la parole). Pour l’accessibilité, il faut le premier : dialogues et ambiance sonore.

⚠️ Piège — Confondre sous-titres (accessibilité) et légende de traduction. Une piste qui ne transcrit que les paroles laisse une personne sourde passer à côté du téléphone qui sonne, de la musique qui monte, du bruit hors champ qui fait sursauter les autres. Les sons signifiants font partie du message. Un sous-titre accessible les note entre crochets.

Transcription — audio seul (1.2.1, niveau A)

Pour un contenu audio seul (podcast, interview enregistrée), l’alternative est une transcription textuelle : le texte intégral de ce qui est dit, y compris l’identification des locuteurs et les sons pertinents. Avantages : elle sert aussi les personnes qui préfèrent lire, elle est cherchable, et elle est indexée par les moteurs de recherche.

La transcription convient aussi très bien à la vidéo, en complément des sous-titres : beaucoup de gens préfèrent parcourir un texte que regarder 40 minutes de vidéo.

Audiodescription — info uniquement visuelle (1.2.5, niveau AA)

Quand la vidéo montre une information que la bande-son ne dit pas (un texte à l’écran, un geste, une action muette), une personne aveugle la manque. L’audiodescription est une piste vocale supplémentaire qui décrit ces éléments visuels dans les silences de la bande-son. C’est un critère de niveau AA — donc requis pour la conformité légale.

Astuce de production : si tu écris ton script pour que tout ce qui est important soit aussi dit à voix haute (« Comme tu le vois à l’écran, je clique sur Enregistrer… »), tu réduis fortement le besoin d’audiodescription séparée. C’est particulièrement vrai pour les tutoriels.

Langue des signes (1.2.6, niveau AAA)

Fournir une interprétation en langue des signes de la piste audio est un critère de niveau AAA. Il compte parce que, pour une partie des personnes sourdes de naissance, la langue des signes est la langue première et le texte écrit une langue seconde, moins fluide. C’est exigeant à produire ; on le vise sur les contenus à fort enjeu.

Côté code : <video> + <track>

En HTML natif, on attache une piste de sous-titres via l’élément <track> pointant vers un fichier .vtt (WebVTT). L’attribut kind="captions" indique des sous-titres d’accessibilité (kind="subtitles" serait une traduction).

<!-- ✅ Vidéo avec piste de sous-titres liée -->
<video controls>
  <source src="lecon-01.mp4" type="video/mp4">
  <track src="lecon-01.fr.vtt" kind="captions" srclang="fr" label="Français" default>
</video>

Le fichier .vtt est un simple fichier texte horodaté :

WEBVTT

00:00:01.000 --> 00:00:04.000
[musique d'intro]

00:00:04.500 --> 00:00:08.000
Bienvenue dans la leçon 1 : les bases de l'accessibilité.

Sous-titres intégrés (« burned-in ») vs fichier .vtt : incruster les sous-titres dans l’image (les « graver ») les rend toujours visibles mais non désactivables, non stylables, non traduisibles, et invisibles au lecteur d’écran en tant que texte. Préfère un fichier .vtt via <track> : activable/désactivable, sélectionnable par langue, et lisible par les technologies d’assistance.

Le lecteur vidéo doit être accessible

Un beau lecteur custom qui n’écoute pas le clavier bloque tout le monde qui n’utilise pas la souris. Vérifie que :

• Play/pause, volume, sous-titres, plein écran sont atteignables au clavier (Tab) et activables (Entrée/Espace) ;
• chaque contrôle a un nom accessible (voir SVG & icônes : ce sont souvent des boutons icônes) ;
• le focus est visible sur les contrôles.

Le plus sûr reste de partir de l’élément <video controls> natif (dont les contrôles sont déjà accessibles) ou d’un lecteur réputé accessible, plutôt que de tout reconstruire.

♿ Côté utilisateur — Une apprenante sourde suit ta leçon vidéo. Sans sous-titres, elle voit tes lèvres bouger et… rien d’autre : le cours lui est fermé. Avec des sous-titres qui rendent tes explications et les « [bip de la console]able » quand ton terminal réagit, elle suit exactement comme les autres. Les sous-titres ne sont pas un bonus : pour elle, ils sont le cours.

🧭 Sur A11yLearn — Toutes les vidéos de cours passent par la même règle : un fichier .vtt de sous-titres par langue, attaché en <track kind="captions">, jamais de sous-titres gravés. Pour les tutoriels de code, on rédige le script pour dire à voix haute chaque action montrée à l’écran (« je clique sur Exécuter, le test passe au vert »), ce qui rend l’audiodescription séparée presque inutile. Le détail du sous-titrage côté Moodle est traité en Partie 12 — Moodle & formation.

📚 Aller plus loin — Les critères de la famille 1.2 sur w3.org/WAI : 1.2.1 (transcription audio / audiodescription média), 1.2.2 (sous-titres préenregistrés), 1.2.5 (audiodescription AA), 1.2.6 (langue des signes AAA). Le format WebVTT est spécifié par le W3C.

✏️ Exercices

Exercice 1 — Quelle alternative pour quel média ? (a) un podcast audio de 30 min, (b) une vidéo de cours avec voix off et démonstrations à l’écran, (c) une vidéo muette d’ambiance en fond de page.

Exercice 2 — Complète le balisage. Ajoute des sous-titres français à cette vidéo.

<video controls>
  <source src="module-a11y.mp4" type="video/mp4">
</video>

<video controls>
  <source src="module-a11y.mp4" type="video/mp4">
  <track src="module-a11y.fr.vtt" kind="captions" srclang="fr" label="Français" default>
</video>

🧠 Quiz de révision

Chapitre suivant : Contrôle des médias — interdire l’autoplay sonore et garantir un moyen de mettre en pause.