Accessibilité d'une vidéo en HTML5 avec sous-titres en JavaScript

Article original écrit par Bruce Lawson et accessible ici.
Traduction par Nicolas Chevallier, publiée le 02 février 2010.
Licence : Cette traduction est mise à disposition sous un contrat Creative Commons

Accessibilité et balise video

HTML5 nous permet enfin d'intégrer de la vidéo dans nos pages web, directement lisible par les navigateurs et sans avoir à installer de plugin. Cette fonctionnalité a été ajoutée à Opera depuis la version 10.5 pre-alpha (Windows et Linux pour le moment, la version Mac est en cours de développement.)

Le gros point noir en ce qui concerne la vidéo - qu'il s'agisse d'HTML5 ou de solutions propriétaires - est l'accessibilité. Que peuvent faire les développeurs consciencieux qui voudraient offrir une alternative textuelle à ceux qui ne peuvent accéder à la vidéo ? En HTML5, il n'y a pas d'attribut alt sur l'élément video comme pour l'élément img, mais vous pouvez ajouter un contenu alternatif à l'intérieur de l'élément, comme ceci :

<video>
Your browser doesn't support the open Ogg Theora codec. 
Please <a href="video.ogg">download the video</a> and view offline.
</video>

Cependant, selon la recommandation :

...ce contenu ne devrait pas servir à résoudre des problèmes d'accessibilité. Pour qu'une vidéo soit accessible aux aveugles, aux sourds et aux personnes avec handicaps physiques ou cognitifs, les auteurs devraient fournir des contenus alternatifs et/ou intégrer les aides à l'accessibilité (comme les sous-titres) à l'intérieur du flux vidéo.

En théorie, les fichiers vidéo devraient intégrer leurs propres sous-titres - pas plaqués sur les images, mais dans un fichier séparé au format texte, empaqueté dans un fichier conteneur avec la vidéo elle-même. Ainsi, l'auteur du contenu, qui est le mieux placé pour le connaître, écrit les sous-titres une seule fois. La vidéo peut être ensuite facilement intégrée sur d'autres pages, en proposant automatiquement des légendes ou des transcriptions.

Malheureusement, en pratique, personne ne sait comment faire, et aucun navigateur ne sait lire ces données, ni de quelle manière les présenter à l'utilisateur. Nous avons donc besoin d'une sorte de hack pour combler ce manque. Voici un exemple ("Proof of concept" en anglais) qui stocke une transcription en texte dans la page, à l'intérieur d'un élément <div id="transcript">. Si un utilisateur ne dispose pas de JavaScript, la vidéo est simplement affichée avec les contrôles du navigateur, ainsi qu'une partie "transcript" à la suite, contenant la transcription.

Si l'utilisateur dispose de JavaScript, les lignes de la transcription seront superposées une par une au-dessus de la vidéo, comme des légendes. Elles seront encore en texte brut, de sorte que les outils d'assistance pourront accéder aux légendes, tout en étant visible à l'écran, et elles seront synchronisées avec la vidéo.

Voici un exemple vidéo démontrant la technique : Exemple de vidéo sous-titrée - How to Leverage a Synergy. (Vous devez utiliser un navigateur disposant du codec vidéo Ogg).

Cette exemple ne fonctionne pas dans Safari, car Safari ne prend pas en charge le codec vidéo Ogg que Opera, Firefox et Chrome prennent en charge. La démo fonctionne si vous encodez la vidéo pour Safari aussi, et utilisez des éléments source multiples (un pour Ogg, un pour mp4). Internet Explorer ne prend pas encore en charge les éléments video

Si vous affichez le code source, vous verrez que la transcription est structurée sémantiquement à l'aide de paragraphes, et chaque sous-titre est placé à l'intérieur d'un élément span pour se superposer à la vidéo, car ce qui est affiché et quand il doit être affiché n'est pas défini par le sens mais par le temps et les contraintes d'affichage (ne pas remplir l'écran de texte par exemple).

Pour que le script sache quand afficher chaque sous-titre, j'ai ajouté des informations de temps pour chacun d'eux. Plutôt que de les ajouter dans le contenu, j'utilise une nouvelle fonctionnalité de HTML5, l'attribut personnalisé data-. Cet attribut permet de transmettre des données à des scripts. Vous pouvez utiliser le nom que vous souhaitez pour ces attributs, mais ils doivent impérativement commencer par "data-". Dans cet exemple, j'ai utilisé data-begin et data-end. Ces noms correspondent aux spécifications "W3C Timed Text" et "SVG/SMIL Animation".

L'attribut data-begin prend comme valeur le temps écoulé depuis le début de la vidéo, à partir duquel je souhaite faire apparaître le span. L'attribut data-end est ensuite utilisé pour définir le moment où le sous-titre doit disparaître. Ainsi :

<span data-begin=1 data-end=6>Hi, my name's Dr Archimedes Einstein…</span>

var nodes = document.querySelectorAll('#transcript span');

text-shadow: black 1px 1px 3px;

var v = document.querySelector('video'); 
var now = v.currentTime;

#transcript [data-begin]:before 
  {content: " [" attr(data-begin) "s-" 
  attr(data-end)"s] "; 
  font-size:80%;}