Accessibilité des contenus multimédias

Derek Herman
Derek Herman
Joe Medley
Joe Medley

Dans cet article, vous découvrirez le format WebVTT (Web Video Text Tracks), utilisé pour décrire des données textuelles temporisées comme les sous-titres afin de rendre les vidéos plus accessibles à votre audience.

L'accessibilité n'est pas comme la cerise sur le gâteau. Il ne s'agit jamais de quoi que ce soit. en attente dans l’espoir de l’introduire plus tard. Sous-titres et lecteur d'écran les descriptions constituent le seul moyen pour de nombreux utilisateurs de découvrir vos vidéos. juridictions, elles sont même requises par la loi ou la réglementation.

Ajouter des tags <track>

Pour ajouter des sous-titres ou des descriptions de lecteur d'écran à une vidéo Web, ajoutez un <track> dans une balise <video>. En plus des sous-titres et du lecteur d'écran descriptions, les balises <track> peuvent également être utilisées pour les sous-titres et les titres de chapitres. La balise <track> peut également aider les moteurs de recherche à comprendre le contenu d'une vidéo. Toutefois, ces fonctionnalités n'entrent pas dans le cadre de cet article.

<ph type="x-smartling-placeholder">
</ph> Capture d&#39;écran montrant les sous-titres affichés à l&#39;aide de l&#39;élément de suivi dans Chrome sur Android
Capture d'écran montrant les sous-titres affichés à l'aide de l' élément de suivi dans Chrome sur Android
.

La balise <track> est semblable à l'élément <source> en ce sens que les deux ont un src. qui pointe vers le contenu référencé. Pour une balise <track>, elle pointe vers une Fichier WebVTT. L'attribut label définit les performances d'un titre en particulier. identifiés dans l'interface.

Pour proposer des titres dans plusieurs langues, ajoutez une balise <track> distincte pour chacune. Fichier WebVTT que vous fournissez et indiquez la langue à l'aide du srclang .

Voici un exemple de balise <video> avec deux balises <track>. Un que vous pouvez consulter sur Glitch (source).

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>

Structure de fichiers WebVTT

Vous trouverez ci-dessous un fichier WebVTT fictif pour la démonstration présentée ci-dessus. Le fichier est un fichier texte contenant une série de repères. Chaque signal est un bloc de texte à afficher à l'écran et la période pendant laquelle il sera 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 suivi est appelé un cue. Chaque signal a une heure de début et heure de fin séparée par une flèche, avec un texte de repère dans la ligne ci-dessous. Signaux peuvent également éventuellement des ID tels que railroad et manuscript dans l'exemple ci-dessous. 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. Cela signifie que les nombres doivent être complétés par zéro si nécessaire: heures, minutes et secondes. doit avoir deux chiffres (00 pour une valeur nulle) et le nombre de millisecondes doit avoir trois (000 pour une valeur nulle). Il existe un excellent programme de validation WebVTT à l'adresse Live WebVTT Validator, qui recherche les erreurs de mise en forme de l'heure de temps non séquentiels.

Vous pouvez créer un fichier VTT manuellement, car de nombreux services seront les créer pour vous.

Comme vous pouvez le voir dans nos exemples précédents, le format WebVTT est assez simple. Ajoutez simplement vos données textuelles en même temps que les codes temporels.

Mais que faire si vous souhaitez que vos légendes s'affichent à une autre position un alignement à gauche ou à droite ? Peut-être pour que les sous-titres correspondent à ceux de l'intervenant actuel. ou de rester à l'écart du texte dans l'appareil photo. WebVTT définit des paramètres pour ce faire, et plus encore, directement dans .vtt. Notez la façon dont l'emplacement des sous-titres est défini en ajoutant après les définitions des 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.

Autre fonctionnalité pratique : la possibilité d'appliquer un style aux repères à l'aide de CSS. Peut-être voulez-vous d'utiliser un dégradé linéaire gris comme arrière-plan, avec une couleur de premier plan papayawhip pour tous les sous-titres et le texte en gras peachpuff en couleur.

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

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

Si vous souhaitez en savoir plus sur le style et l'ajout de tags la spécification WebVTT est une excellente source d'exemples avancés.

Types de pistes de texte

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

  • captions: pour les sous-titres issus de transcriptions et éventuellement de traductions de n'importe quel son. Adapté aux personnes malentendantes et lorsque la vidéo est le son coupé.
  • subtitles: pour les sous-titres, c'est-à-dire les traductions de conversations et de texte dans une langue différente de celle de la vidéo.
  • descriptions: pour les descriptions des parties visuelles du contenu vidéo. Adapté aux personnes malvoyantes.
  • chapters: est destiné à s'afficher lorsque l'utilisateur navigue dans le vidéo.
  • metadata: non visible et peut être utilisé par les scripts.

Maintenant que vous connaissez 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. Ensuite, vous consultez les cadres multimédias et découvrez comment ils peuvent vous aider à ajouter sur votre page Web tout en offrant des fonctionnalités avancées.