メディア・アクセシビリティ/Time-based Media

はじめに

Webコンテンツ・アクセシビリティ・ガイドライン(WCAG)のクイックリファレンスでいう「Time-based Media」とは、ここでは「メディア・アクセシビリティ」と意訳します。

動画を例にして言うと、スタートをクリックした始めから最後までのメディアコンテンツを指しますが、ニュアンスが伝わるような日本語が思いつかず、”時間ベースのメディア”、”時間基準のメディア”では、このWCAGの内容を理解しにくくなります。

ここのWebサイトでは、「Time-based Media」を「メディア・アクセシビリティ」と意訳して説明していきます。

さらにメディアとは、ビデオ、オーディオ、スライド、コンピューターシミュレーションなど、さまざまな形式のメディアを指します。

音声のみのメディアと映像のみのメディア

YouTubeを例にして言うと、音楽のYouTubeを再生したとき、テキストだけが流れる映像を見たことがあると思います。よく歌の歌詞が表示され、バックグラウンドで歌手の声が聞こえる動画です。

この場合、例えば”文字”だけが表示されていたら、目の見えない人は映像は何が流れているのかわかりません。

また、楽しい音楽とともに映像が流れている場合、耳の聞こえない人には映像しか見えません。

だからと言って、すべてのYouTubeで字幕や説明用音声を表示すると、目の見える人、耳の聞こえる人にとっては集中できなくなってしまいます。

そこで、すべての人に問題なく見たいメディアを見てもらうために、CCと字幕の選択ができるようにします。

YouTubeの画面右下にある「字幕」アイコンをクリックすると、制作した国の言語で字幕が表示されます。
さらに隣にある「設定」アイコンをクリックし、字幕＞自動選択　から自国の言葉を選択すれば、”自動文字起こし”が表示されます。

このように、体の不自由な人も、そうでない人も、自分に合った方法でストレスなくメディアを見れるようにします。

例外

キャプションはWCAGのレベルA要件ですが、映像がテキストの代わりに使用されている場合は必須ではありません。
たとえば、あるアプリケーションのインストールに必要な手順を説明する映像があったとします。一部の人は操作手順をテキストで読むよりも、作業内容を映像で見るだけでいい、と思うかもしれません。物を購入し、説明書に含まれているビデオは、テキストの代替メディアの例です。したがい、映像にキャプションをつける必要はありません。

注意

映像制作者は、メディアサービスに提供されている自動生成キャプションに依存することは避けた方がいいです。

理由として、映像の中の会話の質によっては、キャプションが自動的に生成されるときにエラーが発生する可能性があります。自動生成されたキャプションは、初期セットとして使用し、エラー率が約25％未満であれば、編集して精度をあげることが可能です。エラー率が25％以上であれば、最初から手動でキャプションを付けるようにしてください。

HTMLメディアタグ

HTMLのメディアを取り扱うときに使用できるHTMLタグは、ビデオ、オーディオ、プラグイン、YouTubeなど複数あります。

メディアファイルの形式や、どんなタグがあるかは、W3SchoolsのHTMLメディアページをご覧ください。

HTMLビデオタグ

ビデオで使えるファイル形式は以下のフォーマットがあります。

ファイルフォーマット	メディアタイプ	拡張子の説明
MP4	video/mp4	ISO規格の一部として標準化。字幕や静止画なども格納できる。MPEG-4規格の一部。
WebM	video/webm	は、Googleが開発しているオープンでロイヤリティフリーな動画のコンテナフォーマット。webm公式サイトへのリンク。
Ogg	video/ogg	音楽、ビデオ、テキスト、メタデータを含めることができ、ストリーミングコンテンツ用に最適化されている。著作権フリー。Xiph.orgFoundationによって開発された。

HTMLビデオタグと呼ばれるものには、以下のタグがあります。

HTMLタグ	タグの説明
<video>	ビデオや映画を定義
<source>	<video>や<audio>など複数のメディア要素を定義
<track>	メディアプレーヤーのテキストトラックを定義

<track>タグの属性

属性	値	説明
default	default	ユーザーの環境のトラックが適切でないときに、トラックを有効にする
kind	captions chapters descriptions metadata subtitles	テキストトラックの種類を指定
label	text	テキストトラックのタイトルを指定
src	URL	必須。トラックファイルのURLを指定
srclang	language_code	トラックのテキストデータの言語を指定する※kindを指定した場合は必須

HTMLコーディング例

<video width="600" height="400" controls>
  <source src="/media/car_action.mp4" type="video/mp4">
  <source src="/media/car_action.ogg" type="video/ogg">
  <track src="car_action-subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="car_action-subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
  お使いのブラウザではメディア再生をサポートしていません
</video>