WCAG 2.2 ガイドライン「1.2.1 音声のみ及び映像のみ（事前録画）」Level A について

はじめに

WCAG 2.2のガイドライン「1.2.1 音声のみおよび映像のみ (Audio-only and Video-only)」は、事前録画された音声や映像コンテンツが利用者にとってわかりやすいものとなるよう、代替情報を提供する必要性を示しています。この基準は、特に視覚や聴覚に障害がある方を含む、すべてのユーザーがコンテンツを等しく理解できるようにすることを目的としています。

この記事では、HTMLやCSS、JavaScriptを学び始めた方にもわかりやすいよう、具体的な例と実装方法を交えながら、このガイドラインについて解説します。

1. 音声のみ（事前録画）の場合

音声のみのコンテンツでは、音声の内容を説明するテキスト代替を提供する必要があります。この代替情報は、音声コンテンツに含まれる情報を正確に伝えるものでなければなりません。

実装方法の例

たとえば、音声講義やポッドキャストの場合：

HTMLの例

<audio controls>
  <source src="lecture.mp3" type="audio/mpeg">
  このブラウザは音声を再生できません。講義内容を以下のテキストでご覧ください。
</audio>
<p>講義内容：この音声ではウェブアクセシビリティの基本原則について説明しています...</p>

解説
<audio>タグを使用して音声を再生しつつ、音声に含まれる情報をテキストで記載します。これにより、音声を聞くことが難しいユーザーも内容を把握できます。

2. 映像のみ（事前録画）の場合

映像のみのコンテンツでは、次のいずれかを提供する必要があります：

• 映像の内容を説明するテキスト代替
• 映像の内容を口頭で説明する音声トラック

実装方法の例

たとえば、音声なしで流れる観光地の紹介映像の場合：

HTMLの例（テキスト代替を利用）

<video controls>
  <source src="scenery.mp4" type="video/mp4">
  このブラウザは映像を再生できません。映像の内容を以下のテキストでご覧ください。
</video>
<p>映像内容：美しい海岸沿いの風景、日の出の様子、鳥が飛び交う様子を撮影した映像です。</p>

HTMLの例（音声トラックを利用）

<video controls>
  <source src="scenery.mp4" type="video/mp4">
  <track kind="descriptions" src="audio-description.vtt" srclang="ja" label="音声説明">
</video>

解説
映像の内容を視覚に頼らず理解できるようにするため、映像の内容を詳しく説明したテキストや音声説明（音声トラック）を提供します。

3. 具体的な技術的ポイント

• 代替情報は簡潔かつ正確に
  映像や音声の内容を正確に伝える代替情報を作成することが大切です。

• CSSやJavaScriptとの併用
  デザインや操作性を高めるために、CSSやJavaScriptを使って代替情報を表示・非表示にする仕組みを組み込むことも可能です。

JavaScriptを使った例（ボタンで代替情報を表示）

<button onclick="toggleDescription()">代替情報を表示</button>
<div id="description" style="display:none;">
  <p>映像内容：海辺の夕焼けを映した映像です。波が穏やかに動き、鳥が飛ぶ様子が見えます。</p>
</div>

<script>
  function toggleDescription() {
    const description = document.getElementById("description");
    description.style.display = description.style.display === "none" ? "block" : "none";
  }
</script>

解説
JavaScriptでボタンを押した際に代替情報を表示するようにすることで、ユーザー体験を向上させることができます。

4. ガイドラインを守ることで得られるメリット

この基準を守ることで、次のようなユーザーがコンテンツを楽しめるようになります：

• 聴覚障害を持つ方（音声の内容がわからない場合でも、テキスト代替で理解可能）
• 視覚障害を持つ方（映像の内容がわからない場合でも、音声説明で理解可能）
• 環境的制約がある方（音声を聞けない状況や、映像を視覚的に確認できない場合でも、代替情報で補完可能）

たとえば、企業のトレーニング動画に映像の説明や音声のテキスト代替があると、社員全員が平等に学習できる環境を整えられます。

まとめ

WCAG 2.2の「1.2.1 音声のみおよび映像のみ（事前録画）」は、メディアコンテンツをアクセシブルにするための基本ルールです。
音声コンテンツにはその内容を説明するテキスト代替を、映像コンテンツにはテキスト代替または音声説明を必ず用意しましょう。これにより、すべてのユーザーに優しいウェブ体験を提供できます。

初めてウェブ制作をする方も、このルールを取り入れてアクセシブルなサイト作りを目指しましょう！

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