RGAA Lab

Composants accessibles

L'audio

Un fichier son seul n'a qu'une alternative : la transcription textuelle. Elle doit restituer tout ce qui est dit — et qui le dit, ce que la moitié des transcriptions d'entretien oublie.

5 critères RGAA en jeu

Essayez-le

Extrait sonore de démonstration — deux notes et une sonnerie

Six secondes, sans parole. Fabriqué dans la page pour que la transcription ci-dessous se vérifie à l'oreille.

Transcription

Dans l'ordre chronologique, avec la source de chaque son.

  1. 0:00 Tonalité grave — Une note basse tenue, environ une seconde et demie.
  2. 0:02 Tonalité aiguë — Une note plus haute, de même durée, qui répond à la première.
  3. 0:04 Sonnerie — Un signal bref et perçant interrompt l’échange.
  4. 0:05 Tonalité grave — La note basse reprend seule et clôt l’extrait.

Remplacez « Tonalité grave » par le nom de la personne qui parle, et vous avez la transcription d'un entretien : la même exigence, savoir qui produit chaque son — et noter la sonnerie, que le dialogue seul aurait perdue.

Tabulez jusqu’au lecteur : selon le navigateur, il prend le focus d’un bloc (Chrome, Safari) ou commande par commande (Firefox) — dans les deux cas le clavier pilote la lecture, et rien de tout cela n’est écrit par nous. Lancez la lecture et suivez la transcription — le repère avance avec le son, et chaque ligne dit quelle source produit ce que vous entendez. C’est là tout le sujet de cette fiche.

Cette démo existe aussi en page autonome.

L’erreur courante

Un entretien à deux voix, et une transcription qui ne dit jamais qui parle.

<audio src="/media/entretien.mp3" controls></audio>

<h2>Transcription</h2>
<p>
	Oui, tout à fait. Et sur ce point précis, la doctrine a changé en 2023.
	Vous voulez dire que la position officielle a bougé ?
	Elle a bougé, oui. Mais personne ne l'a écrit nulle part.
</p>

Le texte est complet, la ponctuation est bonne, et pourtant l’enregistrement reste incompréhensible. Dans un entretien, qui dit quoi porte la moitié du sens : sans attribution, on ne sait plus si « la doctrine a changé » est l’affirmation de l’invité ou la question du journaliste. Celui qui entend le média le sait aux voix ; celui qui lit la transcription ne le sait par rien.

Le second manque est plus discret : la transcription ne contient que de la parole. La sonnerie qui interrompt, les rires qui suivent une phrase, les dix secondes de silence après une question gênante — tout cela est du sens, et tout cela est perdu.

Trois variantes, aussi répandues :

  • La transcription automatique publiée telle quelle. Les noms propres sont faux, les sigles inventés, la ponctuation absente. Le lecteur croit lire ce qui a été dit ; il lit autre chose, sans moyen de le savoir.
  • Le résumé baptisé « transcription ». Il donne les idées et retire les formulations, les chiffres et les nuances : ce n’est plus une alternative, c’est un autre contenu.
  • autoplay sur la page d’accueil. Le son se superpose à la voix de synthèse. L’utilisateur d’un lecteur d’écran n’entend plus rien d’utile et quitte la page pour faire taire le bruit.

Le code, pas à pas

1. Le lecteur natif

<audio src="/media/entretien.mp3" controls></audio>

controls donne la lecture, la pause, le volume et la position — chaque commande atteignable à la tabulation et actionnable au clavier, avec un nom accessible que le navigateur fournit et traduit. C’est la réponse la plus courte au critère 4.11, et elle ne coûte rien à maintenir.

Un lecteur personnalisé reprend tout à zéro : les rôles, les noms, les états, le clavier, et l’annonce du changement d’état quand « lecture » devient « pause ». Le cas majoritaire, ce sont des div cliquables qui échouent dès la première tabulation.

2. Dire de quoi il s’agit, juste à côté

<h3 id="entretien-titre">Entretien avec Claire Dubois — la doctrine de 2023</h3>
<p>17 minutes. Enregistré le 4 mars 2026.</p>

<audio src="/media/entretien.mp3" controls aria-labelledby="entretien-titre"></audio>

Le critère 4.7 demande que le contenu textuel adjacent identifie le média. Un titre et une ligne de contexte suffisent, à condition qu’ils identifient celui-là : sur une page qui porte trois épisodes, « Écouter » répété trois fois n’identifie rien.

L’aria-labelledby sur le lecteur est un supplément utile — il donne un nom au groupe de commandes — mais il ne remplace pas le texte visible, qui est ce que le critère exige.

3. La transcription, adjacente et identifiable

Le référentiel admet deux formes, et deux seulement, pour un média seulement son : une transcription adjacente clairement identifiable, ou une transcription atteignable par un lien ou bouton adjacent.

Lien ou bouton adjacent a une définition limitative : le lien ou bouton « doit être adjacent visuellement dans la représentation graphique (CSS activé) et dans le code HTML », et « dans le code HTML, le lien ou bouton doit se situer juste avant ou juste après l’élément auquel il est adjacent ». Un lien vers la transcription rangé en pied de page ne satisfait pas le critère.

<audio src="/media/entretien.mp3" controls aria-labelledby="entretien-titre"></audio>

<h4 id="entretien-transcription">Transcription de l'entretien</h4>
<div>…</div>

Écrire la transcription dans la page plutôt que dans un fichier à ouvrir est une préférence, pas une exigence : le glossaire accepte « un fichier texte […] consultable suivant un lien ». Elle se défend quand même — le texte de la page se cherche au navigateur, se copie, s’indexe, se lit sur un téléphone sans rien télécharger, et ne devient pas un document séparé qui cesse d’être mis à jour.

