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

はじめに

WCAG 2.2の「1.2.7 拡張音声解説（事前録画）」は、事前録画された動画コンテンツで、視覚的な情報が多く、通常の音声解説だけでは説明が不十分な場合に適用されます。拡張音声解説（Extended Audio Description）では、動画の再生を一時停止して、映像の詳細を補足的に説明します。これにより、視覚障害のある方が動画の内容を完全に理解できるようになります。

この記事では、HTML、CSS、JavaScriptを用いて、拡張音声解説の具体的な提供方法を初心者向けに詳しく解説します。

1. 拡張音声解説とは？

通常の音声解説では、動画内の音声や背景音の間（無音部分）に解説を挿入します。しかし、以下のような場合には拡張音声解説が必要です：

• 無音部分が短すぎて解説を挿入できない。
• 視覚的に伝えるべき情報が多く、通常の解説では不足する。

拡張音声解説では、動画を一時停止しながら、必要な情報を説明します。

2. 拡張音声解説の提供方法

a. 拡張音声解説付きの別バージョンを提供する

拡張音声解説が含まれたバージョンを別途制作し、ユーザーが選択できるようにします。

HTMLの例

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

解説

• 元の動画に拡張音声解説を挿入した新しい動画ファイルを制作します。
• 編集ソフトで音声解説を追加し、再生を一時停止するタイミングを適切に設定します。

b. 動画プレイヤーで拡張音声解説を制御する

HTMLとJavaScriptを使って、動画再生中に拡張音声解説を挿入する方法を実装します。

HTMLとJavaScriptの例

<video id="mainVideo" controls>
  <source src="example.mp4" type="video/mp4">
  このブラウザは動画を再生できません。
</video>
<button id="playWithDescription">拡張音声解説を再生</button>

<script>
  const video = document.getElementById("mainVideo");
  const descriptionTimings = [
    { time: 5, description: "画面に『春の風景』という文字が現れる。" },
    { time: 10, description: "桜の花が満開の木々が映し出される。" },
  ];

  document.getElementById("playWithDescription").addEventListener("click", () => {
    video.currentTime = 0;
    video.play();

    descriptionTimings.forEach(item => {
      setTimeout(() => {
        video.pause();
        alert(item.description);
        video.play();
      }, item.time * 1000);
    });
  });
</script>

解説

• 動画の再生中に指定のタイミングで一時停止し、ポップアップや音声で解説を挿入します。
• 解説内容をdescriptionTimingsで管理し、簡単に編集できます。

c. 拡張音声解説のトラックを提供する

HTMLの<track>要素を利用して、拡張音声解説を別トラックとして提供することも可能です。

HTMLの例

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

WebVTTファイルの例（extended-description.vtt）

WEBVTT

00:00:05.000 --> 00:00:10.000
画面に『春の風景』という文字が現れる。

00:00:10.001 --> 00:00:15.000
桜の花が満開の木々が映し出される。

解説

• kind="descriptions"で音声解説を指定します。
• WebVTTファイルでタイミングと内容を管理します。

3. 拡張音声解説のデザインと配置

拡張音声解説の提供では、以下のポイントに注意します：

1. タイミングを正確に設定する
   動画の一時停止や再生が自然に行われるようにします。
2. ユーザーの操作性を確保する
   解説のオン・オフや解説の再生タイミングを柔軟に管理できるようにします。

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

拡張音声解説を提供することで、以下のユーザーに配慮できます：

• 視覚障害のある方：映像内の複雑な情報や動きを音声で理解可能。
• 多様な状況で利用する方：映像の内容を音声でも十分に把握できる。

まとめ

WCAG 2.2の「1.2.7 拡張音声解説（事前録画）」は、視覚に頼らずに映像を完全に理解できるようにするための最高レベル（Level AAA）の基準です。

• 拡張音声解説を含む動画や別トラックを用意することで、多くのユーザーがコンテンツを楽しむことができます。
• HTMLやJavaScriptを活用すれば、拡張音声解説を動的に提供することも可能です。

アクセシブルなコンテンツ作りを目指し、拡張音声解説の実装をぜひ取り入れてみてください！

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