Accessibilité des contenus multimédias

Derek Herman
Derek Herman
Joe Medley
Joe Medley

Publié le 20 août 2020

Les sous-titres et les descriptions pour lecteurs d'écran sont le seul moyen pour de nombreux utilisateurs de profiter de vos vidéos. Dans certaines juridictions, ils sont même obligatoires par la loi ou la réglementation. Le format WebVTT (Web Video Text Tracks) permet de décrire des données textuelles synchronisées, telles que des sous-titres ou des sous-titres, afin de rendre vos vidéos plus accessibles.

Ajouter des tags <track>

Pour ajouter des sous-titres ou des descriptions pour les lecteurs d'écran à une vidéo Web, ajoutez une balise <track> dans une balise <video>. En plus des sous-titres et des descriptions pour les lecteurs d'écran, les balises <track> peuvent également être utilisées pour les sous-titres et les titres de chapitre.

Capture d'écran montrant les sous-titres affichés à l'aide de l'élément de piste dans Chrome sur Android.

La balise <track> est semblable à l'élément <source> dans la mesure où tous deux possèdent un attribut src qui pointe vers le contenu référencé. Pour une balise <track>, elle pointe vers un fichier WebVTT. L'attribut label spécifie comment un canal particulier peut être identifié dans l'interface.

Pour fournir des pistes pour plusieurs langues, ajoutez une balise <track> distincte pour chaque fichier WebVTT que vous fournissez et indiquez la langue à l'aide de l'attribut srclang.

Examinez cet exemple de balise <video> avec deux balises <track>. Ajoutez un élément <track> en tant qu'enfant de l'élément <video>.

<video controls>
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
  <track src="chrome-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
  <track src="chrome-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
  <p>This browser does not support the video element.</p>
</video>

Vous pouvez également consulter un exemple sur Glitch.

Structure de fichier WebVTT

Voici un fichier WebVTT fictif pour la démonstration. Il s'agit d'un fichier texte contenant une série de repères. Chaque repère est un bloc de texte à afficher à l'écran et la plage de temps pendant laquelle il est affiché.

WEBVTT

00:00.000 --> 00:04.999
Man sitting on a tree branch, using a laptop.

00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.

...

Chaque élément du fichier de piste est un repère. Chaque cue comporte une heure de début et une heure de fin, séparées par une flèche, suivies du texte du cue. Les signaux peuvent également avoir des ID, tels que railroad et manuscript. Les repères sont séparés par une ligne vide.

WEBVTT

railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth

manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.

Les moments de repère sont au format hours:minutes:seconds.milliseconds. L'analyse est stricte. Autrement dit, les nombres doivent être complétés par des zéros si nécessaire : les heures, les minutes et les secondes doivent comporter deux chiffres (00 pour une valeur nulle) et les millisecondes doivent comporter trois chiffres (000 pour une valeur nulle). Vous trouverez un excellent outil de validation WebVTT sur Live WebVTT Validator, qui recherche les erreurs de mise en forme de l'heure et les problèmes tels que les heures non séquentielles.

Vous pouvez créer un fichier VTT manuellement, mais de nombreux services le font pour vous.

Comme vous pouvez le constater dans nos exemples précédents, le format WebVTT est assez simple. Il vous suffit d'ajouter vos données textuelles ainsi que le timing.

Cependant, que faire si vous souhaitez que vos sous-titres s'affichent à une autre position avec un alignement à gauche ou à droite ? Par exemple, pour aligner les sous-titres sur la position actuelle de l'orateur ou pour ne pas gêner le texte de la caméra. WebVTT définit des paramètres pour ce faire, et plus encore, directement dans le fichier .vtt. Notez comment l'emplacement des sous-titres est défini en ajoutant des paramètres après les définitions d'intervalles de temps.

WEBVTT

00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.

Une autre fonctionnalité pratique est la possibilité de styliser des repères à l'aide de CSS. Vous souhaitez peut-être utiliser un dégradé linéaire gris comme arrière-plan, avec une couleur de premier plan de papayawhip pour tous les sous-titres et un texte en gras de couleur peachpuff.

video::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}

video::cue(b) {
  color: peachpuff;
}

Pour en savoir plus sur le style et le taggage de signaux individuels, la spécification WebVTT est une bonne source d'exemples avancés.

Types de pistes de texte

Avez-vous remarqué l'attribut kind de l'élément <track> ? Il permet d'indiquer la relation entre la piste de texte et la vidéo. Les valeurs possibles de l'attribut kind sont les suivantes :

  • captions : pour les sous-titres issus de transcriptions et éventuellement les traductions de tout contenu audio. Cette option convient aux personnes malentendantes et aux personnes malentendantes.
  • subtitles: pour les sous-titres, c'est-à-dire les traductions de discours et de texte dans une langue différente de la langue principale de la vidéo.
  • descriptions : pour décrire les éléments visuels du contenu vidéo. Adapté aux personnes malvoyantes.
  • chapters : doit s'afficher lorsque l'utilisateur navigue dans la vidéo.
  • metadata : non visible et peut être utilisé par les scripts.

Maintenant que vous comprenez les principes de base pour rendre une vidéo disponible et accessible sur votre page Web, vous vous interrogez peut-être sur des cas d'utilisation plus complexes. Découvrez les frameworks multimédias et comment ils peuvent vous aider à ajouter des vidéos à votre page Web, tout en offrant des fonctionnalités avancées.