Si la longueur gêne, repliez-la dans un accordéon placé juste après le média : le contenu reste dans la page, et le bouton qui l’ouvre est adjacent.

4. Ce que la transcription doit contenir

Le glossaire est limitatif ; le voici tel quel. La transcription textuelle donne accès, indépendamment de la consultation du média, à :

La totalité de ce qui y est exprimé oralement ; Toutes les informations descriptives nécessaires à une compréhension équivalente de l’action.

Et : « Ces informations textuelles doivent être présentées dans l’ordre chronologique de leur apparition dans le média temporel. »

Pour un contenu seulement son, « les informations descriptives » sont ce qui s’entend sans se dire — d’où la structure qui marche :

<h4 id="entretien-transcription">Transcription de l'entretien</h4>
<ol aria-labelledby="entretien-transcription">
	<li><b>Marc Vidal, journaliste</b> — La position officielle a-t-elle bougé ?</li>
	<li><b>Claire Dubois</b> — Elle a bougé, oui. Mais personne ne l'a écrit.</li>
	<li><i>Une sonnerie de téléphone interrompt la réponse.</i></li>
	<li><b>Claire Dubois</b> — Pardon. Où en étions-nous ?</li>
</ol>

Trois règles tiennent tout le reste : nommer le locuteur à chaque changement de voix, noter les sons qui portent du sens — sonnerie, rires, applaudissements, silence significatif — et ne rien couper, y compris l’introduction qui « n’apporte rien ». Une transcription qui commence à la deuxième minute est incomplète, donc non pertinente au sens du critère 4.2.

Les horodatages ne sont exigés nulle part. Ils rendent la transcription utilisable comme table des matières, et permettent de retrouver un passage à l’oreille — c’est une bonne pratique, à recommander comme telle.

5. Le son qui démarre seul

Le critère 4.10 pose une seule question : chaque son déclenché automatiquement est-il contrôlable ? Trois issues, dont une seule suffit :

  • la séquence dure trois secondes ou moins ;
  • elle peut être stoppée sur action de l’utilisateur ;
  • son volume se règle indépendamment du volume du système.

Le critère ne dit rien de l’endroit où placer ce contrôle : un bouton en pied de page le satisfait. Le glossaire ajoute cependant une note — la méthode de contrôle du son devrait être disponible comme premier élément de la page. C’est une recommandation, et elle a une raison pratique : un utilisateur qui n’entend plus la voix de synthèse ne peut pas chercher longtemps.

En pratique, la réponse la plus simple reste de ne pas déclencher de son. Attention aussi à ce que vous ne voyez pas : les navigateurs bloquent souvent l’autolecture sonore, et un son muet chez vous peut se déclencher chez un utilisateur qui a déjà interagi avec le site.

6. Et si le média venait d’ailleurs ?

Un épisode servi par une plateforme de baladodiffusion, dans un iframe, reste sous votre responsabilité. Le lecteur ne vous appartient pas ; le texte qui identifie l’épisode et la transcription, si. Ce sont eux que l’audit regardera dans votre page, juste à côté du cadre.

Au clavier

Rien de ce tableau n’est à écrire : c’est le lecteur natif qui le fournit.

ToucheEffet
TabEntre dans le lecteur et passe d’une commande à la suivante : lecture, position, volume. Le découpage exact varie d’un navigateur à l’autre.
Entrée / EspaceActionne la commande qui a le focus — lecture ou pause sur le bouton de lecture.
← →Avance ou recule dans le média quand le focus est dans le lecteur — sur la barre de progression là où le navigateur la rend focalisable.
↑ ↓Monte ou baisse le son quand le focus est dans le lecteur — sur la commande de volume là où le navigateur la rend focalisable.
Tab (après le lecteur)Va à la transcription, qui est du texte ordinaire : aucune touche particulière, la lecture linéaire suffit.

Si vous avez écrit un lecteur personnalisé, ce tableau devient votre cahier des charges — et rappelez-vous que le critère 4.11 exige le clavier et le pointeur, pas l’un ou l’autre.

Ce que le lecteur d’écran restitue

Sur le lecteur : le nom du média, puis chaque commande avec sa nature et son état — de l’ordre de « Entretien avec Claire Dubois, lecture, bouton », puis « pause, bouton » une fois la lecture lancée. La formulation varie beaucoup d’un navigateur et d’un lecteur d’écran à l’autre ; les informations, non.

Sur la transcription : rien de particulier. C’est du texte, il se lit comme le reste de la page — et c’est précisément ce qu’on cherche.

Trois diagnostics inverses valent la peine :

  • Vous n’entendez que « audio » ou un nom de fichier : le média n’a pas de nom, et rien d’adjacent ne l’identifie.
  • Le bouton continue d’annoncer « lecture » alors que le son joue : le nom accessible n’est pas mis à jour, l’icône a changé toute seule.
  • Vous parcourez la page sans jamais rencontrer la transcription : elle n’y est pas, ou le lien qui y mène n’est pas adjacent au média.

Checklist

  • <audio controls> natif — un lecteur personnalisé est un chantier entier.
  • Un titre et une ligne de contexte adjacents, qui identifient ce média-là.
  • La transcription adjacente et identifiable, ou derrière un lien adjacent.
  • Le locuteur nommé à chaque changement de voix.
  • Les sons signifiants notés : sonnerie, rires, silence qui pèse.
  • Rien de coupé, rien de résumé, rien laissé au logiciel de reconnaissance.
  • Aucun son déclenché seul — ou alors trois secondes, ou un moyen de l’arrêter.

Les critères RGAA en jeu

Vérifiez votre composant avec l'extension

Pour aller plus loin

Sources