トピックを検索
音声解説がなく、画面の情報が伝わらない動画
使い方の動画が分量を画面の文字だけで示し、ナレーションは「このくらい」と言うだけで、音声解説版もありません。
問題
動画が見えない人には「このくらい量ります」だけが聞こえ、分量が分かりません。
コーヒー焙煎店の淹れ方動画には、正しい字幕が付きました。ところが店はSNS向けに動画を編集し直し、分量は映像の上の文字のカードに移り、ナレーションは短くなりました。「このくらい量ります」の間、画面には「豆15 g・お湯250 ml」のカードが出ています。「お湯は少し置きます」の間は「沸騰後、30秒冷ます」、「ゆっくり注いで、ここで止めます」の間は「3回に分けて注ぐ・3:00で止める」が出て、最後にキッチンタイマーが鳴ります。映像なしで聞く人には、感じのよい声とタイマーの音が届くだけで、レシピは届きません。
レベルAの達成基準1.2.3は、音声付きの収録済み動画について、見えない人にも映像の内容を伝えることを求めます。方法は音声解説か、全文のテキストの代替のどちらかです。レベルAAの1.2.5は、音声解説そのものを求めます。音声解説とは、画面上の文字、動作、場面の変化など、映像の大切な内容を、音声の間に入れて語るナレーションです。映像が示す内容をすでに音声がすべて言っていれば、追加は要りません。この動画はそうではなく、レシピの数値はすべて画面にしかありません。字幕も助けになりません。字幕が伝えるのは聞こえる内容で、音声は分量を一度も言わないからです。
見るのではなく聞いている人も、同じ穴に落ちます。ケトルから目を離せない人や、台所の離れた場所でスマートフォンの動画を流している人です。
10グループ中3グループに影響
- 全盲 （影響あり）
- 弱視 （影響あり）
- 色覚 （影響なし）
- ろう （影響なし）
- 難聴 （影響なし）
- 発話 （影響なし）
- 手の操作 （影響なし）
- 届く範囲・力 （影響なし）
- 認知 （影響あり）
- 光過敏 （影響なし）
- 視覚を使わない 分量、冷ます時間、止めるタイミングは画面にしかありません。ナレーションは「このくらい」「ここで」と言うだけなので、レシピが伝わりません。
- 視覚が限られる 文字のカードはスマートフォンでは小さく、数秒ずつしか表示されません。画面の一部が見える人や、拡大鏡でゆっくり読む人は、消える前に読み切れないことがあります。
- 言語・認知・学習の能力が限られる 手順を見ながら耳でも聞けると、文字より話し言葉のほうが分かりやすい人や、母語以外で見ていてカードを読み切れない人の助けになります。
axeには音声解説のチェックがありません。自動チェックは字幕トラック付きの <video> を見つけて合格にします。映像を見ることも、話し声と比べることもできないためです。EaseWebの診断は、すべての動画を人が確認する項目として挙げ、そばに音声解説の操作、descriptionsトラック、書き起こしがあるかも記録します。ただし、音声が映像の内容を言っているかどうかは、見て聞く人にしか判断できません。AIツールはフレームから解説の下書きを作れますが、どの情報が大切かは分かりません。豆の様子を説明して、カードの数値こそがレシピだという点を見落とします。
試してみる
映像を隠して、淹れ方の動画を再生してください。コーヒー豆は何グラム使いますか？
スイッチは、見えない人と同じように映像を覆います。プレーヤーの操作はそのまま使えます。音声の内容は動画の下に書いてあります。修正を適用すると、分量を言うナレーションを聞いたり、プレーヤーの下のボタンで音声解説版をオンにしたり、分量を含む書き起こしを読んだりできます。
問題あり 修正できますか？
ハウスブレンドの淹れ方
アニメーションによる説明・待ち時間は短縮しています。
音声の内容
- ナレーション：当店のハウスブレンドの淹れ方です。
- ナレーション：このくらい量ります。
- ナレーション：お湯は少し置きます。
- ナレーション：ゆっくり注いで、ここで止めます。
- ［キッチンタイマーの音］
修正方法
映像が示す大切な内容を、すべて音声に入れます。ナレーションそのものか、プレーヤーのそばの音声解説版で。
- 1映像が示す大切な内容は、すべて音声で伝わる。
- 2解説は間に入れ、話し声に重ねない。
- 3音声解説版は、プレーヤーのそばで、名前があり、キーボードで選べるようにする。
<h2>ハウスブレンドの淹れ方</h2><video controls preload="metadata" src="brew-guide.webm" poster="brew-guide.jpg"> <track kind="captions" srclang="ja" label="日本語" src="brew-guide.ja.vtt"></video>映像の内容を言葉にしたナレーション
<video controls preload="metadata" src="brew-guide.said.webm" poster="brew-guide.jpg"> <track kind="captions" srclang="ja" label="日本語" src="brew-guide.said.ja.vtt"></video>字幕ファイルは音声を正しく写していますが、そこが問題です。「このくらい」や「ここで」は、見える人にしか読めないカードを指しています。ほかの版もないため、15グラム、250ミリリットル、30秒、3分は、映像が見えない人に届きません。
カードが出ている間に、ナレーションがその分量を言います。一つの音声が映像と同じ内容を伝えるため、オンにするものは何もありません（統合型の解説、W3Cの達成方法G226）。カードは、画面をちらりと見る視聴者のために残して構いません。字幕も新しいナレーションに合わせるため、分量が入ります。
最初の二つは両方の達成基準を満たし、書き起こしはレベルAだけを満たします。ナレーションに解説を書き込むと、誰にでも通じる一本の動画になり、二つ目のファイルも、探すべき切り替えもなく、字幕も一緒に直ります。録り直しが必要で、分量を声に出すことがどの視聴者にも役立つ、使い方、商品、研修の動画に向いています。音声解説版は元の動画に手を加えないため、完成済みの映像、台本を変えられないブランド動画、ナレーターが割り込むと壊れる物語に向いています。二つ目のファイルと操作が必要です。レベルAAを目指すサイトでは、映像の内容を含む書き起こしはどちらかに加えるもので、代わりにはなりません。
動画を再生する場所によって、音声解説版の届け方が変わります。
- 自分の
<video>：上の例のように、二つ目のファイルとボタンを用意する。一つのファイルに二つ目の音声トラックを入れる方法（W3Cの達成方法G78）のほうがすっきりしますが、ブラウザーには音声トラックを選ぶ手段がないため、それができるプレーヤーが必要。 - YouTube、Vimeo、Wistiaの埋め込みプレーヤー：プラットフォームが動画に音声解説の音声トラックを追加できるなら使う。できなければ、音声解説版を別の動画として公開し、埋め込みのすぐ下にリンクを置く。
- 独自ボタンのカスタムプレーヤー：音声解説のボタンを、コントロールバーの字幕ボタンの隣に置き、名前を付けてキーボードで届くようにする。
<track kind="descriptions"> のファイルだけでは修正になりません。ブラウザーはキューを読み込みますが読み上げず、W3Cも参考の扱い（H96）にとどめています。音声合成で解説のキューを読み上げるアクセシブルなプレーヤーもあります。実際に使うプレーヤーがそうする場合に限って数えられ、その場合も間に収まる必要があります。
解説するのは、動画を理解するのに必要で、音からは分からないことです。画面上の文字、数値、動作、登場する人、場所の変化などです。現在形で、意味の解釈ではなく見えているものを言い、ナレーションがすでに言っていることは繰り返しません。間が短すぎるときは、解説を短くするか、ナレーションを書き直すか、長く編集した音声解説版を作ります。解説のために動画を一時停止するのは拡張音声解説（1.2.7、AAA）です。
音声解説版には専用の字幕ファイルが必要です。ナレーションに加えて解説も入れ、それぞれ誰が話しているかを示します。音声が別のものなので、字幕もそのすべてを伝えます。上のスクリプトのように、動画と一緒にファイルを切り替えます。音のない動画は1.2.1の対象で、書き起こしのないポッドキャストと無音の動画で扱っています。また、話し手が映るだけで、映像が話の内容に何も加えない動画には解説は要りません。
AI コーディングアシスタントで修正しますか？ このガイドを Markdown で取得
修正の確認
マウスを使わない4つの確認
確認方法： 画面を見ずに視聴、キーボード、スクリーンリーダー
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。動画、ナレーション、音声解説版を差し替えた際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。解説が必要かどうか、何を言うべきかは動画によって異なり、このガイドでは判断できません。話し声の字幕は別の要件で、字幕のない動画と、確認されていない自動字幕で扱っています。実際に視聴する人と、動画が実際に再生されるプレーヤーやプラットフォームで、操作全体を確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
参考資料
- WCAG Understanding: audio-description-or-media-alternative-prerecorded（新しいタブで開きます）
- WCAG Understanding: audio-description-prerecorded（新しいタブで開きます）
- w3.org: description（新しいタブで開きます）
- w3.org: transcripts（新しいタブで開きます）
- WCAG Technique G226（新しいタブで開きます）
- WCAG Technique G173（新しいタブで開きます）
- WCAG Technique G78（新しいタブで開きます）
- WCAG Technique G69（新しいタブで開きます）
- WCAG Technique F113（新しいタブで開きます）
- WCAG Technique H96（新しいタブで開きます）
- developer.mozilla.org: track（新しいタブで開きます）
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。