La vidéo

Essayez-la

Lancez la lecture, puis regardez les trois zones bouger ensemble. Les sous-titres s’incrustent dans l’image et disparaissent ; l’audiodescription ne parle que dans les silences, et dit ce que le son ne dit pas ; la transcription reste entière du début à la fin, lisible sans rien lancer. Coupez une piste, puis l’autre : ce qui disparaît est précisément ce qu’elle était seule à porter.

Aucune vidéo n’est chargée — la démo joue le temps, pas les images.

Cette démo existe aussi en page autonome.

L’erreur courante

Coller la transcription sous la vidéo, et l’appeler « sous-titres ».

<!-- À ne pas faire -->
<video src="tutoriel.mp4" controls></video>

<h2>Sous-titres</h2>
<p>
	Le panneau d'audit s'ouvre à droite. Ici, le critère 1.1 est marqué non
	conforme. Un clic sur l'appareil photo capture l'élément fautif…
</p>

Ce bloc de texte est une transcription — un bon livrable, qui répond au critère 4.1. Ce ne sont pas des sous-titres, et le renommer n’y change rien.

Le glossaire du référentiel est limitatif : des sous-titres synchronisés sont un « texte des informations audio (paroles d’un personnage, bruit important pour comprendre l’action…) présentes dans un média temporel et affiché de manière synchrone avec le flux de l’objet multimédia ». Synchrone : le mot fait tout le travail. Une personne sourde qui suit un tutoriel doit lire au moment où l’action se produit ; ici, elle doit choisir entre regarder l’écran et lire le paragraphe, et perd l’un des deux à chaque phrase. Le critère 4.3 reste en échec, avec ou sans le titre « Sous-titres ».

Trois variantes du même malentendu :

• kind="subtitles" au lieu de kind="captions". Le test 4.3.2 nomme l’attribut : il demande, pour des sous-titres diffusés par <track>, un kind="captions". La note 2 du glossaire dit pourquoi — le sous-titrage de traduction ne transcrit pas les bruits, et « seule la présence et la pertinence d’un sous-titrage pour sourds et malentendants permet d’être conforme ».
• Les sous-titres automatiques publiés sans relecture. Ils passent le critère 4.3, qui ne demande que leur existence, et tombent au 4.4, qui demande leur pertinence : noms propres inventés, aucune ponctuation, aucun changement de locuteur, et pas un seul son non verbal.
• « L’audiodescription est dans la transcription. » Non : la transcription se lit, l’audiodescription s’écoute pendant que la vidéo tourne. Elles servent deux usages différents, et le référentiel les demande à deux critères différents — 4.1 pour la transcription, 4.5 pour l’audiodescription (qui transpose la WCAG 1.2.5, de niveau AA).

Le code, pas à pas

1. La vidéo, et sa piste de sous-titres

<video controls width="640">
	<source src="tutoriel.mp4" type="video/mp4" />
	<track
		kind="captions"
		src="tutoriel-fr.vtt"
		srclang="fr"
		label="Français (sourds et malentendants)"
		default
	/>
</video>

kind="captions" est ce que le test 4.3.2 vérifie, littéralement. srclang déclare la langue de la piste, label est ce que le menu du lecteur affiche — sans lui, l’utilisateur choisit entre des entrées sans nom.

default affiche la piste dès le départ. Le référentiel ne l’exige pas ; il exige de pouvoir la montrer et la masquer (voir l’étape 4). Activer par défaut est une préférence, défendable sur un site de service public, discutable ailleurs.

2. Le fichier WebVTT, et ce qu’on y met

WEBVTT

00:00:03.000 --> 00:00:08.000
Ici, le critère 1.1 est marqué non conforme.

