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

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>要素に依るリスト形式であらすじを示しております。

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


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

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

メニュー

制作者の創作キャラクタ

堀北真希うさぎについて

堀北真希うさぎは、堀北真希ちゃんにうさ耳を付けた創作キャラクタです。

主な作品

  • 堀北真希うさぎのお誕生日(平成29年版)
  • 平成29年暑中見舞い動画・夏休みの堀北真希うさぎと紀子ちゃん(神崎紀子)
  • 堀北真希うさぎと史子ちゃん(山下史子)の並行世界:堀北真希うさぎと夏休みにアルバイトをしている史子ちゃん(平成28年 7月版)
  • 四月初めの午後、新学年一日目を終えて帰宅した堀北真希うさぎと先に帰宅していたうさ耳中学生(平成29年版)
  • 平成28年堀北真希うさぎヴァレンタイン企画動画
  • 成人式から帰宅途中の堀北真希うさぎと史子ちゃん(山下史子) (平成29年版)
  • 成人式を終えて電車で同級生の史子ちゃん(山下史子)と帰宅する堀北真希うさぎ(うさ耳女子大生) (平成26年版)
  • 平成28年クリスマス動画・堀北真希うさぎとうさ耳中学生姉妹のホワイトクリスマス
  • 初雪が降った十一月の午後、大学のゼミ室での堀北真希うさぎと皆藤愛子ぐま(くま耳大学院生) (平成28年版)
  • 紅葉の下、コスモスの花が咲く秋の道を歩く堀北真希うさぎ(平成28年版)
  • 休日の夜、部屋で課題のレポートを書いていた堀北真希うさぎ(平成28年11月版)
  • 女子高校生を家庭教師として指導している堀北真希うさぎ(平成28年10月版)
  • 昭和50年代後半のコンタクトレンズ専用目薬『マイティアCL』新発売仮想コマーシャル
  • 堀北真希うさぎと、美容院から出てきた妹の七五三に付添う千裕ちゃん(佐藤千裕) (平成28年版)
  • 学園祭の模擬授業で、講師・皆藤愛子ぐま(くま耳大学院生)を紹介する進行役・堀北真希うさぎ(平成28年版)
  • "目の日"の翌日の朝、洗面所でコンタクトレンズを入れていた堀北真希うさぎ(平成28年版)
  • 平成28年暑中見舞い・夏休みの学校での堀北真希うさぎと千裕ちゃん(佐藤千裕)
  • 六月の晴れた週末、ウェディングドレスに身を包んだ堀北真希うさぎ(平成27年版)
  • 10月10日の"目の日"に描いた、眼科医院待合室での堀北真希うさぎと紀子ちゃん(神崎紀子) (平成27年版)
  • 堀北真希うさぎの目は、ボシュロム ?堀北真希うさぎの平成初頭のボシュロム CM 風コンタクトレンズ装着場面〜
紀子ちゃん(神崎紀子)について

紀子ちゃん(神崎紀子)は制作者の幼馴染をモデルにした創作キャラクタです。

主な作品

  • さくら吹雪の放課後、学校から自宅に着いた紀子ちゃん(神崎紀子) (平成29年版)
  • 四月初めの春休みの朝、身支度時に窓の外に咲き始めた庭のさくらを見る紀子ちゃん(神崎紀子) (平成29年版)
  • さくらの花が咲く三月末の午後、眼鏡屋で買い物していた堀北真希うさぎとこれから買い物する紀子ちゃん(神崎紀子) (平成29年版)
  • 平成29年年賀動画・晴れ着を着た紀子ちゃん(神崎紀子)のお正月の朝
  • クリスマス前の十二月の夜、塾に行くため電飾を付けた家を出る紀子ちゃん(神崎紀子) (平成28年12月14日版)
  • 体育授業での紀子ちゃん(神崎紀子)とゆうちゃん(中村由子) (平成28年10月10日版)
  • さくらの開花が近い三月末の朝、家の玄関を出た紀子ちゃん(平成28年 3月版)
  • 十一月の週末の午後、お出掛け前に眼鏡を片付けている紀子ちゃん(神崎紀子) (平成28年版)
  • 文化祭でクラス合唱をしている紀子ちゃん(神崎紀子)とゆうちゃん(中村由子)たち(平成28年版)
  • ウェディングドレスに身を包んだ紀子ちゃん(神崎紀子) (平成28年版)
  • 四月末の午後、西洋式カントリーガール風エプロンドレスに身を包んだ紀子ちゃん(神崎紀子) (平成28年版)
  • 四月初めの春休み、自宅の庭での紀子ちゃん(神崎紀子) (平成28年版)
  • 学校の健康診断で視力検査を受けている紀子ちゃん(神崎紀子) (平成27年版)
  • 水泳補講後、更衣室でコンタクトレンズを入れる紀子ちゃん(神崎紀子)とゆうちゃん(中村由子) (平成26年版)
  • 平成24年春の挨拶・紀子ちゃん(神崎紀子)の新学年の朝
  • 夏休みの午後の堀北真希うさぎと市民プールから帰る紀子ちゃん(神崎紀子) (平成28年版)

しらぎく日記システム 第 0.720版 (平成29年10月02日)