WCAG 2.2の達成基準「1.2.1 音声のみ及び映像のみ（事前録画）」は、音声だけ、または映像だけで伝えている情報を、別の方法でも理解できるようにするための基準です。
適合レベルはAで、事前に収録した音声のみのコンテンツには同等の情報を伝えるテキスト版を、映像のみのコンテンツには同等のテキスト版または音声による説明を用意します。
短い概要を添えるだけでは、元のコンテンツに含まれる情報が抜けることがあります。
代替手段には、利用者が元の音声や映像を利用できなくても、内容と目的を同じように理解できるだけの情報が必要です。
WCAG 2.2の全体像を先に確認したい場合は、基準の位置づけを解説した記事もあわせてご覧ください。
達成基準1.2.1の対象と要件
音声のみとは、映像や操作を伴わず、音だけで進むコンテンツです。
ポッドキャスト、音声講義、録音されたインタビューなどが該当します。
映像のみとは、音声や操作を伴わず、動く画像だけで進むコンテンツです。
無音の解説動画、音声のないアニメーション、無声映像などが該当します。
この基準が扱うのは、どちらも事前録画されたコンテンツです。
ライブ配信や、映像と音声が組み合わされた動画は、達成基準1.2.1とは対象や確認方法が異なります。
| コンテンツ | 用意するもの | 含める情報 |
|---|---|---|
| 事前録画された音声のみ | 時間依存メディアの代替となるテキスト | 発言、話者、内容の理解に必要な音など |
| 事前録画された映像のみ | 時間依存メディアの代替となるテキスト、または同等の情報を伝える音声 | 場面の順序、動作、画面上の文字、内容の理解に必要な視覚情報など |
「時間依存メディアの代替」とは
時間依存メディアの代替とは、時間の経過に沿って提示される音声や映像の情報を、正しい順序で伝える文書です。
単なるタイトルや一文のあらすじではなく、元のコンテンツと同等の情報を得られるテキスト版を指します。
音声のみのコンテンツでは、発言を書き起こすだけで足りる場合もあります。
ただし、複数の話者がいる場合は話者名を示し、拍手、警報音、笑い声などが意味を持つ場合は、その音も記載します。
映像のみのコンテンツでは、場面の変化、登場人物の動作や表情、図の変化、画面に表示される文字などを、内容の理解に必要な範囲で順序立てて説明します。
装飾的な背景まで列挙するのではなく、映像が伝える情報と目的を保つことが判断の基準です。
音声のみの実装例
音声講義を掲載する場合は、音声プレイヤーの近くにテキスト版へのリンクを置きます。
リンク名だけで行き先がわかるようにすると、スクリーンリーダーやキーボードを利用する人も見つけやすくなります。
<audio controls>
<source src="lecture.mp3" type="audio/mpeg">
このブラウザでは音声を再生できません。
</audio>
<p>
<a href="lecture-transcript.html">
ウェブアクセシビリティ講義のテキスト版を読む
</a>
</p><audio>要素内の「音声を再生できません」という文は、再生できないことを知らせるフォールバックです。
音声の内容を伝えていないため、この一文だけではテキスト版の代わりになりません。
テキスト版を同じページに掲載しても構いません。
長い書き起こしを開閉できるようにする場合も、支援技術から内容と操作方法を認識でき、キーボードで開閉できる実装にします。
映像のみの実装例
テキストで映像を説明する場合
短い無声映像であれば、動画の直後に説明を置き、動画と説明の関係をプログラムからも判別できるようにします。
次の例では、aria-describedbyで動画と説明を関連付けています。
<figure>
<video controls aria-describedby="scenery-description">
<source src="scenery.mp4" type="video/mp4">
このブラウザでは映像を再生できません。
</video>
<figcaption id="scenery-description">
映像は夜明け前の海岸から始まります。
空が明るくなるにつれて海面に朝日が反射し、最後に二羽の鳥が画面右上へ飛び去ります。
</figcaption>
</figure>実際の説明文は、映像の長さと情報量に合わせて作ります。
複雑な手順や複数の場面がある映像では、別ページに順序立てた詳しいテキスト版を用意するほうが読みやすくなります。
音声で映像を説明する場合
映像が伝える内容を説明した音声を、動画の近くから再生できるようにする方法もあります。
プレイヤーが音声トラックの切り替えに対応していない場合は、説明音声を別の音声ファイルとして案内できます。
<video controls>
<source src="scenery.mp4" type="video/mp4">
このブラウザでは映像を再生できません。
</video>
<p>
<a href="scenery-audio-description.mp3">
海岸の映像を説明する音声を聞く
</a>
</p>説明音声には、映像の意味を理解するために必要な場面の変化、動作、画面上の文字を含めます。
ファイル名だけのリンクでは内容が伝わらないため、「何を説明する音声か」がわかるリンク名にします。
例外となるコンテンツ
音声や映像が、すでにページ内の文章と同じ情報を別の形で示したものであり、そのことが明確に表示されている場合は例外です。
たとえば、手順を文章で十分に説明したうえで、同じ手順を示す無声アニメーションを「上記の手順を映像で示したもの」と明記して添える場合が考えられます。
ただし、映像に文章にはない情報が含まれていれば、「文章の代替として添えた映像」と表示するだけでは足りません。
文章側に不足する情報を加えるか、映像用の代替手段を別に用意します。
実装で起こりやすい間違い
- 一文の概要だけで済ませる：概要で省かれた発言や動作が内容の理解に必要なら、同等の情報を伝える代替にはなりません。
- 再生できない場合の文を代替にする：ブラウザの非対応を知らせる文と、音声や映像の内容を伝える文は役割が異なります。
- 代替手段の場所を示さない：テキスト版や説明音声があっても、メディアの近くに案内がなければ利用者が見つけにくくなります。
- 音声付き動画を同じ基準だけで確認する：映像と音声を組み合わせたコンテンツでは、キャプションや音声解説に関する別の達成基準も確認します。
- 見た目だけで表示と非表示を切り替える：開閉機能を付ける場合は、キーボード操作、フォーカス、支援技術からの認識まで確かめます。
字幕、キャプション、音声解説、プレイヤー操作まで含めて確認する場合は、音声と動画コンテンツのアクセシビリティ実践ガイドも参考になります。
公開前の確認項目
- 対象が事前録画された音声のみ、または映像のみのコンテンツかを確認した
- 元のコンテンツと同等の情報を得られるテキスト版または説明音声を用意した
- 話者、意味のある音、動作、画面上の文字など、理解に必要な情報を含めた
- メディアの近くに、代替手段へのわかりやすい案内を置いた
- リンク名だけで内容と行き先を判断できるようにした
- キーボードと支援技術で代替手段へ到達できることを確認した
- 音声を聞かず、または映像を見ずに、同じ内容と目的を理解できるかを確認した
利用者に届く情報を減らさないために
テキスト版は、耳が聞こえない人や聞こえにくい人だけでなく、音を出せない環境にいる人、音声を検索や引用に使いたい人にも役立ちます。
映像のテキスト説明や説明音声は、目が見えない人や見えにくい人が、視覚情報を含む内容を理解する助けになります。
達成基準1.2.1への対応では、形式を追加したかどうかではなく、元の音声や映像から得られる情報を別の方法でも受け取れるかを確認します。
制作時に代替手段まで用意し、公開前の確認項目に組み込むと、更新のたびに対応が抜けるのを防ぎやすくなります。
当社では、ウェブアクセシビリティの導入を支援するUUU ウェブアクセシビリティを提供しています。
サイトのアクセシビリティ改善に関心がある方は、サービスの詳細をご覧ください。