要約

ビデオにラベルを付け、ユーザーによって再生を制御できるようにし、また、ビデオを見たり聞いたりできないユーザーや情報の処理に時間がかかるユーザーのために代替手段を設けます。

テクニック

例

例 — ネイティブコントロールの有効化

controls属性を設定すると、ネイティブHTMLコントロールがデフォルトで有効になります。

<video … controls="controls">
   …
</video>
例 — ラベルの追加

aria-label属性でビデオのタイトルを示します。

<video … aria-label="The General">
   …
</video>
例 — 時間指定トラックを入れる

trackで、ビデオのサブタイトルとキャプションのファイルを識別します。kind属性は、指定されたトラックの性質を指定します。

<video
       src="video/big-hollywood-blockbuster.mp4"
       controls="controls"
       aria-label="Kaplowy - The movie">
   <track
      kind="subtitles"
      src="subtitles.en.vtt"
      srclang="en"
      label="English"/>
   <track
      kind="captions"
      src="captions.en.vtt"
      srclang="en"
      label="English"/>
</video>
例 — トランスクリプトの提供

トランスクリプトがビデオの後のdetails要素に含まれているため、ユーザーは要素を展開してテキストを読むかどうかを決定できます。

<video
      src="video/the_general.mp4"
      controls="controls"
      aria-label="The General"
      aria-details="#transcript">
   …
</video>
<details id="transcript">
	<summary>Transcript</summary>
	<p>Jospeh M Schenck presents Buster Keaton
	   in 'The General' …</p>
	…
</details>
例 — フォールバック時のエラーメッセージを付ける

ユーザーエージェントは、video要素をサポートしていない場合にのみ、この要素内のコンテンツをレンダリングします。提供されたビデオ形式をサポートしていない場合、ユーザーエージェントは、このコンテンツを表示しません（このような場合、ユーザーエージェントは独自のエラーメッセージを表示します）。

<video
      src="video/the_general.mp4"
      controls="controls"
      aria-label="The General">
   …
   <div class="err">
     <p>
       Sorry, it appears your system 
       does not support video playback.
     </p>
   </div>
</video>
例 ― さまざまなアクセシビリティ機能を備えたビデオ

この例では、以上の例の要素を組み合わせた、埋め込みビデオの完全な例を示します。英語の字幕とキャプション、フォールバック時のコンテンツ、Webホスト バージョンへのリンク、およびトランスクリプトが組み込まれています。

<video
      src="https://example.com/videos/the_general.mp4"
      controls="controls"
      aria-label="general"
      aria-details="#transcript">
   <track
      kind="subtitles"
      src="subtitles.en.vtt"
      srclang="en"
      label="English"/>
   <track
      kind="captions"
      src="captions.en.vtt"
      srclang="en"
      label="English"/>
   <p>Your reading system does not support the video
      element. Please try the link to open the video in a
      browser.</p>
</video>
<p>
   <a href="https://example.org/videos/the_general.mp4">
      Watch video in browser
   </a>
</p>
<details id="transcript">
   <summary>Transcript</summary>
   <p></p>
   …
</details>
例 — 代替ビデオへのリンク

厳密にはアクセシビリティの問題ではありませんが、EPUB出版物がWeb上のビデオを参照する場合、ビデオへの別のリンクを提供することで、一部のユーザーが、リーディングシステムによってビデオにアクセスできない場合（リーディングシステムが外部リソースをブロックしている場合や、提供された形式を再生できない場合など）でもビデオにアクセスできるようになります。詳細については、リモートリソースに関するナレッジベースのページを参照してください。

ただし、この手法はユーザーがインターネットにアクセスできない場合には役に立たないので、可能な限りEPUBにビデオを埋め込むことを推奨します。

以下の例は、簡潔のためアクセシビリティ機能をマークアップから省略しています。

<video src="https://example.org/videos/the_general.mp4" …>
   …
</video>
<p>
   <a href="https://example.org/videos/the_general.mp4">
      Watch video in browser
   </a>
</p>

解説

ビデオクリップを組み込む場合は、元からあるユーザーエージェント コントロールをデフォルトで有効にします（つまり、video要素にcontrols属性を設定します）。この方法により、スクリプトが利用できない場合でもコントロールにアクセスできるようになります。独自のカスタムコントロールを定義する場合は、JavaScriptでネイティブコントロールを無効にして、スクリプトをサポートしていないユーザーエージェントでもコントロールを利用できるようにしてください。

ビデオにラベルを付けると、ユーザーはビデオを視聴するかどうかを決める前に、ビデオの目的を理解できるようになります。たとえば、視覚的な読者向けにビデオのスナップショットを見せるために、コンテンツ製作者がポスター画像を指定できるとしても、全盲のユーザーには利用できません。これらのユーザーにとって、ラベルは、コンテンツをダウンロードせずに理解するための唯一の手段です。特に通信コストが高いモバイルデバイスのユーザーは、この情報があれば時間と費用の両方を節約できます。

代替手段を提供するという点では、WCAGでは、さまざまなユーザーグループのニーズに対応するために、ビデオコンテンツに複数の選択肢を求めています。

WCAGでは、トランスクリプトを「代替メディア」と呼んでいます。トランスクリプトは話し言葉の単なる羅列ではいけないからです。この中には、ビデオ内のアクションやその他の重要なイベントの説明が含まれていなければなりません。

レベルAからAAに進むと、要件も増加します。たとえば、レベルAAの音声付きビデオの場合、トランスクリプトだけでは不十分で、音声解説トラックが必要になります。

video要素は、フォールバック用の子コンテンツを許可していますが、このコンテンツはアクセシブルな代替手段として意図されたものではありません。ユーザーエージェントは、 video要素をサポートしていない場合にのみ、このコンテンツをユーザーに提供します（例：EPUB2ユーザーエージェント）。

また、ユーザーが支援技術（スクリーン リーダーなど）によって生成された音声を聞くことができるようにすることも重要です。音声付きのビデオを自動的に再生すると、テキストを聞く妨げとなるため、クリップの再生時間が3秒以下でない限り、ユーザーは支援技術をミュートせずに、再生を無効にするか、音量をミュートできる必要があります（ただし、システムの音声コントロールでは、すべての音声の音量が同時に上げ下げされるため、この要件を満たすことができません）。

関連リンク