サイトアイコン IT & ライフハックブログ|学びと実践のためのアイデア集

WCAG 2.2「1.2.3 音声解説またはメディア代替(事前録画)」の要件と実装方法

black camera zoom lens in close photography

Photo by Pixabay on Pexels.com

WCAG 2.2の達成基準1.2.3「音声解説またはメディア代替(事前録画)」は、事前録画された映像と音声を、視覚だけに頼らず理解できるようにするためのLevel A基準です。

対象となる同期メディアには、音声解説または時間依存メディアの代替コンテンツのどちらかを用意します。

Level Aでは両方を同時に用意する必要はありませんが、短い動画要約を添えるだけでは、時間依存メディアの代替コンテンツとして不十分になる場合があります。

達成基準1.2.3の対象と例外

同期メディアとは、映像と音声などが時間に沿って同期するコンテンツです。

たとえば、ナレーション付きの製品紹介動画、会話と実演を組み合わせた研修動画、音声を伴う観光案内動画が該当します。

一方、動画が既存のテキストを別の形式で示したものにすぎず、そのことが明示されている場合は例外です。

主音声だけで重要な映像情報がすべて伝わる動画も、追加の音声解説を必要としません。

基準の原文は、W3Cの達成基準1.2.3で確認できます。

二つの適合方法

達成基準1.2.3で選べる二つの方法
方法 提供する内容 選びやすい場面
音声解説 主音声だけでは分からない動作、登場人物、場面転換、画面上の文字などをナレーションで補います。 会話やナレーションの合間に説明を入れられる動画。
時間依存メディアの代替コンテンツ 発話、必要な非音声情報、重要な映像情報を、動画と同じ順序で読めるテキストにします。 主音声に説明を入れる余白が少ない動画や、実演を詳しく文章で確認できるようにしたい動画。

音声解説を用意する手順

音声解説は、主音声からは分からない重要な視覚情報を説明するナレーションです。

映像に写るものをすべて読み上げるのではなく、内容の理解や操作に必要な情報を選びます。

  1. 場面転換、人物の動作や表情、画面上の文字など、主音声だけでは伝わらない情報を洗い出します。
  2. すでに会話やナレーションで説明されている内容を除きます。
  3. 主音声の意味を妨げない位置に、簡潔な説明を組み込みます。
  4. 音声解説付きの音声トラックまたは動画版を用意し、利用者が選択できるようにします。
  5. キーボード操作を含め、実際のプレーヤーで選択と再生ができるか確認します。

たとえば、観光案内動画で会話のない間に山々と夕日が映り、その後で登山者が山頂の旗を掲げるなら、その順序と動作を短く説明します。

<track kind="descriptions">だけで判断しない

<track>要素のkind="descriptions"は説明用のテキストトラックを示しますが、この指定だけで録音済みの音声解説トラックになるわけではありません。

マークアップの有無だけで適合と判断せず、採用する動画プレーヤーと利用環境で説明がどのように提示されるかを確かめる必要があります。

完全なテキスト代替を用意する手順

時間依存メディアの代替コンテンツは、映像の短いあらすじではありません。

動画内の発話、話者、理解に必要な効果音、視覚的な状況や動作、画面上の文字を、動画と同じ順序で追える文書です。

時間に合わせた操作が含まれる場合は、その操作で得られる結果にも到達できるようにします。

動画の直後に全文を置くか、動画の近くから完全なテキスト版へ移動できる分かりやすいリンクを設けます。

HTMLの構成例

次の例は掲載方法の雛形です。

角括弧の部分は、実際の動画を確認して正確な発話や音に置き換えます。

<video id="tour-video" controls>
  <source src="example.mp4" type="video/mp4">
  このブラウザは動画を再生できません。
</video>
<p>
  <a href="#tour-video-alternative">
    動画の完全なテキスト版を読む
  </a>
</p>

<section id="tour-video-alternative"
         aria-labelledby="tour-video-alternative-heading">
  <h3 id="tour-video-alternative-heading">
    動画の完全なテキスト版
  </h3>
  <p><strong>映像:</strong>画面中央に山々と夕日が映る。</p>
  <p><strong>音声:</strong>[話者名と実際の発話]</p>
  <p><strong>映像:</strong>登山者が山頂で旗を掲げ、笑顔を見せる。</p>
  <p><strong>音:</strong>[理解に必要な効果音]</p>
</section>

映像だけを説明して音声を省くと、動画全体の代替にはなりません。

反対に、発話の文字起こしだけを置いても、画面上で起きていることが伝わらなければ、この基準の目的を満たせません。

字幕との違い

字幕は、会話や理解に必要な音を文字で伝えるものです。

音声解説は、主音声から分からない映像情報を音声で伝えます。

役割が異なるため、字幕を付けただけで達成基準1.2.3への対応が完了するとは限りません。

事前録画コンテンツの字幕は、WCAG 2.2「1.2.2 字幕(事前録画)」の解説で確認できます。

Level AとLevel AAの違い

Level Aの達成基準1.2.3では、音声解説と完全なテキスト代替のどちらかを選べます。

Level AAへの適合を目指す場合は、達成基準1.2.5で事前録画された映像の音声解説が求められるため、Level Aでテキスト代替を選んだ場合も別途対応を検討します。

詳しくは、達成基準1.2.5「音声解説(事前録画)」の解説をご覧ください。

公開前の確認項目

字幕、音声解説、プレーヤー操作を含む動画全体の設計は、アクセシブルな動画掲載の確認ポイントも参照してください。

実装後は内容と操作の両方を確認する

達成基準1.2.3への対応では、タグを追加したかどうかより、映像を見なくても必要な情報と機能に到達できるかを確認します。

音声解説を選ぶ場合は実際の再生を、テキスト代替を選ぶ場合は情報の不足と順序を点検してください。

判断に迷う場合は、W3Cの達成基準1.2.3解説にある意図、用語、適合方法も確認できます。

当社では、Webアクセシビリティの導入と改善を支援するUUU ウェブアクセシビリティを提供しています。動画を含むサイト全体のアクセシビリティ向上にご興味がある方は、サービスの詳細をご覧ください。

モバイルバージョンを終了