トピックを検索
字幕のない動画と、確認されていない自動字幕
使い方の動画が手順を音声だけで伝え、字幕がないか、誰も確認していない音声認識の字幕しかありません。
<video src="brew-guide.webm" controls> 問題
動画の音が聞こえない人は、話の内容をすべて逃し、確認されていない自動字幕からは誤った内容を受け取ります。
コーヒー焙煎店の商品ページに、淹れ方を説明する短い動画があります。映っているのはコーヒー豆で、役に立つ情報はすべてナレーションにあります。お湯250ミリリットルに豆15グラム、沸いたお湯は30秒ほど冷ます、3回に分けて注ぎ、3分で止める。最後にキッチンタイマーが鳴ります。動画に字幕がないため、プレーヤーには字幕ボタンもありません。別の版のページでは、動画配信サービスが音声認識で作った字幕付きで動画を公開しています。字幕は出ますが、「50グラム」「3秒ほど覚まします」と書かれています。
達成基準1.2.2は、同期したメディアに含まれる収録済みの音声すべてに字幕を求めます。話された言葉すべて、分かりにくいときの話し手、そしてタイマーのような意味のある音です。字幕のない動画は、そのまま満たしません。数値を変えてしまう字幕も満たしません。W3Cの解説では、自動字幕は完全に正確だと確認されない限り要件を満たさないとされ、失敗例F8は、台詞や重要な音を省いた字幕を不適合としています。1.2.4は、ライブ動画に同じことをリアルタイムで求めます。
静かなオフィスや電車の中、スマートフォンで音を消して見ている人も、同じ無音に出会います。音を出すより、動画を飛ばしてしまうことがよくあります。
10グループ中3グループに影響
- 全盲 (影響なし)
- 弱視 (影響なし)
- 色覚 (影響なし)
- ろう (影響あり)
- 難聴 (影響あり)
- 発話 (影響なし)
- 手の操作 (影響なし)
- 届く範囲・力 (影響なし)
- 認知 (影響あり)
- 光過敏 (影響なし)
- 聴覚を使わない ナレーションの内容、つまり分量、温度、止めるタイミングがすべて失われます。誤った自動字幕は、レシピとして読まれてしまうため、字幕がないよりも悪い結果になります。
- 聴覚が限られる 小さな声、早口、話し声の下の音楽は聞き取りにくくなります。一部が聞こえる人は、字幕で聞き逃した部分を補い、聞き取りがあいまいな数値を確かめます。
- 言語・認知・学習の能力が限られる 聞きながら読めると、話し言葉の理解に時間がかかる人や、母語以外で見ている人の助けになり、手順を見返すのに再生し直す必要もなくなります。
axeは、各 <video> の中に <track kind="captions"> があるかを見ます。ない場合は、字幕が映像に焼き込まれている可能性があるため、人による確認を求めます。ある場合は、ファイルを読み込みも、中身を読みもせずに合格とします。YouTubeやVimeoのプレーヤーはまったく対象外です。「50」が「15」の誤りかどうかは、どの自動チェックにも分かりません。AIツールは字幕を簡単に生成でき、二つ目の版はそうして生まれました。音声認識は字幕作りの前の工程で、字幕作りそのものではありません。
試してみる
淹れ方の動画を消音にして再生してください。レシピが分かりますか?
「問題1」の動画には字幕がなく、プレーヤーに字幕ボタンもありません。「問題2」では、プレーヤーの字幕ボタンで自動字幕をオンにし、動画の下のナレーションと比べてください。修正を適用すると、人が確認した字幕が、トラックで、または映像に焼き込んで表示されます。
問題あり 修正できますか?
ハウスブレンドの淹れ方
ナレーション(全文)
- 当店のハウスブレンドの淹れ方です。
- お湯250ミリリットルに、コーヒー豆を15グラム使います。
- お湯が沸いたら、30秒ほど冷まします。
- 3回に分けてゆっくり注ぎ、3分で止めてください。
- [キッチンタイマーの音]
修正方法
話し声のある動画には、人が書いたか確認した字幕を付けます。視聴者がオンにするトラックか、映像への焼き込みで。
- 1話された言葉と意味のある音をすべて、タイミングを合わせて字幕にする。
- 2自動字幕は、人が修正して初めて字幕になる。
- 3画面にいない話し手は名前を示し、音は角かっこで書く。
字幕のない動画
<h2>ハウスブレンドの淹れ方</h2><video controls preload="metadata" src="brew-guide.webm" poster="brew-guide.jpg"></video>人が書いたか確認した字幕トラック
<video controls preload="metadata" src="brew-guide.webm" poster="brew-guide.jpg"> <track kind="captions" srclang="ja" label="日本語" src="brew-guide.ja.vtt"></video>この方法を選ぶ理由:文字はテキストのままにする
レシピはナレーションの中にしかありません。字幕トラックがないためプレーヤーに字幕ボタンも出ず、音が聞こえない人には24秒間コーヒー豆が映るだけです。
ファイルにはすべての文とタイマーの音が、発話に合わせて入っています。トラックがあるため、プレーヤーには字幕ボタンが表示されます。字幕はブラウザーが描くテキストなので、視聴者はオンとオフを切り替えられ、OSの字幕設定で大きくしたり、色を変えたり、背景を付けたりできます。自動字幕のファイルから始めても構いません。人が音声と照らして直すことで、字幕になります。
言葉が正しければ、どちらも1.2.2を満たします。字幕トラックを使ってください。小さなテキストファイルで同じ役目を果たし、大きさ、色、表示するかどうかを視聴者に委ねられます。焼き込んだ字幕にはそれができません。焼き込みは、字幕ファイルを扱わないプラットフォームに投稿する動画のように、トラックが使えない場合だけにし、自分のサイトには同じ動画のトラック版を置きます。
動画を再生する場所によって、字幕ファイルの置き場所が変わります。
- 自分の
<video>:上の例のように、言語ごとに<track>を置く。別オリジンの字幕ファイルにはCORSヘッダーと、動画のcrossorigin属性が必要。ないとブラウザーはエラーも出さずにトラックを捨てる。 - YouTube、Vimeo、Wistiaの埋め込みプレーヤー:修正した字幕ファイルをそのプラットフォームの動画にアップロードするか、自動字幕をそこで編集して公開する。埋め込みコードは変わらない。できる場合は自動字幕を非公開にし、字幕メニューに確認済みのものだけが出るようにする。
- 独自ボタンのカスタムプレーヤー:ブラウザーの字幕ボタンは標準のコントロールに付くものなので、名前があってキーボードで届く字幕ボタンを自分で用意する。
話されている言語のトラックには kind="captions" を使います。kind="subtitles" は翻訳のためのもので、音が聞こえる視聴者向けに書かれるため、音の説明を含みません。翻訳の字幕があればトラックを追加しますが、字幕(captions)の代わりにはなりません。
トラックに default 属性を付けると、動画の開始時に字幕が表示されます。消音で始まる動画のように、どうせ誰にも音が聞こえない場合に向いています。利用者が自分で再生する動画では付けず、視聴者やOSの設定に任せます。
字幕は、時間を合わせた書き起こし以上のものです。画面にいない話し手や、話し手が変わるときは名前を示し、意味のある音は角かっこで書き([キッチンタイマーの音]、[笑い声])、一つのキューは短い2行までにして、読めるだけの時間表示します。動画の下の書き起こしは歓迎されますし、音声だけのクリップはそれで1.2.1を満たします。ただし1.2.2の修正にはなりません。同期していないため、視聴者は映像と文字のどちらかを選ぶことになります。
新商品の発表配信やウェビナーのようなライブ動画は1.2.4の対象です。人の字幕制作者か、話し手と用語に対して十分な精度があると確認したライブ字幕サービスによる、リアルタイムの字幕が必要です。配信が終わって録画をページに残すと、それは収録済みの動画になり、1.2.2により修正した字幕ファイルが必要です。
例外は限られています。ページにすでにあるテキストを繰り返すだけで、そう明示した動画は、テキストのメディア代替として字幕が要りません。話し声も意味のある音もない動画、たとえば無音の商品ループ映像も同様です。
AI コーディングアシスタントで修正しますか? このガイドを Markdown で取得
修正の確認
マウスを使わない4つの確認
確認方法: 音を消して視聴、キーボード、字幕の設定
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。動画や字幕ファイルを差し替えた際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。字幕が伝えるのは聞こえる内容です。注ぎ方の手つきや、読み上げられない画面上の文字のように、見えるだけの内容には音声解説が必要で、これは別の要件です(1.2.3と1.2.5)。音付きで勝手に始まる動画は、止められない自動再生の音声で扱っています。実際に視聴する人と、動画が実際に再生されるプレーヤーやプラットフォームで、操作全体を確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
参考資料
- WCAG Understanding: captions-prerecorded(新しいタブで開きます)
- WCAG Understanding: captions-live(新しいタブで開きます)
- w3.org: captions(新しいタブで開きます)
- WCAG Technique H95(新しいタブで開きます)
- WCAG Technique G87(新しいタブで開きます)
- WCAG Technique G93(新しいタブで開きます)
- WCAG Technique F8(新しいタブで開きます)
- developer.mozilla.org: track(新しいタブで開きます)
- developer.mozilla.org: WebVTT_API(新しいタブで開きます)
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。