WCAG 2.2 ガイドライン「1.2.3 音声解説またはメディア代替（事前録画）」Level A について
はじめに
WCAG 2.2の「1.2.3 音声解説またはメディア代替（事前録画）」は、事前録画された同期メディア（音声と映像が同期しているコンテンツ）において、音声解説またはメディア代替を提供することを求めています。これにより、視覚障害のある方が映像の内容を理解できるようにします。
この記事では、HTMLやCSS、JavaScriptを学び始めた方にもわかりやすいように、具体例を交えてこの基準を解説します。
1. ガイドラインの目的と適用範囲
このガイドラインの主な目的は、映像コンテンツを視覚に頼らずに利用できるようにすることです。
具体的には、以下の方法で映像の内容を補足します：
-
音声解説
映像内の重要な視覚的情報（例: 文字、動作、背景）を音声で説明するトラックを提供します。 -
メディア代替
映像の内容を詳細に説明したテキストまたは別の形式（例: 音声のみのトラック）を提供します。
2. 音声解説の実装方法
音声解説は、映像内で視覚的に重要な情報を音声で補足するもので、ユーザーが動画を再生する際に選択できるようにします。
HTMLでの実装
基本的な例
<video controls>
<source src="example.mp4" type="video/mp4">
<track src="audio-description.vtt" kind="descriptions" srclang="ja" label="音声解説">
このブラウザは動画を再生できません。
</video>
解説
<track>要素でkind="descriptions"を指定することで、音声解説を提供します。srcには音声解説を含むWebVTTファイルを指定します。
WebVTTファイルの例
以下は音声解説をWebVTT形式で記述した例です：
WebVTTファイル例（audio-description.vtt）
WEBVTT
00:00:00.000 --> 00:00:05.000
画面中央に美しい山々が広がり、背景には夕日が見えます。
00:00:05.001 --> 00:00:10.000
登山者が山頂で旗を掲げ、笑顔を見せています。
解説
- タイムスタンプで指定した時間に合わせて、視覚的な内容を説明します。
- これにより、映像を見ることが難しい方でも内容を理解できます。
3. メディア代替の実装方法
音声解説が難しい場合、メディア代替として映像の内容を詳細に記述したテキストを提供します。
HTMLでの例
動画にメディア代替を添える例
<video controls>
<source src="example.mp4" type="video/mp4">
このブラウザは動画を再生できません。以下に内容をテキストで説明します。
</video>
<p>映像内容：この動画は美しい山々の風景を紹介しています。登山者が山頂に到達し、旗を掲げる様子が映し出されます。背景には夕日が輝いています。</p>
解説
<p>タグを使って映像内容をテキストとして説明します。- 音声解説を用意できない場合に適した方法です。
4. カスタマイズと応用
JavaScriptを使った動的な切り替え
ユーザーが必要に応じて音声解説やテキスト説明を切り替えられるようにすることで、より便利な機能を提供できます。
例：音声解説の有効化
<video id="video" controls>
<source src="example.mp4" type="video/mp4">
<track id="desc" src="audio-description.vtt" kind="descriptions" srclang="ja" label="音声解説">
</video>
<button onclick="toggleDescriptions()">音声解説を切り替える</button>
<script>
function toggleDescriptions() {
const track = document.getElementById("desc");
track.mode = track.mode === "showing" ? "hidden" : "showing";
}
</script>
解説
ボタンを押すことで音声解説のオン/オフを切り替えられます。ユーザーのニーズに応じて選択肢を提供できます。
5. アクセシビリティのメリット
このガイドラインを守ることで、次のようなユーザーにとって利用しやすいコンテンツを提供できます：
- 視覚障害を持つ方：映像の内容を音声解説で理解可能。
- 一時的に視覚が制限されている方（暗い環境や小さな画面で視認が難しい場合）。
- 映像の細部を見落とす可能性がある方：メディア代替を読むことで映像の意図を正確に把握できます。
たとえば、観光地の紹介動画に音声解説を追加することで、視覚に障害がある方も観光地の魅力を感じられるようになります。
まとめ
WCAG 2.2の「1.2.3 音声解説またはメディア代替（事前録画）」は、映像コンテンツをアクセシブルにするための重要な基準です。
- 映像の内容を補足する音声解説やメディア代替を提供することで、視覚に頼らずに映像を理解できるようにします。
- HTMLの
<track>要素やWebVTTファイルを活用することで、初心者でも簡単に実装可能です。
これを機に、より多くのユーザーが楽しめるアクセシブルなウェブコンテンツを作りましょう！
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。