サイトアイコン IT & ライフハックブログ|学びと実践のためのアイデア集

WCAG 2.2「1.2.8 メディアに対する代替(収録済)」とは?Level AAAの要件と実装例

opened program for working online on laptop

Photo by Rodrigo Santos on Pexels.com

WCAG 2.2の達成基準1.2.8「メディアに対する代替(収録済)」は、事前録画された同期メディアと映像のみのメディアに、内容を十分に伝えるテキスト代替を用意するための基準です。

ここでいうメディアに対する代替は、動画の短い要約ではありません。

ナレーション、重要な映像、画面に表示される情報、意味のある音を、メディアを再生しなくても内容の流れが分かるように文章で伝えます。

この達成基準の適合レベルはLevel AAAです。

達成基準1.2.8の対象

対象を先に切り分けると、どの情報を文章に置き換えるべきか判断しやすくなります。

対象となる事前録画メディアと代替に含める情報
対象 代替に含める情報
同期メディア ナレーション付きの動画 話されている内容、重要な映像、意味のある音
映像のみのメディア 音声のない説明映像 動作、場面の変化、画面に表示される重要な情報

同期メディアとは、音声と映像が時間に沿って組み合わされたコンテンツです。

映像のみのメディアとは、音声を伴わず、映像で内容を伝えるコンテンツです。

「完全なテキスト代替」に含める内容

代替文は、動画の主題だけでなく、内容を理解するために必要な情報を一続きの文章として伝えます。

たとえば、庭園の映像に対して「春の庭園です」とだけ書くと、映像の変化や伝えたい内容が分かりません。

「桜の花びらが風に舞い、庭園の小道へ落ちていく。続いて、木々の間を歩く人の姿が映る」のように、理解に必要な動きと場面の変化を順番に記します。

代替情報の提供方法

代替情報は、動画の直後に掲載する方法と、別ページに掲載して動画の近くからリンクする方法があります。

文章が長い場合は別ページに分けてもかまいませんが、リンク先の内容が分かる文言を使い、動画との関係が見つけやすい位置に置きます。

別ページへ案内するHTML例

<video controls>
  <source src="example.mp4" type="video/mp4">
  このブラウザでは動画を再生できません。
</video>

<p>
  <a href="media-alternative.html">
    動画の内容をテキストで読む
  </a>
</p>

リンク文言は「こちら」ではなく、「動画の内容をテキストで読む」のように目的を具体的に示します。

同じページに掲載するHTML例

<video controls>
  <source src="garden.mp4" type="video/mp4">
  このブラウザでは動画を再生できません。
</video>

<section aria-labelledby="video-alternative-title">
  <h2 id="video-alternative-title">
    庭園を紹介する動画のテキスト代替
  </h2>
  <p>
    桜の花びらが風に舞い、庭園の小道へ落ちていきます。
    続いて、木々の間を歩く人の姿が映ります。
  </p>
</section>

同じページに掲載すれば、再生できない環境でも動画の近くで内容を確認できます。

表示を切り替える仕組みを追加しなくてもよい場合は、文章を最初から表示しておくと、操作方法を説明せずに利用できます。

代替文を作る手順

  1. 音声の情報を書き出す:ナレーション、会話、理解に必要な音を確認します。
  2. 映像だけで伝えている情報を拾う:動作、場面の変化、図、画面上の文字を確認します。
  3. 時間の流れに沿って統合する:音声と映像の情報を、読んで分かる順序に並べます。
  4. 動画と照合する:文章だけを読んだときに、内容の理解に必要な情報が抜けていないか確認します。
  5. 見つけやすい位置に掲載する:動画の直後、または動画の近くに置いた明確なリンクから提供します。

公開前の確認項目

メディア代替が役立つ場面

完全なテキスト代替は、視覚情報を確認しにくい人、音声を聞きにくい人、動画や音声を再生できない環境にいる人が、同じ内容へ別の方法でアクセスする助けになります。

文章として提供すれば、利用者は自分のペースで読み進め、必要な箇所を確認できます。

関連する記事

達成基準1.2.8への対応を整理する

達成基準1.2.8への対応では、動画の要約ではなく、音声と映像から理解に必要な情報を拾い、内容の流れに沿ったテキスト代替を用意します。

動画の近くに本文または分かりやすいリンクを置き、メディアを再生しなくても内容へ到達できることを公開前に確認します。

当社では、ウェブアクセシビリティを導入しやすくするUUU ウェブアクセシビリティを提供しています。アクセシビリティ向上に取り組む際は、サービスの詳細をご覧ください。

モバイルバージョンを終了