RGAA Lab

Composants accessibles

Les sous-titres et la transcription

Des sous-titres ne sont pas une traduction, et une transcription n'est pas une pièce jointe. Ce que le RGAA attend de chacun des deux formats, et comment les écrire. Démo, code, critères RGAA.

4 critères RGAA en jeu

Essayez-la

Cadrer une capture d’audit

Simulation : aucune vidéo n’est chargée, seuls les fichiers WebVTT sont lus.

00:00 / 00:34

Piste affichée

La seconde piste ne porte que les paroles, comme la plupart des fichiers servis en kind="subtitles". Lancez la lecture et regardez la barre à 00:02 puis à 00:15 : la musique et le déclic n’y sont plus, et personne ne dit qui parle.

Transcription

Le même contenu, en HTML dans la page : il se cherche, se copie, s’imprime et se lit sans lancer la vidéo. Chaque repère temporel ramène la lecture à cet instant.

  1. [Musique d'ouverture]

  2. Narratrice : un rapport d'audit se relit six mois plus tard.

  3. Narratrice : sans capture, le constat n'est plus vérifiable.

  4. [Déclic de l'appareil photo]

  5. Auditeur : je cadre l'élément fautif, jamais la page entière.

  6. Auditeur : et je relève le sélecteur dans la foulée.

  7. [Musique de fin]

Lancez la lecture, puis basculez sur la piste « dialogue seul » et regardez la barre à 00:02 et à 00:15 : la musique d’ouverture et le déclic ont disparu, et plus rien ne dit qui parle. Au clavier, tabulez jusqu’aux repères temporels de la transcription : Entrée ramène la lecture à cet instant, et la ligne atteinte se marque par un signe autant que par la couleur.

Cette démo existe aussi en page autonome.

Deux formats, deux besoins

Ils se ressemblent au point qu’on les confond, mais ils ne servent pas les mêmes personnes ni les mêmes usages.

Les sous-titres synchronisés s’affichent dans l’image, en même temps que le son qu’ils remplacent. Ils s’adressent à qui voit la vidéo sans l’entendre. Ils sont donc courts, contraints par la durée du plan, et inséparables du média.

La transcription textuelle est du texte, hors du lecteur. Elle s’adresse à qui n’accède pas à la vidéo du tout — parce qu’il ne l’entend pas, parce qu’il ne la voit pas, parce que le débit ne suit pas, ou simplement parce qu’il préfère lire. Elle se cherche, se copie, s’imprime, et elle est indexée.

Le RGAA les demande séparément, et pour un média synchronisé pré-enregistré il les demande tous les deux : les sous-titres au critère 4.3, la transcription (ou une audiodescription) au critère 4.1. Livrer l’un ne solde pas l’autre.

L’erreur courante

Un kind pour un autre.

<!-- À ne pas faire -->
<video controls src="cadrer-une-capture.mp4">
	<track src="cadrer-une-capture.vtt" kind="subtitles" srclang="fr" label="Français" />
</video>

Le fichier peut être irréprochable : bien découpé, relu, complet. Le test 4.3.2 est en échec quand même, parce qu’il ne regarde pas le fichier, il regarde l’attribut. kind="subtitles" déclare une piste de traduction — le texte de ce qui est dit, dans une autre langue, pour qui entend la bande son sans la comprendre. kind="captions" déclare une piste destinée aux personnes sourdes et malentendantes : elle porte l’information sonore, pas seulement les paroles.

La conséquence dépasse la conformité. Un lecteur qui range la piste dans « traduction » peut l’écarter quand la langue de l’interface est déjà le français, et le téléviseur ou la plateforme qui rediffuse la vidéo se fie au même attribut pour décider quoi proposer sous le bouton d’accessibilité.

Trois variantes, plus discrètes :

  • Les sous-titres brûlés dans l’image. On ne peut ni les désactiver, ni les agrandir, ni les rechercher, ni les envoyer sur un afficheur braille. Faute de <track>, le test 4.3.2 ne s’y applique même pas.
  • Les sous-titres automatiques non relus. Pas de ponctuation, des noms propres inventés, aucun bruit signalé : ils existent, mais leur pertinence tombe au critère 4.4.
  • La transcription en pièce jointe. Le référentiel accepte un lien adjacent, donc un document séparé peut passer. C’est un choix, pas une obligation — et il coûte la recherche dans la page, la copie du texte, et un fichier de plus dont l’accessibilité est à auditer.

Le code, pas à pas

1. La balise <track>, et son kind

<video controls src="cadrer-une-capture.mp4" poster="cadrer-une-capture.jpg">
	<track
		src="cadrer-une-capture.vtt"
		kind="captions"
		srclang="fr"
		label="Français (sourds et malentendants)"
		default
	/>
</video>

kind="captions" est ce que le test 4.3.2 vérifie. srclang donne la langue de la piste, label donne le nom que le lecteur affiche dans son menu — écrivez-y la nature de la piste, sinon l’utilisateur choisit entre « Français » et « Français » sans savoir lequel porte les bruits.

default préselectionne la piste. Deux pièges de mise en ligne, qui ne se voient pas à l’œil : un fichier .vtt servi avec un type MIME autre que text/vtt est ignoré, et un fichier servi depuis un autre domaine exige crossorigin="anonymous" sur la vidéo et les en-têtes CORS en face. Dans les deux cas, l’attribut est juste et la piste n’apparaît pas.

2. Le fichier WebVTT

WEBVTT

00:00:04.000 --> 00:00:09.000
Narratrice : un rapport d'audit
se relit six mois plus tard.

00:00:14.000 --> 00:00:18.000
[Déclic de l'appareil photo]

Un en-tête WEBVTT, puis des blocs séparés par une ligne vide. Chaque bloc porte ses bornes, en heures:minutes:secondes.millisecondes, et son texte. L’identifiant qui précède parfois l’horodatage est facultatif.

Le format admet du positionnement (line, align) : servez-vous-en pour déplacer un sous-titre qui recouvrirait un texte incrusté dans l’image, pas pour faire de la mise en scène.

3. Ce qu’on sous-titre en plus du dialogue

Le glossaire du référentiel définit les sous-titres synchronisés comme le « texte des informations audio (paroles d’un personnage, bruit important pour comprendre l’action…) ». Trois choses sont donc à écrire au-delà des paroles :

  • Les bruits qui portent l’information. [Déclic de l'appareil photo], [Alarme], [Rires dans la salle]. Pas le bruit d’ambiance qui n’apprend rien.
  • Qui parle, dès qu’il y a plus d’une voix ou une voix hors champ. Le glossaire recommande un mécanisme distinctif : crochets, italique, ou annonce explicite du type Voix off : ….
  • La musique, quand elle signifie. [Musique inquiétante] a un sens ; [Musique] posé sur trois minutes de générique n’en a aucun.

Une chanson dont les paroles comptent se sous-titre comme du dialogue.

4. Le rythme et la longueur de ligne

Rien dans le RGAA ne fixe de chiffre : le critère 4.4 demande des sous-titres « pertinents », et la pertinence s’apprécie. Les guides professionnels — celui de la BBC est le plus consultable — convergent malgré tout sur deux règles.

Deux lignes au plus, et une longueur de ligne courte : au-delà, l’œil quitte l’image trop longtemps pour lire. Une durée proportionnelle au texte, avec un plancher : un sous-titre de six mots affiché huit dixièmes de seconde n’est pas lisible, même s’il est exact.

Quand la parole va plus vite que la lecture, on condense. Reformuler plus court en gardant le sens vaut mieux qu’une transcription mot à mot que personne ne finit — c’est une décision d’écriture, et c’est ce qui distingue un sous-titrage d’une retranscription automatique.

5. La transcription : du HTML, dans la page

<h2>Transcription de « Cadrer une capture d'audit »</h2>

<ol>
	<li>
		<button type="button" data-instant="4">00:04</button>
		<p>Narratrice : un rapport d'audit se relit six mois plus tard.</p>
	</li>
	<li>
		<button type="button" data-instant="14">00:14</button>
		<p>[Déclic de l'appareil photo] L'auditeur photographie l'élément fautif.</p>
	</li>
</ol>

Un script court les relie à video.currentTime — sans lui, l’horodatage n’est qu’un texte.

Un titre, une structure, du texte : rien de plus qu’une page ordinaire. Le critère 4.2 renvoie à la définition du glossaire, qui exige deux choses — la totalité de ce qui est exprimé oralement, et les informations descriptives nécessaires à une compréhension équivalente de l’action, dans l’ordre chronologique. Une transcription n’est donc pas le fichier de sous-titres recollé : ce qui se voit sans s’entendre doit y être écrit aussi.

Les repères temporels ne sont utiles que sur un média long ; en dessous de quelques minutes, ils encombrent plus qu’ils n’aident. S’ils sont là, faites-en des boutons qui déplacent réellement la lecture, comme dans la démo — un horodatage inerte est une décoration.

Un lien est possible, mais il vise alors le fichier, pas la page : <a href="cadrer-une-capture.mp4#t=4"> ouvre la vidéo seule dans le lecteur du navigateur et quitte donc la page et sa transcription. Écrit sur la page elle-même, href="#t=4" ne déplace rien : le navigateur y cherche un élément d’id « t=4 » et ne le trouve pas.

Le référentiel accepte la transcription adjacente au média ou atteignable par un « lien ou bouton adjacent » : dans les deux cas, elle doit être trouvable depuis le média, pas rangée dans une page « ressources ». Si elle est repliée, repliez-la avec un accordéon — un panneau masqué par hidden, et non par une hauteur nulle.

6. En avez-vous besoin ?

Oui, sauf cas particulier du critère 4.1. Il en liste sept, et les cinq premiers sont étroits : un média purement décoratif, un média qui est lui-même l’alternative d’un contenu de la page (une vidéo en langue des signes), un média qui sert à accéder à une version agrandie, un CAPTCHA, ou un média dont le test perdrait son sens si le texte était donné.

Les deux derniers sont des exemptions de date, et elles couvrent une grande part des vidéos déjà en ligne : pour les services de l’État, les collectivités territoriales et leurs établissements, un média publié entre le 23 septembre 2019 et le 23 septembre 2020 sur un site créé depuis le 23 septembre 2018 est exempté ; pour les personnes de droit privé mentionnées aux 2° à 4° du I de l’article 47 de la loi du 11 février 2005, un média publié avant le 23 septembre 2020 l’est aussi. Le référentiel précise que ces cas particuliers valent également pour les critères 4.2, 4.3 et 4.5 : un média exempté l’est pour la transcription comme pour les sous-titres.

La vraie question est en amont : cette information avait-elle besoin d’être une vidéo ? Une page de texte se lit, se cherche, se traduit et se corrige — et elle n’a ni sous-titres ni transcription à tenir à jour.

Au clavier

ToucheEffet
TabAtteint les contrôles du lecteur, puis les repères temporels de la transcription.
Entrée / EspaceLance ou suspend la lecture quand le bouton de lecture a le focus ; sur un repère temporel, y ramène la lecture.
← →Sur un lecteur natif <video controls> qui a le focus, recule ou avance dans le média.

Le bouton qui active les sous-titres est un contrôle comme les autres : il doit se prendre au clavier et s’activer au clavier, ce que demande le critère 4.11. C’est le premier défaut des lecteurs personnalisés, où le menu des pistes est souvent le seul contrôle oublié.

Ce que le lecteur d’écran restitue

La restitution du lecteur lui-même varie beaucoup d’un lecteur vidéo à l’autre, et il n’y a pas de formulation attendue. Ce qui doit l’être, en revanche : le bouton des sous-titres porte un nom — « Sous-titres, bouton » — et la transcription se parcourt comme du texte de page, titre compris, « Transcription de « Cadrer une capture d’audit », titre niveau 2 ».

Si aucun bouton de sous-titres n’apparaît, la piste n’est pas chargée : vérifiez le type MIME du .vtt et, pour un fichier distant, les en-têtes CORS. Une 404 sur un fichier de sous-titres ne provoque aucun message visible.

Si vous entendez « Français, bouton » sans savoir ce que la piste contient, c’est le label qui est trop vague. Et si la transcription n’existe qu’au bout d’un lien perdu en pied de page, elle n’est pas adjacente au média : le critère 4.1 demande qu’on la trouve depuis lui.

Checklist

  • kind="captions" sur le <track> — kind="subtitles" est la traduction.
  • srclang juste, et un label qui dit la nature de la piste.
  • Les bruits signifiants et l’identité des locuteurs sous-titrés, pas seulement les paroles.
  • Deux lignes au plus par sous-titre, affichées le temps qu’il faut pour les lire.
  • Une transcription en HTML, adjacente au média ou derrière un lien adjacent.
  • La transcription rend l’oral et le visible, dans l’ordre chronologique.
  • Vérifier que le .vtt est bien servi en text/vtt, et en CORS s’il est distant.

Les critères RGAA en jeu

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

    Le test 4.3.2 ne laisse aucune marge : des sous-titres diffusés par une balise track doivent porter l'attribut kind à la valeur captions. Un fichier irréprochable déclaré en subtitles est en échec.

  • Critère 4.4 — Pertinence des sous-titres

    Sous-titrer le seul dialogue laisse tomber les bruits qui portent l'action, que la définition du glossaire range dans les sous-titres. Différencier les locuteurs, elle le recommande en note — c'est la pertinence exigée ici qui l'impose en pratique.

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

    Des sous-titres ne dispensent pas du reste : pour un média synchronisé, le critère réclame en plus une transcription textuelle adjacente, un lien adjacent vers elle, ou une audiodescription.

  • Critère 4.2 — Pertinence de la transcription

    Une transcription qui ne reprend que les paroles n'est pas pertinente : elle doit rendre tout ce qui est exprimé oralement et les informations descriptives nécessaires, dans l'ordre chronologique.

Vérifiez votre composant avec l'extension

Pour aller plus loin

Sources