トピックを検索
書き起こしのないポッドキャストと無音の動画
ポッドキャストのクリップは助言を声だけで伝え、無音の使い方動画は手順を映像だけで見せ、どちらのそばにもテキストがありません。
<audio controls src="care-tips.mp3"> 問題
音が聞こえない人はポッドキャストの内容をすべて逃し、目が見えない人は無音の動画が見せる内容をすべて逃します。
調理器具の店の、鋳鉄のフライパンの商品ページです。商品写真の下に二つのメディアがあります。一つ目は、店のポッドキャストから切り出した24秒のクリップです。司会のアレックスが、フライパンを作るマヤに手入れの方法を尋ね、マヤは、食洗機には絶対に入れないこと、すぐにコンロで火にかけて乾かすこと、温かいうちに小さじ半分の油をすり込むことを話します。二つ目は、音も言葉もない短い動画です。フライパンに油をすり込んでから拭き取り、逆さにして230°Cのオーブンに入れ、タイマーが60分から減っていき、黒くつやのある状態で出てきます。どちらのそばにもテキストはありません。ページのお手入れ欄には「下のクリップと動画をご覧ください」としか書かれていません。
達成基準1.2.1は、音だけ、または映像だけの収録済みメディアを対象にします。ポッドキャストのクリップのような音声だけのコンテンツには、同じ情報を伝えるテキストの代替が必要です。話された言葉すべて、誰が話したか、意味のある音です。無音の使い方動画のような映像だけのコンテンツには、見せる内容を順番に説明するテキストの代替か、それを音声で伝えるトラックのどちらかが必要です。この例では、クリップに書き起こしがなく、動画には説明もナレーションもないため、どちらも満たしません。例外は、「この記事を聞く」ボタンのように、ページにすでにあるテキストを繰り返すだけで、そう明示したメディアだけです。
イヤホンを持たずに電車に乗っている人も、同じ無音に出会います。オーブンの温度を探している人は、動画を見直すよりテキストのほうが早く見つけられます。
10グループ中4グループに影響
- 全盲 (影響あり)
- 弱視 (影響なし)
- 色覚 (影響なし)
- ろう (影響あり)
- 難聴 (影響あり)
- 発話 (影響なし)
- 手の操作 (影響なし)
- 届く範囲・力 (影響なし)
- 認知 (影響あり)
- 光過敏 (影響なし)
- 聴覚を使わない お手入れのコツは話し声にしかないため、食洗機についての注意が届きません。点字で読む盲ろう者には、音も映像も届かないため、書き起こしと動画の説明の両方が必要です。
- 視覚を使わない 油ならしの手順は映像だけです。スクリーンリーダーは動画とそのボタンを読み上げますが、油、オーブン、230°C、1時間かかることは何も伝えません。
- 聴覚が限られる 小さな声や短い返事は聞き取りにくくなります。書き起こしがあれば、油の量のように聞き取りがあいまいだった部分を、再生し直さずに確かめられます。
- 言語・認知・学習の能力が限られる 自分のペースで読み、一つの手順に戻るほうが、音声を再生し直したり動画を探したりするより簡単です。母語以外で見ている場合は特にそうです。
axeには、1.2.1を確認する有効なルールがありません。以前の audio-caption ルールは非推奨で無効になっており、<audio> に字幕トラックがあるかを見るものでした。これは基準が求めるものではありません。音のない動画が情報を伝えるのか飾りなのか、書き起こしが録音と一致しているかは、どのツールにも分かりません。AIはどちらの下書きも作れます。音声認識で書き起こしの初稿ができ、画像を理解するモデルで動画を説明できます。しかし「フライパンをオーブンに入れる」という下書きは正しく見えても、逆さに入れること、温度、時間という、利用者が必要とする部分が抜けています。内容を知っている人が、下書きをメディアと照らし合わせる必要があります。
試してみる
音と映像をオフにして、クリップか動画を再生してください。何が分かりますか?
スイッチは、クリップが聞こえない人や、動画が見えない人の代わりです。プレーヤーは再生できますが、何も伝わりません。「問題1」はポッドキャストのクリップ、「問題2」は無音の油ならし動画です。修正を適用すると、プレーヤーの下に書き起こしと説明が出るか、別のページへのリンクが出ます。
問題あり 修正できますか?
お手入れのコツ(ポッドキャストより)
修正方法
音声クリップには書き起こしを、無音の動画には説明を付けます。プレーヤーの下のページ内に置くか、プレーヤーのすぐそばからリンクした別のページに置きます。
- 1話された言葉をすべて書き出し、話し手の名前を示し、意味のある音は角かっこで書く。
- 2無音の動画が見せる手順を、画面の言葉や数値も含めてすべて説明する。
- 3テキストはプレーヤーのすぐ下に置くか、そこへのリンクをプレーヤーのすぐそばに置く。
書き起こしのない音声クリップ
<h2>お手入れのコツ(ポッドキャストより)</h2><audio controls preload="metadata" src="care-tips.mp3"></audio>プレーヤーの下、ページ内のテキスト
<h2>お手入れのコツ(ポッドキャストより)</h2><audio controls preload="metadata" src="care-tips.mp3"></audio><h3>書き起こし</h3><p><b>アレックス:</b>マヤさん、新しいフライパンで、いちばん多い間違いは何ですか?</p><p><b>マヤ:</b>食洗機です。食洗機には絶対に入れないでください。 油の膜がはがれて、さびてしまいます。</p><p><b>アレックス:</b>では、どう洗えばいいですか?</p><p><b>マヤ:</b>お湯で手洗いします。すぐにコンロで火にかけて乾かし、 温かいうちに、小さじ半分の油をすり込みます。</p> <h2>油ならしの手順</h2><video controls preload="metadata" src="seasoning.webm" poster="seasoning.webp"></video><h3>動画の内容</h3><p>この動画に音はありません。</p><ol> <li>フライパンに油を数滴たらし、布ですり込みます。</li> <li>ペーパータオルで、ほとんど乾いて見えるまで油を拭き取ります。</li> <li>フライパンを逆さにしてオーブンに入れ、下に天板を置いて、230°Cで60分焼きます。</li> <li>オーブンの電源を切り、中でフライパンを冷まします。 黒くつやのある状態で出てきます。</li></ol>この方法を選ぶ理由:テキストの代替は、元の内容のそばに置く
助言は録音の中にしかありません。聞こえない人には再生ボタンと24秒の進行バーが見えるだけで、食洗機でフライパンが傷むことは伝わりません。
書き起こしは、話し手の名前とともに、すべての言葉を順番に伝えます。説明は、画面にしか出ない温度と時間も含めて、動画が見せる手順をすべて伝えます。どちらもプレーヤーのすぐ後にある普通のテキストなので、スクリーンリーダーは次に読み、点字ディスプレイや翻訳も読めます。ページ内検索で「食洗機」や「230」も見つかります。
テキストに漏れがなければ、どちらも1.2.1を満たします。テキストはプレーヤーの下、ページ内に置いてください。失うものなしに同じ役目を果たします。プレーヤーを見つけた人は誰でもテキストも見つけられ、メディアと同じ場所で編集するため、食い違うことも、切れたリンクの先で失われることもありません。W3Cのメディアのガイドも、自分のサイトのメディアなら書き起こしは同じページに置くのが最善としています。多くの商品で共有するテンプレートのように、テキストを足せないページにプレーヤーがある場合は別のページにし、リンクはプレーヤーのすぐそばに置きます。
長い書き起こしは、プレーヤーの下の <details> 要素に入れ、<summary> を「書き起こし」にすれば、ページは短いまま、Enter一つでテキストを開けます。テキストはページの中にあり、ChromeとEdgeでは、閉じた <details> の中の言葉にページ内検索が当たると開きます。長い書き起こしは話し手が変わるごとに段落を分け、区切りごとに見出しを付けます。タイムスタンプは、録音の特定の場面に飛びたくなる箇所にだけ付けます。
書き起こしは、予定した台本ではなく、実際の録音どおりに書きます。話し手は最初と交代のたびに名前を示し、意味のある音は角かっこで書き([フライパンの焼ける音]、[笑い声])、台本や音声認識の下書きを最終的な音声と照らして直します。HTMLのまま公開します。PDFやスキャンした紙はダウンロードが増え、話し手や段落の区切りが失われがちです。
メディアを再生する場所によって、テキストの置き場所が変わります。
- 自分の
<audio>や<video>:上の例のように、その下に置く。 - Spotify、Apple Podcasts、SoundCloudなどの埋め込みプレーヤー:埋め込みの下に、自分で用意した書き起こしを置く。音声認識で書き起こしを作るプラットフォームもあるが、自動字幕と同じく確認が必要で、ページに埋め込んだプレーヤーには表示されないこともある。
- 独自ボタンのカスタム音声プレーヤー:書き起こしは操作ボタンの中ではなく、プレーヤー全体の下に置く。
無音の動画は、ナレーション付きの版、つまり各手順で何が映っているかを伝える音声トラックでも1.2.1を満たせます。視覚障害者や、音声のほうが分かりやすい人の助けになりますが、点字で読む盲ろう者には何も届かず、動画を変えるたびに録り直す録音がもう一つ増えます。テキストの説明は、ナレーションが助ける人にも、盲ろう者にも届きます。まず説明を用意し、ナレーションは追加として考えます。
焙煎中の豆を映す背景ループのように、伝える情報がない動画は飾りなので、説明は要りません。ただし5秒を超えて自動で再生されるなら、止める手段が必要です。これは止められないティッカー、カルーセル、アニメーションで扱っています。話し声のある動画はこのガイドの対象外です。字幕が必要で、字幕のない動画と、確認されていない自動字幕で扱っています。
AI コーディングアシスタントで修正しますか? このガイドを Markdown で取得
修正の確認
マウスを使わない3つの確認
確認方法: 音を消して視聴、画面を見ずに視聴、スクリーンリーダー
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。録音、動画、テキストを差し替えた際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。対象は、音だけ、または映像だけの収録済みメディアです。音と映像の両方がある動画には、話された内容の字幕(1.2.2)と、映像だけで伝わる内容の音声解説(1.2.3と1.2.5)が必要です。それぞれ字幕のない動画と、確認されていない自動字幕と音声解説がなく、画面の情報が伝わらない動画で扱っています。その全文のテキスト代替はAAAの基準1.2.8です。ラジオ配信のようなライブの音声はAAAの基準1.2.9です。勝手に始まる音は止められない自動再生の音声で扱っています。実際に聞いたり見たりする人と、メディアが実際に再生されるプレーヤーやプラットフォームで、操作全体を確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。