WCAG 2.2の達成基準1.2.5「音声解説（事前録画）」は、事前録画された同期メディアの映像に含まれる情報を、音声でも受け取れるようにするLevel AAの基準です。
対象となる動画を確認し、映像だけで伝えている動作、人物、場面転換、画面上の文字を洗い出したうえで、主音声を妨げない位置に説明を加えます。
実装では、音声解説付きの音声トラックを選択できるプレイヤー、または音声解説を組み込んだ別動画を用意する方法が使えます。
達成基準1.2.5の対象
同期メディアとは、映像と音声などが時間に沿って組み合わされたコンテンツです。
達成基準1.2.5は、そのうち事前録画された映像を含むコンテンツを対象とし、ライブ配信そのものを対象にはしていません。
音声解説とは、主音声だけでは分からない視覚情報を伝えるナレーションです。
登場人物の動き、表情、場面転換、画面に表示された文字など、内容の理解に必要な情報を会話や効果音の合間に説明します。
主音声だけですべての重要な映像情報が伝わっている場合は、同じ内容を重ねて説明する必要はありません。
音声解説で補う視覚情報
音声解説の原稿には、映像を見なければ理解できず、動画の意味を左右する情報を残します。
- 人物の行動や表情の変化
- 登場人物や物の位置関係
- 場面や時間の切り替わり
- 画面上の見出し、数値、注意書き
背景の色や装飾をすべて読み上げる必要はありません。
説明を入れすぎると主音声を聞き取りにくくなるため、内容の理解に必要かどうかを基準に選びます。
| 映像で起きること | 主音声の状態 | 追加する説明 |
|---|---|---|
| 画面に「2024年」と表示され、青空が映る | 音楽のみ | 画面に「2024年」と表示され、青い空が広がる。 |
| 主人公が笑顔で歩き始め、背景に山が見える | 足音のみ | 主人公が笑顔で歩き出し、背景には大きな山が見える。 |
音声解説の提供方法
提供方法は、利用する動画プレイヤーや配信基盤が対応できる機能に合わせて選びます。
| 方法 | 実装の考え方 | 確認する点 |
|---|---|---|
| 選択式の音声トラック | 元の音声と音声解説付き音声を用意し、プレイヤーで切り替えられるようにする | 切り替え操作が分かりやすく、選択した音声が実際に再生されるか |
| 音声解説付きの別動画 | 元の音声と音声解説を一つの音声にまとめた動画を別に用意する | 通常版と音声解説付き版を明確なリンク名で選べるか |
| 拡張音声解説 | 説明を入れる時間が足りない箇所で映像を一時停止し、必要な説明を加える | 停止が必要な箇所と説明内容が適切か |
選択式の音声トラック
動画プレイヤーが複数の音声トラックに対応している場合は、通常音声と音声解説付き音声を切り替えられるようにします。
切り替えボタンには「音声解説をオンにする」など、操作後の結果が分かる名前を付けます。
プレイヤーや配信サービスによって実装方法が異なるため、採用する環境で音声トラックの選択と再生を確認します。
音声解説付きの別動画
音声トラックの切り替えに対応できない場合は、音声解説を組み込んだ動画を別に用意します。
通常版と音声解説付き版を近くに配置し、リンク先の違いが文面だけで分かるようにします。
<p><a href='movie.mp4'>通常版の動画を再生する</a></p>
<p><a href='movie-described.mp4'>音声解説付きの動画を再生する</a></p>動画を別ページに置く場合も、二つの版を行き来できる導線を用意します。
track要素とWebVTTの扱い
HTMLの<track kind="descriptions">では、時間に合わせた説明文をWebVTT形式で指定できます。
ここで指定するWebVTTは音声ファイルではなく、動画プレイヤーなどが非視覚的に提示することを想定したテキストデータです。
<video controls>
<source src='example.mp4' type='video/mp4'>
<track kind='descriptions'
src='audio-description-ja.vtt'
srclang='ja'
label='日本語の音声解説'>
このブラウザは動画を再生できません。
</video>WebVTTファイルには、説明を提示する時間と内容を記述します。
WEBVTT
00:00:00.000 --> 00:00:05.000
画面に「2024年」と表示され、青い空が広がる。
00:00:05.001 --> 00:00:10.000
主人公が笑顔で歩き出し、背景には大きな山が見える。ただし、track要素を置くだけで音声解説の提供が完了すると判断することはできません。
利用するブラウザや動画プレイヤーで説明が実際に非視覚的に提示されることを確認できない場合は、音声解説付きの音声トラックまたは別動画を提供します。
制作と確認の手順
- 対象を確認する：事前録画された同期メディアであり、映像に内容理解の手掛かりが含まれているかを確認します。
- 音声だけで確認する：画面を見ずに主音声を聞き、意味がつながらない箇所を記録します。
- 視覚情報を選ぶ：動作、人物、場面転換、画面上の文字から、理解に必要な情報を選びます。
- 原稿を作る：会話や効果音を遮らない長さで、具体的な説明を書きます。
- 音声を収録して提供する：選択式の音声トラックまたは音声解説付きの別動画として組み込みます。
- 公開環境で試す：音声解説を見つけて選択でき、最後まで再生できるかを確認します。
達成基準1.2.3と1.2.7との違い
Level Aの達成基準1.2.3「音声解説またはメディア代替」の解説では、音声解説または時間依存メディアの代替のいずれかを提供します。
Level AAの達成基準1.2.5では、事前録画された同期メディアに音声解説を提供します。
通常の会話の合間だけでは説明時間が足りない場合は、映像を一時停止して説明する拡張音声解説を検討します。
拡張音声解説の要件は、達成基準1.2.7「拡張音声解説（事前録画）」の解説で確認できます。
公開前チェックリスト
- 対象動画が達成基準1.2.5の適用範囲に入るかを確認した
- 主音声だけでは分からない視覚情報を洗い出した
- 内容の理解に必要な動作、人物、場面転換、画面上の文字を説明した
- 音声解説が会話や重要な効果音を妨げていない
- 通常版と音声解説付き版の違いがリンク名や操作名から分かる
- キーボード操作を含む実際の利用環境で、音声解説を選択して再生できる
- 主音声ですべての視覚情報が伝わるため追加説明が不要と判断した場合は、その根拠を確認した
実装時に押さえる要点
- 音声解説は、映像を見なければ分からない情報を主音声の合間に補います。
- 選択式の音声トラックまたは音声解説付きの別動画を、利用環境に合わせて提供します。
track要素を使う場合は、説明が実際に非視覚的に提示されるところまで確認します。
当社では、ウェブアクセシビリティの導入を支援するUUU ウェブアクセシビリティを提供しています。
動画を含むサイトのアクセシビリティ改善を検討している方は、サービスの詳細をご覧ください。