しらぎくのウェブサイト作成入門メモ
しらぎくのウェブサイト作成入門制作者のメモ。

HTML5 で動画・音声をアクセシブルにするには

HTML5 では動画や音声などの埋込要素が制定されました。

でも、動画や音声をアクセシブルにするための方法は余りにも手間が掛かるものです。

目次


<video>要素・<audio>要素の内容はアクセシビリティのためではない

HTML5 では、動画・音声の埋込には<video>要素<audio>要素が使われます。

これらの要素の内容は、HTML5 世代前のユーザエージェントのための代替コンテンツであり、動画が閲覧出来ない場合の代替コンテンツではありません。

例えば、MPEG4 動画が埋込めない場合に、代わりに<object>要素で埋込むなどのような使い方を想定しております:

<video poster="/video/HORIKITA_Maki/poster.JPG" src="/video/HORIKITA_Maki/video.MP4" width="320" height="240" controls="controls">
    <object type="video/mp4" data="/video/HORIKITA_Maki/video.MP4" width="320" height="240">
        <param name="src" value="/video/HORIKITA_Maki/video.MP4" /><img alt="" src="/video/HORIKITA_Maki/anime.GIF" width="320" height="240" />
        </object>
    </video>

この例では、MPEG4 動画を<video>要素で埋込んでおりますが、HTML5 非対応環境では

  1. <object>要素を用いてプラグインを通じて埋込み、
  2. それもダメな場合にアニメーテッド GIF 画像に依るスライドショウを埋込む

ようにしております。

でも、視覚障害などで動画が見られない場合には全く役には立ちません。

動画・音声をアクセシブルにするには…?

それでは、動画や音声をアクセシブルにするにはどうしたら良いでしょうか。

HTML5 の仕様で定められた手法

HTML5 の仕様では、

  1. 動画・音声に同期するテキストトラックを別途作成し、
  2. それを当該<video>要素または<audio>要素内直下に<track>要素で与える

事で実現します。

<track>要素について

<track>要素は動画や音声と同期するテキストトラックです。

kind 属性の値に依り

の種別を指定出来ます。

をそれぞれ用意する事となります。

テキストトラックには、主に UTF-8 でエンコードされた WebVTT と呼ばれる形式で作成されたテキストファイルを用います。

その他の方法

ですが、障害者向けにテキストトラックを作成するのは余りにも手間が掛かり過ぎます。

動画や音声の内容をテキストで書下す

そこで、いっその事文書内に

テキストで記述するのが確実でしょう。

特に動画であれば、各シークェンスの場面を JPEG 画像などにしてそれも見られるようにする事で、動画が表示されない環境でもある程度コンテンツを利用出来るようになります。

以下に例を示します:

<video poster="/video/HORIKITA_Maki/poster.JPG" src="/video/HORIKITA_Maki/video.MP4" width="320" height="240" controls="controls"></video><dl class="story">
    <dt>
        <a type="image/jpeg" href="/video/HORIKITA_Maki/s01.JPG">
            <img width="80" height="60" alt="場面 1" src="/video/HORIKITA_Maki/s01-Thumb.JPG" />
            </a>
        </dt>
    <dd>
        (場面 1の説明文)
        </dd></dl>

この例では、<dl>要素に依るリスト形式であらすじを示しております。

でそれぞれマークアップしております。


但し、テキストを見た結果動画を見なくても良くなったと言う事にもなり兼ねませんが…。

とは言え、テキストで内容を書下す事で検索エンジンなども内容を把握し易くなり、検索され易くなる利点もあります。

ご案内。

制作者の創作キャラクタ

創作キャラクタ・堀北真希うさぎ
主な収録作品
紀子ちゃん(神崎紀子)
主な収録作品

しらぎく日記システム 第 0.685版 (平成29年08月15日)