WCAG 2.2 ガイドライン「1.2.8 メディア代替（事前録画）」Level AAA について

はじめに

WCAG 2.2の「1.2.8 メディア代替（事前録画）」は、事前録画された同期メディアおよび映像のみの事前録画メディアに対して、時間依存メディア（動画や音声）の内容を完全に説明するテキスト代替を提供することを求めています。この基準は、最高レベル（Level AAA）でのアクセシビリティを実現するためのもので、視覚や聴覚の制約を持つユーザーを支援することを目的としています。

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

1. メディア代替の必要性と対象

メディア代替とは、動画や音声などの時間依存メディアに対して、視覚や聴覚に頼らずに内容を完全に理解できるようにするためのテキストや他の形式の代替情報です。

対象となるメディア

• 同期メディア（音声と映像が同期しているコンテンツ）
  例: ナレーション付きの動画。
• 映像のみのメディア（音声がない動画）
  例: 無音で視覚的な内容のみの映像。

2. メディア代替の提供方法

a. 同期メディアに対する代替情報の提供

同期メディアには、映像や音声で提供されるすべての情報を含むテキスト代替を用意します。このテキスト代替は、リンクなどを通じて提供されます。

HTMLの例

<video controls>
  <source src="example.mp4" type="video/mp4">
  このブラウザは動画を再生できません。
</video>
<p>
  この動画の完全な内容は、以下のリンクからテキストでご覧いただけます：
  <a href="media-alternative.html">動画の内容をテキストで読む</a>
</p>

解説

• <p>タグ内で代替テキストのリンクを提供します。
• 代替テキストには、動画や音声に含まれる情報（ナレーション、重要な視覚的要素、音響効果など）をすべて記載します。

b. 映像のみのメディアに対する代替情報の提供

映像のみのメディアには、視覚情報を完全に説明するテキストを用意します。

HTMLの例

<video controls>
  <source src="video-only.mp4" type="video/mp4">
  このブラウザは動画を再生できません。
</video>
<p>
  この映像の内容は以下のリンクから詳細な説明をご覧いただけます：
  <a href="video-only-description.html">映像の内容をテキストで読む</a>
</p>

解説

• 映像で表現される内容を、テキストとして別ページまたはポップアップで提供します。

c. HTML内に直接代替情報を含める方法

場合によっては、代替テキストを動画のすぐそばに配置することで、ユーザーが簡単にアクセスできるようにします。

HTMLの例

<object data="example.mp4" type="video/mp4">
  <p>この動画の内容は以下の通りです：<br>
  春の庭園の映像が映し出され、桜の花びらが風に舞う様子が続きます。</p>
</object>

解説

• <object>要素の中で代替テキストを提供する方法です。
• 動画が再生できない場合でも、内容をテキストで伝えられます。

3. CSSとJavaScriptによる代替情報の拡張

a. ポップアップで代替テキストを提供する

JavaScriptを使って、代替情報をポップアップ形式で表示することができます。

HTMLとJavaScriptの例

<video controls>
  <source src="example.mp4" type="video/mp4">
  このブラウザは動画を再生できません。
</video>
<button id="showDescription">代替情報を表示</button>
<div id="description" style="display: none; background-color: #f0f0f0; padding: 10px;">
  <p>この動画の内容：庭園の映像が流れ、花びらが風に舞う様子が続きます。</p>
</div>

<script>
  document.getElementById("showDescription").addEventListener("click", () => {
    const description = document.getElementById("description");
    description.style.display = description.style.display === "none" ? "block" : "none";
  });
</script>

解説

• ボタンをクリックすると代替情報が表示される仕組みを実装しています。
• ユーザーに対して必要なときだけ情報を提供できます。

4. メディア代替の作成における注意点

• 完全な内容を記載
  動画や音声に含まれるすべての情報をテキストで提供することが重要です。たとえば、ナレーションの内容や視覚的な描写、音響効果なども含めます。
• 分かりやすいリンクテキスト
  代替情報へのリンクは、「こちらをクリック」ではなく、「動画の内容をテキストで読む」のように内容を明確に示します。
• アクセスしやすい場所に配置
  代替情報は動画のすぐ近くに配置し、ユーザーが簡単に見つけられるようにします。

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

このガイドラインを守ることで、次のようなユーザーにとって利用しやすいコンテンツを提供できます：

• 視覚障害のある方：映像の内容を詳細なテキストで理解可能。
• 聴覚障害のある方：ナレーションや音声の内容をテキストで把握可能。
• 映像や音声を再生できない環境にいる方：代替情報があれば、内容を確認できます。

まとめ

WCAG 2.2の「1.2.8 メディア代替（事前録画）」は、事前録画された同期メディアや映像のみのメディアに対して、内容を完全に説明する代替情報を提供するための基準です。

• HTMLやCSS、JavaScriptを活用すれば、代替情報の提供は簡単に実現可能です。
• メディア代替を提供することで、すべてのユーザーがコンテンツを公平に利用できる環境を作りましょう。

初心者でもこのガイドラインを実装することで、アクセシブルなウェブサイトを構築する第一歩を踏み出せます！

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