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

Table of Contents

はじめに

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

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

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

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

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

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

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

KQED Captioned Audio 2 2 12

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

Frozen – Trailer with Audio Description

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

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

YouTube動画の右下にあるCCと字幕設定のギアの位置

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

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

例外

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

注意

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

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

YouTube キャプションと字幕

HTMLメディアタグ

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

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

HTMLビデオタグ

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

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

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

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

<track>タグの属性

属性説明
defaultdefaultユーザーの環境のトラックが適切でないときに、トラックを有効にする
kindcaptions
chapters
descriptions
metadata
subtitles
テキストトラックの種類を指定
labeltextテキストトラックのタイトルを指定
srcURL必須。トラックファイルのURLを指定
srclanglanguage_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>
google 広告