WCAG 2.2 ガイドライン「1.2.5 音声解説（事前録画）」Level AA について

はじめに

WCAG 2.2の「1.2.5 音声解説（事前録画）」は、事前録画された動画コンテンツに音声解説（Audio Description）を提供することを求めています。このガイドラインは、視覚に障害がある方をはじめ、映像に依存した情報を理解しにくい方に配慮した要件です。

音声解説では、映像の中で重要な視覚的情報（例えば、登場人物の動き、表情、テキストなど）を音声で補足説明します。

この記事では、HTML、CSS、JavaScriptを使った具体的な実装方法を初心者向けに詳しく解説します。

1. 音声解説の目的と適用範囲

音声解説（Audio Description） は、映像内の重要な視覚的情報を補足し、以下のような状況で視覚障害のあるユーザーが内容を理解できるようにします：

• 無音の映像や視覚的なストーリー展開がある動画。
• 表情やジェスチャーなど、重要な視覚的な手がかりが含まれる動画。

2. 音声解説の提供方法

a. 別の音声トラックを用意する（ユーザー選択可能）

HTMLの実装例

<video controls>
  <source src="example.mp4" type="video/mp4">
  <track kind="descriptions" src="audio-description.vtt" srclang="ja" label="音声解説">
  このブラウザは動画を再生できません。
</video>

解説

• <track>要素を使用して、音声解説が含まれた字幕ファイル（WebVTT形式）を指定します。
• kind="descriptions"を設定することで、動画プレイヤーが音声解説のトラックであることを認識します。

b. 音声解説が含まれた別バージョンを提供する

視覚的な内容を説明するため、元の動画とは別に音声解説を含んだバージョンを用意します。

HTMLの例

<p>以下は音声解説付きの動画です。</p>
<video controls>
  <source src="example-audio-description.mp4" type="video/mp4">
  このブラウザは動画を再生できません。
</video>

解説
この方法では、利用者が音声解説付きバージョンを選べるようにするため、別の動画ファイルを提供します。

c. 拡張音声解説（Extended Audio Description）

一部の映像では、説明すべき内容が多い場合があります。その場合、映像の再生を一時停止しながら詳細な説明を挿入する拡張音声解説を提供します。

3. 音声解説用のWebVTTファイルの作成

音声解説を提供する場合、WebVTT形式で視覚情報を説明する内容を記述します。

WebVTTファイルの例

WEBVTT

00:00:00.000 --> 00:00:05.000
画面に「2024年」と表示され、青い空が広がる。

00:00:05.001 --> 00:00:10.000
主人公が笑顔で歩き出し、背景には大きな山が見える。

4. JavaScriptを活用した応用

ユーザーが必要に応じて音声解説を切り替えられる仕組みをJavaScriptで実装します。

HTMLとJavaScriptの例

<video id="video" controls>
  <source src="example.mp4" type="video/mp4">
</video>
<button id="descriptionToggle">音声解説を切り替える</button>

<script>
  document.getElementById("descriptionToggle").addEventListener("click", () => {
    const video = document.getElementById("video");
    const currentSource = video.src;
    video.src = currentSource.includes("description")
      ? "example.mp4"
      : "example-description.mp4";
    video.load();
  });
</script>

解説
ボタンを押すことで音声解説のオン/オフを切り替える簡単な仕組みを実装しています。

5. アクセシビリティへのメリット

このガイドラインを遵守することで、多くのユーザーにコンテンツを楽しんでもらうことができます：

• 視覚障害のある方：映像内の視覚的な手がかりを音声で理解可能。
• 短時間で多くの情報を伝えたい場合：視覚と聴覚の両方を活用することで効果的な情報提供が可能。

まとめ

WCAG 2.2の「1.2.5 音声解説（事前録画）」は、視覚に頼らずに映像を理解できるようにするための重要な基準です。

• 別の音声トラックや説明付きの動画バージョンを用意することで、すべての人に優しいコンテンツを提供できます。
• 初心者でもHTML、CSS、JavaScriptを活用すれば、簡単に音声解説を実装可能です。

アクセシブルなウェブ体験を目指し、音声解説の提供を積極的に取り入れてみましょう！

当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。