この記事でわかること

  • 収録済みの動画に音声解説を求める、WCAGの達成基準1.2.5の内容
  • 音声解説で伝えるものと、要らない動画の見分け方
  • 会話の間に入れる解説と、映像を止めて入れる解説の違い
  • 元の動画と解説つきの版を、見ていた位置のまま切りかえる書き方

講座の紹介動画で、講師が「では、これを使います」と話しながら画面に道具を映すと、映像の見えない人には「これ」が何かわかりません。画面に出る「手順1」の文字も、声で読まれなければ届きません。この記事では、映像だけで伝えている情報を声で補う「音声解説」を、WCAG 2.2の達成基準1.2.5を軸に整理します。

読み比べたのは、W3Cが公開している達成基準1.2.5の解説(Understanding)と、技法G78・G173・G8・G203・H96、失敗例F113の原文です。確かめた日は2026年11月4日です。教室の動画とファイル名は説明のために作ったもので、特定の道具やスクールの宣伝ではありません。

先に結論: 映像だけの情報を、会話の間に声で足す

動画の中で、見ないとわからない動きや文字があるなら、会話の間にそれを声で説明した版を用意します。 どの方法を選ぶかは、動画の作りで変わります。

動画の作り どうするか 技法
会話の間に余裕がある 間に解説を入れた音声の版 G78・G173
会話の間が足りない 映像を止めて解説を入れた版 G8
一人が話すだけ 場の様子を文字で添える G203
音声で全部伝わる 音声解説は要らない 解説の注記

音声解説を求める基準(1.2.5)

WCAG 2.2の達成基準1.2.5(レベルAA)は、映像と音声を組み合わせたメディアのうち、収録済みの映像のすべてに音声解説を付けることを求めています。

解説では、ねらいを、目の見えない人や見えにくい人が、動画やページと同じ言語で、映像の情報を得られるようにすることとしています。音声解説は、見えない人のほか、目で見た様子を読み取りにくい認知の障害のある人にも役立つとしています。

レベルAの達成基準1.2.3では、音声解説か、全体の文字の説明かを選べます。解説では、レベルAAに適合したい場合は、1.2.5で音声解説を用意しなければならないとしています。

音声解説で伝えるもの

用語の定義では、音声解説を、元の音声だけではわからない大事な映像を説明するために、音声に足す語りとしています。「ビデオディスクリプション」「説明の語り」とも呼ばれます。

解説によると、音声解説は会話の間に、動作・登場する人・場面の変わり目・画面の文字のうち、大事なのに元の音声で話されていないものを伝えます。技法G78の例には、講師が「これがいちばん大事です」と話すたびに、「これ」が何かを伝える解説を足す講義があります。

一方で、映像の大事な情報がすべて元の音声で伝わっているなら、音声解説を足す必要はありません。技法G203では、変わらない背景の前で一人が話すだけの動画は、時間とともに変わる大事な映像がないため、場の様子や画面に出る名前を文字の説明で添えればよいとしています。ただし、話す人が入れかわり、誰が話しているかが画面の文字でしかわからない動画には使えません。

会話の間に入れる解説と、映像を止めて入れる解説

技法G78は、利用者が選べる2つめの音声として、元の音声に解説を加えた版を用意する方法です。多くのブラウザは複数の音声を重ねて流せないため、解説を加えた音声そのものに入れかえる形にします。解説は、元の音声の大事な情報を隠さないよう、会話や効果音の間に入れます。解説を加えた音声は、選べる別の音声にしても、全員が聞く標準の音声にしてもよいとしています。

技法G173は、元の音声と解説を1本にまとめた、動画の2つめの版を用意する方法です。別のページに置く場合は、ほかの版へ移るリンクがあるかを確かめます。

会話の間が短く、解説を入れきれない動画には、技法G8の「拡張音声解説」があります。映像と音を一時止めて、大事な情報を伝えてから続きを流す版です。必要としない人の視聴の妨げになるため、オンとオフを切りかえられるようにするか、解説のある版とない版を用意します。

失敗例F113は、会話の間を使わずに、映像だけで伝える大事な情報を解説しないことです。注記では、2秒より短いような間や、説明したい映像から離れた間は、音声解説に向かないことがあるとしています。

書き方の例: 音声解説つきの版に切りかえるボタン

次のHTMLは、元の動画(tour.mp4)と、会話の間に解説を入れた同じ長さの版(tour-ad.mp4)を、ボタンで切りかえる例です。切りかえる前に見ていた位置と、再生中だったかどうかを引き継ぎます。

<video id="tour" controls preload="metadata" src="/media/tour.mp4"></video>
<button type="button" id="ad-button" aria-pressed="false">音声解説</button>