00:00:15.000 --> 00:00:16.000
[déclic d'obturateur]

00:00:19.000 --> 00:00:24.000
La capture est jointe au rapport : on ne la redemande plus.

La deuxième entrée n’est pas une parole : c’est un son. Le glossaire range explicitement le « bruit important pour comprendre l’action » dans les sous-titres — sans ce déclic, on ne sait pas que la capture a été prise. Quand plusieurs personnes parlent, le glossaire recommande de les distinguer (crochets, italique, « voix off : … ») ; c’est ce que le critère 4.4 regarde.

Des sous-titres incrustés dans l’image satisfont aussi le test 4.3.1 : la vidéo « possède des sous-titres synchronisés ». Le test 4.3.2 ne s’applique alors pas, puisqu’il n’y a pas de <track>. Mais on ne peut plus les enlever, ni les agrandir, ni les traduire — la piste séparée reste le meilleur choix.

3. L’audiodescription, quand l’image parle seule

La question à se poser est celle de la note 3 du glossaire : « lorsque toute l’information de la vidéo est déjà donnée dans la piste audio, aucune audiodescription supplémentaire n’est requise ». Une conférence filmée en plan fixe n’en a pas besoin. Un tutoriel où l’on montre où cliquer, si.

Techniquement, la voie simple n’existe pas. <track kind="descriptions"> est prévu par la spécification, mais aucun navigateur ne le restitue de lui-même : poser la piste ne suffit pas.

Les deux réponses que le référentiel accepte au test 4.5.2 sont donc :

<!-- Une version alternative, désignée par un lien adjacent -->
<video controls src="tutoriel.mp4">…</video>
<p><a href="/tutoriel-audiodecrit">Voir la version audiodécrite de cette vidéo</a></p>

— un second fichier dont la piste sonore contient déjà la narration ; ou un lecteur qui joue en parallèle un fichier audio de description et le tient synchronisé. La première solution est la plus robuste : rien à maintenir côté script, et elle fonctionne partout.

L’écriture, elle, obéit à une contrainte de temps : la narration se loge dans les silences. Si les silences n’y suffisent pas, il faut une audiodescription étendue — c’est-à-dire une vidéo qui se met en pause pendant qu’on décrit.

4. Les commandes : le contrôle de la consultation

Le contrôle de la consultation est une liste fermée, et le critère 4.11 la reprend telle quelle :

• lecture, et pause ou stop — toujours ;
• activation et désactivation du son — s’il y a du son ;
• affichage et masquage des sous-titres — s’ils ne sont pas incrustés ;
• affichage et masquage de l’audiodescription — s’il y en a une.

Chacune doit être atteignable à la tabulation et actionnable au clavier. L’attribut controls donne tout cela sans une ligne de script. Un lecteur maison, lui, doit le reconstruire en entier — et c’est là qu’on retrouve les <div> cliquables, les icônes sans nom accessible et les barres de progression qui ne répondent pas aux flèches.

Si vous redessinez le lecteur, la règle est celle de tout composant scripté : des <button> avec un nom accessible, un <input type="range"> pour la position, un état exposé (aria-pressed sur les bascules, le nom du bouton qui passe de « Lecture » à « Pause »).

5. La transcription, qui n’est pas le fichier de sous-titres

<video controls src="tutoriel.mp4">…</video>

<h2 id="transcription">Transcription de la vidéo</h2>
<div>
	<p>Le panneau d'audit s'ouvre le long du bord droit de la fenêtre.</p>
	<p>« Ici, le critère 1.1 est marqué non conforme. »</p>
	<p>Le pointeur s'arrête sur un bouton en forme d'appareil photo…</p>
</div>

La transcription textuelle doit donner « la totalité de ce qui y est exprimé oralement » et « toutes les informations descriptives nécessaires à une compréhension équivalente de l’action », le tout « dans l’ordre chronologique de leur apparition ». Elle contient donc les deux autres pistes réunies — c’est ce que la démo montre en la fabriquant par fusion.

D’où le raccourci à ne pas prendre : exporter le .vtt en texte ne donne pas une transcription. Il n’y manque rien de moins que tout le visuel.

Le critère 4.1 accepte qu’elle soit « adjacente clairement identifiable », ou « accessible via un lien ou bouton adjacent ». Un accordéon replié juste sous la vidéo convient ; un lien vers une autre page, aussi.

6. Vous faut-il vraiment une vidéo ?

Une vidéo conforme, c’est trois livrables à produire et à maintenir : la piste de sous-titres, la transcription, et l’audiodescription quand l’image porte l’information. Aucun ne se sous-traite à une machine sans relecture.

Quand le contenu tient en texte et captures, la page écrite coûte moins cher, se cherche dans un moteur, se copie, s’imprime et se traduit. Gardez la vidéo pour ce qu’elle seule sait faire — montrer un geste, un mouvement, une durée.

Au clavier

Touche	Effet
Tab	Passe d’une commande à la suivante : Lecture, position, Sous-titres, Audiodescription.
Entrée / Espace	Actionne le bouton qui a le focus. Le focus ne bouge pas : c’est le nom du bouton qui change.
← →	Sur la position : recule ou avance d’une seconde.
Début / Fin	Sur la position : va au premier ou au dernier instant de la séquence.

Les commandes natives de <video controls> sont focalisables elles aussi, mais leur ordre et leur regroupement diffèrent d’un navigateur à l’autre : c’est un composant du navigateur, pas de votre page. Vérifiez-le dans plusieurs, plutôt que de conclure sur un seul.

Ce que le lecteur d’écran restitue

Sur le bouton de lecture : le nom et la nature — « Lecture, bouton », puis « Pause, bouton » une fois la lecture lancée. Sur une bascule : le nom, la nature et l’état — « Sous-titres, bouton, activé ». Sur la position : « Position, curseur, 6 secondes sur 24 ». La formulation varie d’un lecteur à l’autre, les informations non.

Et ce qu’il ne restitue pas : les sous-titres. Ils sont dessinés dans l’image pour être lus, pas annoncés. C’est le diagnostic le plus utile de cette fiche — si votre seule alternative est une piste de sous-titres, une personne aveugle n’obtient rien du tout. Il lui faut la transcription, ou l’audiodescription.

Si vous entendez « bouton » sans état sur une bascule, aria-pressed manque. Si vous entendez « curseur » sans nom, le <label> de la position n’est pas associé. Si vous n’entendez rien du tout sur les commandes, ce sont des <div>.

Checklist

• Une piste <track kind="captions">, avec srclang et un label nommé.
• Les sons signifiants et les changements de locuteur dans les sous-titres.
• Aucun sous-titre automatique publié sans relecture.
• Une audiodescription dès qu’une information ne vit que dans l’image.
• Une transcription textuelle : les paroles et les descriptions, dans l’ordre.
• Lecture, pause, son, sous-titres, audiodescription — toutes atteignables au clavier.

Les critères RGAA en jeu

• Critère 4.1 — Transcription des médias temporels

  Une vidéo livrée avec ses seuls sous-titres ne donne rien à qui ne voit pas l'écran : c'est la transcription textuelle, ou l'audiodescription, que ce critère réclame — et le référentiel les compte à part des sous-titres.

• Critère 4.3 — Sous-titres synchronisés

  Un texte posé sous le lecteur n'est pas un sous-titre : le test 4.3.1 demande des sous-titres affichés de manière synchrone avec le flux. Si on les diffuse par track — la voie la plus courante — le test 4.3.2 impose alors kind="captions", et kind="subtitles" ne passe pas.

• Critère 4.4 — Pertinence des sous-titres

  Des sous-titres générés automatiquement et publiés sans relecture butent sur la pertinence : noms propres fautifs, aucune ponctuation, aucun son signifiant, aucune distinction des locuteurs.

• Critère 4.5 — Audiodescription synchronisée

  Dès qu'une information ne vit que dans l'image, la piste sonore ment par omission — c'est là que l'audiodescription synchronisée devient exigible — le référentiel la compte à un critère distinct de la transcription.

• Critère 4.11 — Contrôle des médias temporels

  Lire, mettre en pause, couper le son, montrer ou masquer les sous-titres : chacune de ces commandes doit s'atteindre et s'actionner au clavier, ce qu'un lecteur maison redessiné en div perd d'un coup.

Vérifiez votre composant avec l'extension

Pour aller plus loin

• Critère 4.3 — Sous-titres synchronisés et 4.5 — Audiodescription synchronisée : les deux exigences qu’on prend l’une pour l’autre.
• « Sous-titres synchronisés » au glossaire : la définition limitative, notes comprises, qui tranche le débat sur kind.
• « Contrôle de la consultation » au glossaire : la liste fermée des commandes exigibles.
• L’accordéon : de quoi replier la transcription sous la vidéo sans la sortir de la page.

Sources

• MDN — <track> — l’élément, ses kind et leurs effets
• MDN — WebVTT API — le format des fichiers de sous-titres
• WCAG — Understanding 1.2.2 Captions (Prerecorded) — pourquoi la synchronisation est le cœur de l’exigence
• WCAG — Understanding 1.2.5 Audio Description (Prerecorded) — ce que l’audiodescription doit couvrir
• W3C WAI — Making Audio and Video Media Accessible — le guide de production, piste par piste