この記事でわかること

  • 音声だけ・映像だけのコンテンツに代わりを求める、WCAGの達成基準1.2.1の内容
  • ポッドキャストの書き起こしと、音の無い動画の文字の説明に入れるもの
  • 代わりが要らない場合と、よくある失敗
  • 書き起こし・手順の文・説明の音声を、音声や動画のすぐ近くに置く書き方

講座の案内のページに、講師が話すだけのポッドキャストと、作品ができるまでを音なしで見せる短い動画を載せたとします。音声だけでは聞こえない人に、音の無い動画では見えない人に、中身が届きません。この記事では、こうした「片方の感覚だけで受け取るコンテンツ」に付ける代わりの手段を、WCAG 2.2の達成基準1.2.1を中心にまとめます。

もとにしたのは、W3Cの達成基準1.2.1の解説(Understanding)と、技法G158・G159・G166、失敗例F30・F67の原文です。確かめた日は2026年11月5日です。番組と動画は説明用の作り物で、特定の道具やスクールを勧めるものではありません。

先に結論: 届かない側の人のために、同じ情報を別の形で付ける

音声だけのものには書き起こしを、音の無い映像だけのものには文字の説明か説明の音声を、すぐ近くに用意します。 何を付けるかは、コンテンツの作りで決まります。

コンテンツの作り 付けるもの 技法
収録した音声だけ 話した言葉と音の書き起こし G158
音の無い映像だけ 場面ごとの文字の説明 G159
音の無い映像だけ 映像を声で説明した音声 G166
本文を音や映像にしただけ そう示せば代わりは要らない 基準の例外

映像と音声が両方ある動画は、字幕(1.2.2)や音声解説(1.2.5)の基準で扱います。

音声だけ・映像だけを扱う基準(1.2.1)

WCAG 2.2の達成基準1.2.1(レベルA)は、収録済みの音声だけのコンテンツと、収録済みの映像だけのコンテンツを対象にします。ここでの「音声だけ」は映像も操作も無いもの、「映像だけ」は音も操作も無いものです。

音声だけのコンテンツには、同じ情報を伝える文字の代わり(時間の流れに沿って書いた文書)を用意します。映像だけのコンテンツには、文字の代わりか、同じ情報を伝える音声のどちらかを用意します。ただし、本文の文字をそのまま音声や映像にしたもので、そのことがはっきり示されている場合は除きます。

解説では、ねらいを、収録した音声や映像だけで伝えている情報を、すべての利用者が受け取れるようにすることとしています。文字の代わりは、利用者に合わせて画面の表示・読み上げ・点字のどれにもできるため、届く人が広がります。音の無い映像に説明の音声を付けると、見えない人と見える人が同じ内容を一緒に確かめられ、認知・言語・学習の障害のある人にもわかりやすくなるとしています。

書き起こしと文字の説明に入れるもの

技法G158は、音声だけのコンテンツと同じ話を、同じ情報・同じ言語で伝える文書を作る方法です。大事な会話のすべてと、話の一部になっている背景の音の説明を入れます。試し方では、話す人が複数いるとき、どの発言が誰のものかが書き起こしでわかるかを確かめます。解説の例でも、記者会見の書き起こしに、拍手や笑い、会場からの質問などの音を書き添えています。

技法G159は、映像だけのコンテンツと同じ話を伝える文書を作る方法です。映像では、動き・画面の文字や図・場面や背景・人の動きや表情などで情報を伝えます。文字の説明には、大事な情報のすべてと、景色・動き・表情などの描写を入れます。G159の例は、木工品を組み立てる音の無いアニメーションで、手順の番号と矢印を使っており、説明の文書には手順ごとの説明をすべて入れています。

技法G166は、映像の大事な情報を声で説明した音声を用意する方法です。音の無い映像は、見えない人と一部の見えにくい人には届かないため、ページと同じ言語で説明した音声を用意し、映像のすぐ前か後にその音声へのリンクを置きます。

どちらの技法でも、収録に使った台本や脚本は出発点になりますが、編集で中身が変わることが多いため、仕上がりに合わせて直してから使います。失敗例F67は、こうした長い説明が元のものと同じ目的を果たさない、または同じ情報を伝えないことです。地図の画像の例では、会場の名前を並べても、場所の情報が無いため失敗としています。

書き方の例: ポッドキャストと音の無い動画に代わりを付ける

次のHTMLは、ポッドキャストの音声(ep12.m4a)の後に書き起こしを、音の無い動画(card.mp4)の後に手順の文と説明の音声へのリンクを置く例です。音声と動画の名前には、何の内容で、代わりがどこにあるかを書きます。

<figure>
  <figcaption id="ep12-name">ラジオ「配色の話」第12回(書き起こしは下にあります)</figcaption>
  <audio src="/media/ep12.m4a" controls preload="metadata" aria-labelledby="ep12-name"></audio>
</figure>
<details id="ep12-text">
  <summary>第12回の書き起こしを読む</summary>
  <p>佐藤: 今日は、見出しの色を決めます。</p>
  <p>木村: 背景との差が足りるかも、一緒に見ましょう。</p>
  <p>(チャイムの音)</p>
  <p>佐藤: 次回は、ボタンの色です。</p>
</details>

<figure>
  <figcaption id="card-name">名刺の作り方の動画(音はありません。手順は下の文で読めます)</figcaption>
  <video src="/media/card.mp4" controls preload="metadata" aria-labelledby="card-name" aria-describedby="card-steps"></video>
