Composant accessible · HTML ou React · outil gratuit
Vidéo accessible : sous-titres WebVTT, légende et transcription, code vérifié
Une vidéo accessible a des sous-titres synchronisés (un fichier WebVTT relié par <track kind="captions">), des contrôles utilisables au clavier, un texte à côté qui dit ce qu'elle montre et une transcription. Écrivez vos sous-titres ligne par ligne : le fichier .vtt est généré, puis lu par le navigateur de l'aperçu pour vérifier qu'il fonctionne.
Critères RGAA 4.1.2 : 4.1, 4.3, 4.7, 4.10, 4.11 · WCAG 2.2 : 1.2.1, 1.2.2, 1.2.3, 1.4.2, 2.1.1 · mis à jour le .
Générer et vérifier le composant
Réglez le composant et choisissez HTML ou React : le code se met à jour, l'aperçu fonctionne pour de vrai, et chaque version est vérifiée en direct par les contrôles du composant, un test de comportement et axe-core. « Introduire une erreur fréquente » montre ce que chaque contrôle détecte ; « Tester mon code » vérifie le vôtre.
Réglages
Temps en minutes:secondes, par exemple 1:05.5. Sans temps de fin, le sous-titre dure jusqu'au suivant. Une ligne sans temps est une 2e ligne du même sous-titre ; au-delà de 42 caractères, la ligne est coupée.
L'aperçu montre une vidéo d'exemple muette ; essayez la vôtre ci-dessous.
Pour voir le contrôle qui la détecte (les erreurs de comportement apparaissent avec « Tester le comportement »).
Elle est lue dans l'aperçu, sur votre ordinateur : rien n'est envoyé. Repérez les temps avec le compteur du lecteur.
<figure class="video">
<video controls preload="metadata" width="640" height="360">
<source src="presentation.mp4" type="video/mp4">
<track kind="captions" src="sous-titres.vtt" srclang="fr" label="Français" default>
<p>Votre navigateur ne lit pas cette vidéo : <a href="presentation.mp4">téléchargez-la</a>.</p>
</video>
<figcaption>Vidéo : Présentation de notre service</figcaption>
</figure>
<details class="transcription">
<summary>Transcription de la vidéo « Présentation de notre service »</summary>
<!-- À compléter : les sons utiles et les informations visibles seulement à l'image. -->
<p>Voici une vidéo d'exemple, sans son. Chaque sous-titre s'affiche au moment prévu. Le compteur, en haut à droite, indique le temps écoulé. Remplacez ces textes par les paroles de votre vidéo.</p>
</details>Aperçu réel (utilisable à la souris et au clavier)
Vérification en direct
Qui est gêné quand le composant est mal fait
- Personnes sourdes ou malentendantes : sans sous-titres, elles ne suivent pas ce qui est dit ; sans les sons utiles ([Rires], [Musique]), elles perdent une partie du sens.
- Personnes aveugles : ce qui n'est montré qu'à l'image (un texte à l'écran, une démonstration) leur échappe sans transcription ni audiodescription.
- Personnes sourdaveugles : seule une transcription, lue sur une plage braille, leur donne accès au contenu.
- Personnes qui naviguent au clavier : sans contrôles accessibles, elles ne peuvent ni lancer la vidéo ni activer les sous-titres.
Le comportement attendu
Au clavier
| Touche ou moment | Ce qui doit se passer |
|---|---|
| Tab | Atteint les contrôles de la vidéo : lecture, barre de progression, volume, sous-titres, plein écran (leur nombre et leur ordre varient selon le navigateur). |
| Espace ou Entrée | Active le contrôle qui a le focus : lance ou met en pause la vidéo, ouvre le menu des sous-titres. |
| Flèches | Sur la barre de progression ou le volume, avancent, reculent ou règlent le son. |
Avec un lecteur d'écran
- Les contrôles sont annoncés par leur nom (« Lire », « Couper le son », « Sous-titres ») ; la légende de la figure donne le sujet de la vidéo.
- Les sous-titres ne sont pas lus par le lecteur d'écran : ils servent aux personnes sourdes ou malentendantes. Une personne aveugle a besoin de la transcription ou d'une audiodescription.
Les erreurs les plus fréquentes
- Un fichier SRT renommé en .vtt. Sans la ligne WEBVTT et avec des virgules dans les temps, le navigateur n'affiche aucun sous-titre, sans message d'erreur.
- Des sous-titres automatiques non relus. La reconnaissance vocale se trompe sur les noms, les chiffres et la ponctuation.
- Des sous-titres réduits aux paroles. Pour une personne sourde, les sons utiles et l'indication de qui parle comptent aussi (sous-titres de type captions).
- Une transcription qui oublie l'image. Le texte affiché à l'écran et les actions montrées doivent y figurer.
- Une vidéo qui démarre seule avec le son. Le son couvre le lecteur d'écran avant que la personne trouve le bouton pause (critère 4.10).
Tester soi-même
- Activez les sous-titres dans le menu du lecteur : ils doivent apparaître en même temps que les paroles, jusqu'à la fin de la vidéo.
- Relisez-les en écoutant : paroles exactes, sons utiles, et qui parle quand ce n'est pas évident.
- Au clavier seul, lancez, mettez en pause, réglez le son et activez les sous-titres.
- Lisez la transcription sans regarder la vidéo : comprenez-vous tout ? Puis écoutez sans regarder l'image : si une information importante n'est que visible, une audiodescription est nécessaire (critère 4.5, niveau AA).
Ce qu'Accessia détecte dans un audit
Accessia repère les vidéos, sons et objets multimédias des pages : quand il n'y en a aucun, les critères du thème 4 sont proposés comme non applicables. Avec une vidéo, ils restent à vérifier : la justesse des sous-titres, la transcription et l'audiodescription se jugent en regardant la vidéo. Le générateur ci-dessus vérifie déjà ce qui se mesure : le fichier de sous-titres lu par le navigateur et sa synchronisation.
Auditer une page gratuitement, ou vérifiez ce composant directement dans votre éditeur de code avec le serveur MCP d'Accessia.
Critères RGAA concernés
- Critère 4.1 : Transcription ou audiodescription des médias
- Critère 4.3 : Sous-titres des vidéos
- Critère 4.7 : Identification des médias
- Critère 4.10 : Contrôle des sons automatiques
- Critère 4.11 : Médias contrôlables au clavier
Questions fréquentes
captions ou subtitles ?
captions : des sous-titres pour personnes sourdes et malentendantes, avec les sons utiles et l'indication de qui parle. subtitles : la traduction des paroles. Pour une vidéo dans la langue de la page, choisissez captions.
Et une vidéo YouTube ou Vimeo ?
Le lecteur intégré gère ses propres sous-titres : publiez sur la plateforme une piste relue (pas seulement automatique). Le fichier .vtt généré ici s'y importe. Sur votre page, ajoutez la légende et la transcription.
Les sous-titres incrustés dans l'image suffisent-ils ?
Ils comptent comme sous-titres synchronisés s'ils sont exacts et lisibles, mais la personne ne peut ni les agrandir ni les masquer. Une piste WebVTT est plus souple.
Faut-il aussi une audiodescription ?
Le critère 4.1 (niveau A) accepte une transcription ou une audiodescription. Au niveau AA, le critère 4.5 demande une audiodescription synchronisée quand des informations importantes ne passent que par l'image.
Ce code rend-il mon site conforme ?
Il rend ce lecteur conforme aux contrôles affichés. L'exactitude des sous-titres et de la transcription se juge en regardant la vidéo.