HTML5でアクセシブルな字幕付きビデオを

OperaでWebエバンジェリストを努めるBruce Lawsonが、「アクセシブルなHTML5のビデオ」という記事を実装方法とともに紹介しています。

• Accessible HTML5 Video with JavaScripted captions
• デモ：“HTML5 Video with JavaScripted synchronised captions: demo”
  (video要素とOgg Theoraをサポートするブラウザーが必要です)

videoのアクセシビリティ

video要素やaudio要素のアクセシビリティは、動画や音声にデータとして情報を含む事が望ましいとされています。ただ、それが難しい場合のことを考えて、このデモではビデオの字幕をページ内に記述し、それをビデオの上に重ねるという手法で字幕を表示させています（JavaScriptが有効でない環境では、トランスクリプトが表示されます）。

タイムシートはカスタムデータ属性で

さて、ビデオの内容もそうなのですが、このデモでなによりユニークなのはタイムシート情報をキャプションを囲むspan要素に持たせているところです。

HTML5にはアプリケーション作者や文書作成者が独自の情報を埋め込める「カスタムデータ属性」が用意されており、デモではこれを利用しキャプションに対応する動画の開始時間と終了時間を埋め込んでいます。

カスタムデータは、data-***というかたちで要素に埋めこめます。デモのソースコードを抜き出してみましょう。

<span data-begin=1 data-end=6>Hi, my name's Dr Archimedes Einstein ...
<span data-begin=6 data-end=9>in a very famous town that you're too ...
<span data-begin=9.5 data-end=11.5>Anyway, today we're going to talk ...
<span data-begin=12 data-end=15>A lot of people are worried about ...

HTML5では、埋め込んだ情報はelement.datalist.***から取得できると定義されているので、この場合はspan.datalist.begin/span.datalist.endでデータにアクセスできる事になります。しかし、現時点でこのカスタムデータ属性を実装しているブラウザーがないことから、デモでは属性の名前から値をとっています。

そして、取得したデータに該当する再生時間になったら、キャプションを表示する箇所にそのテキストを挿入するという仕組みです。

videoのアクセシビリティやカスタムデータ属性についてはまだ議論中なのですが、とても面白いデモだなと思いました。