</figure>
<ol id="card-steps">
  <li>0〜4秒: 白い紙の上のほうに、青い帯を引きます</li>
  <li>4〜8秒: 帯の下の中ほどに、名前を書く灰色の四角を置きます</li>
  <li>8〜12秒: 紙のふちを緑の枠で囲んで完成です</li>
</ol>
<p><a href="/media/card-voice.m4a">名刺の作り方の動画を、声で説明した音声</a></p>

書き起こしは、発言の前に話す人の名前を書き、チャイムのような大事な音も括弧で入れます。ページが長くなる場合は、details要素で畳んでおき、読みたい人が開けるようにします。動画の手順の文は、aria-describedbyで動画の説明として結び付けています。

手順: 自分のページの音声・動画を確かめる

  1. 種類を分ける: ページの音声と動画を、音声だけ・映像だけ・両方ありに分けます
  2. 本文の繰り返しか見る: 本文に書いた内容を音や映像にしただけのものは、そう書き添えます
  3. 代わりを書く: 音声だけなら書き起こし、映像だけなら場面ごとの文字の説明を、仕上がった中身に合わせて書きます
  4. 置き場所を決める: 代わりを、音声や動画のすぐ後に置くか、すぐ近くにリンクを置きます
  5. 名前を見直す: 音声や動画に付けた名前が、ファイル名や仮の文字になっていないかを見ます

試した結果

この記事用に、架空のポッドキャストの音声と、音の無い動画を作りました。音声は、上の書き起こしの3つの発言をMacの読み上げで二人の声に分けて読ませ、3つめの位置にチャイムの音を入れた約10秒のものです。動画は、白い紙に青い帯・灰色の四角・緑の枠が4秒ごとに加わる、図形だけの12秒のもので、音声の部分を作っていません。これらと上のHTMLを、作業用のPCの中だけで動くWebサーバーから出し、画面を表示しない設定のChromeで開きました。

  • 書き起こしは、音声を作った台本と同じ順・同じ言葉で、3つの発言すべてに話す人の名前がありました。音声を調べると、音のある区間は4つ(発言3つとチャイム)で、台本の並びと同じでした
  • ブラウザが読み上げソフトなどに伝える名前は、音声が「ラジオ「配色の話」第12回(書き起こしは下にあります)」、動画が「名刺の作り方の動画(音はありません。手順は下の文で読めます)」でした。動画の説明には、手順の文の3行がそのまま入りました
  • 名前にファイル名を入れた版では、名前は「ep12.m4a」「card.mp4」のまま伝わりました。名前を付けない版では、名前は空でした
  • 音声のすぐ後は書き起こし、動画のすぐ後は手順の文、その次が説明の音声へのリンクでした
  • Tabキーで書き起こしの見出しに移ってEnterキーを押すと、畳んであった書き起こしが開きました
  • 動画を2秒まで再生しても、ブラウザが読んだ音のデータは0バイトで、映像のデータだけを読んでいました。2つの音声は、再生すると音のデータを読みました
  • 動画の2秒・6秒・10秒の場面を取り出して色を調べると、青い帯だけ、灰色の四角が加わった所、緑の枠が加わった所で、手順の文の3行と合っていました

確かめた環境は、作業用のMacのChrome 156(画面と音を出さない動かし方)です。読み上げソフト(スクリーンリーダー)での確認はしていません。音声と動画の中身は作り物で、書き起こしや説明の言葉の良し悪しは確かめていません。

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

目安は、「中身を自分で全部わかっているか」です。自分で話したポッドキャストや、自分で作った短い手順の動画なら、台本や作った手順を仕上がりに合わせて直すだけで、書き起こしや文字の説明になります。

ほかの人が作った長い音声や、話す人が多い座談会、動きの細かいアニメーションは、聞き取りや描写に手間と慣れが要ります。その場合は、作った人や制作を任せた人に、書き起こしや説明を用意できるかを相談します。映像の中身を文章にする練習には、Webデザインの講座で、書いた説明を講師に読んでもらうこともできます。

つまずきやすいところ

  • 名前がファイル名のまま: 音声や動画の名前が「ep12.m4a」のままでは、何の内容かも、代わりがどこにあるかも伝わりません。名前に何を書くかは、画像の場合の考え方(Webデザインで画像の代替テキスト(alt)を書く方法)が参考になります
  • 台本をそのまま載せる: 収録で言い直した所や足した話が、書き起こしから抜けます。仕上がった音声を聞きながら直します
  • 話す人を書かない: 二人以上で話す番組では、発言ごとに誰の言葉かを書きます
  • 音の無い動画に字幕だけ付ける: 字幕は音声の言葉を文字にする仕組みで、音の無い映像の中身は伝えません。音声のある動画に字幕を付けるなら、Webデザインで動画に字幕を付ける方法を見てください
  • 音声も映像もある動画にこの方法だけ使う: その場合は、画面だけで伝わる中身を会話の間に声で足します。やり方はWebデザインで動画に音声解説を付ける方法で紹介しています

まとめ

  • 収録済みの音声だけ・映像だけのコンテンツには、WCAG 2.2の達成基準1.2.1で代わりが求められます
  • 音声だけには書き起こし、音の無い映像だけには文字の説明か説明の音声を用意します
  • 書き起こしには話す人と大事な音を、文字の説明には場面ごとの動きや画面の情報を入れます
  • 代わりはすぐ近くに置き、音声や動画の名前で、何の内容か・代わりがどこにあるかを伝えます