<script>
  const video = document.getElementById("tour");
  const button = document.getElementById("ad-button");
  const files = { off: "/media/tour.mp4", on: "/media/tour-ad.mp4" };

  button.addEventListener("click", function () {
    const useAd = button.getAttribute("aria-pressed") !== "true";
    const at = video.currentTime;            // 見ていた位置
    const playing = !video.paused;
    video.addEventListener("loadedmetadata", () => {
      video.currentTime = at;                // 同じ位置から続ける
      if (playing) video.play();
    }, { once: true });
    video.src = useAd ? files.on : files.off;
    button.setAttribute("aria-pressed", String(useAd));
  });
</script>

ボタンの文字は「音声解説」のまま変えず、オンとオフはaria-pressedで伝えます。位置を引き継げるのは、2つの版の長さが同じときだけです。映像を止めて解説を入れる拡張音声解説の版は長さが変わるため、切りかえではなく、別の版へのリンクで案内します。

手順: 自分の動画に音声解説が要るか確かめる

  1. 音だけで聞いてみる: 画面を見ずに動画を流し、内容がわかるかを確かめます
  2. 映像だけの情報を書き出す: 話されていない動作・人・場面の変わり目・画面の文字を、時刻と一緒に書き出します
  3. 会話の間を探す: 書き出した情報の近くに、解説を入れられる長さの間があるかを見ます
  4. 版を決める: 間が足りれば解説を入れた音声の版、足りなければ映像を止めて解説を入れた版にします
  5. 選び方を確かめる: 解説つきの版をオンにする操作や、ほかの版へのリンクがあるかを確かめます

試した結果

この記事のために、架空の教室の案内の動画を2本作りました。声はMacの読み上げ(日本語の声)、映像は青から緑に変わる色の画面だけで、どちらも17秒です。元の版は会話が2つだけ、解説つきの版は、その会話の間に「画面に、手順1、色を決める、と出ています」などの解説を2つ入れたものです。上のHTMLと2本の動画を、外へつながない作業用のPCの小さなWebサーバーに置き、画面を出さないChromeから読み込みました。

  • 2つの版の長さは、ブラウザで読み取ってどちらも17秒でした
  • 2つの解説(3.8秒と4.1秒)は、どちらも元の版の会話のない間(4.9秒と5.55秒)に収まり、会話との間は0.55秒以上ありました。解説の区間の外では、2つの版の音は同じでした
  • 再生中の4.03秒でボタンを押すと、解説つきの版に切りかわり、4秒台のまま再生が続きました。aria-pressedはtrueになりました
  • 7.03秒でもう一度押すと、元の版に戻り、7秒台から再生が続きました
  • 止めた状態で、Tabキーでボタンに移ってEnterキーを押すと、7.08秒の位置のまま止まった状態で、解説つきの版に切りかわりました
  • 参考に、track要素のkindをdescriptionsにした版も試しました。読み込む設定にすると、Chromeは説明の文を2つ読み込みましたが、声で読み上げるかは調べていません

使ったのは作業用のMacのChrome 156で、画面も音も出さずに動かしました。スクリーンリーダーでは試していません。動画の中身は作り物で、解説の言葉の良し悪しは確かめていません。

自分で作るか、相談するかの判断

目安は、「動画の音声を、自分で作り直せるか」です。自分で撮った短い動画で、話し手が画面の文字や動作を声でも言えば済むなら、撮り直しや録り直しで、元の音声に解説を含めることもできます。

ほかの人が作った動画や、会話がずっと続いて間のない動画は、解説を入れる場所と言葉の選び方に慣れが要ります。その場合は、動画を作った人や制作を任せた人に、解説つきの版を作れるかを相談します。映像の情報を言葉にする練習をしたい場合は、Webデザインの講座で、作った動画と解説の言葉を講師に聞いてもらう方法もあります。

つまずきやすいところ

  • 字幕があるから大丈夫と考える: 字幕は音声を文字で伝える仕組みで、映像を声で伝える音声解説とは向きが逆です。字幕をどう付けるかは、Webデザインで動画に字幕を付ける方法で説明しています
  • 解説を会話に重ねる: 解説は会話や大事な効果音の間に入れます。重ねると、元の音声の情報が聞き取れなくなります
  • 画面の文字を言い忘れる: 字幕ではない画面の文字(手順の番号や名前)は、音声解説で伝えるものです。写真やイラストの中身を文字で伝えるときは、Webデザインで画像の代替テキスト(alt)を書く方法を見てください
  • 解説つきの版が勝手に流れる: 切りかえたときも、止まっていた動画を勝手に再生しないようにします。自動で流れる音をどう扱うかは、Webデザインで自動再生の音を止められるようにする方法に書きました
  • 長さの違う版で位置を引き継ぐ: 映像を止めて解説を入れた版は長さが変わるため、同じ秒数に移ると場面がずれます

まとめ

  • WCAG 2.2の達成基準1.2.5では、収録済みの動画に音声解説を付けます
  • 音声解説は、話されていない動作・人・場面の変わり目・画面の文字を、会話の間に声で伝えます
  • 音声だけで全部伝わる動画や、一人が話すだけの動画は、扱いが変わります
  • 解説つきの版は、利用者がオンにする操作か、ほかの版へのリンクで選べるようにします