本文へ移動
easeweb
ご相談
トピックを検索

字幕のない動画と、確認されていない自動字幕

使い方の動画が手順を音声だけで伝え、字幕がないか、誰も確認していない音声認識の字幕しかありません。

WCAG 2.2
SC 1.2.2ASC 1.2.4AA
必須とする規格
Section 508 · EN 301 549(EU) · JIS X 8341-3
問題あり <video src="brew-guide.webm" controls>
アクセシビリティの問題を示した図: レシピは音声だけ。画面には何も出ない。
01

問題

動画の音が聞こえない人は、話の内容をすべて逃し、確認されていない自動字幕からは誤った内容を受け取ります。

02

試してみる

淹れ方の動画を消音にして再生してください。レシピが分かりますか?

「問題1」の動画には字幕がなく、プレーヤーに字幕ボタンもありません。「問題2」では、プレーヤーの字幕ボタンで自動字幕をオンにし、動画の下のナレーションと比べてください。修正を適用すると、人が確認した字幕が、トラックで、または映像に焼き込んで表示されます。

問題あり 修正できますか?

ハウスブレンドの淹れ方

ナレーション(全文)

  • 当店のハウスブレンドの淹れ方です。
  • お湯250ミリリットルに、コーヒー豆を15グラム使います。
  • お湯が沸いたら、30秒ほど冷まします。
  • 3回に分けてゆっくり注ぎ、3分で止めてください。
  • [キッチンタイマーの音]

再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。

03

修正方法

話し声のある動画には、人が書いたか確認した字幕を付けます。視聴者がオンにするトラックか、映像への焼き込みで。

  1. 1話された言葉と意味のある音をすべて、タイミングを合わせて字幕にする。
  2. 2自動字幕は、人が修正して初めて字幕になる。
  3. 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>

この方法を選ぶ理由:文字はテキストのままにする

AI コーディングアシスタントで修正しますか? このガイドを Markdown で取得

04

修正の確認

マウスを使わない4つの確認

確認方法: 音を消して視聴、キーボード、字幕の設定

4件中0件を確認済み

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。動画や字幕ファイルを差し替えた際は、再度確認します。

制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。字幕が伝えるのは聞こえる内容です。注ぎ方の手つきや、読み上げられない画面上の文字のように、見えるだけの内容には音声解説が必要で、これは別の要件です(1.2.3と1.2.5)。音付きで勝手に始まる動画は、止められない自動再生の音声で扱っています。実際に視聴する人と、動画が実際に再生されるプレーヤーやプラットフォームで、操作全体を確認してください。

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

コードを更新しても、使いやすさを保つために

ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。

再テストの進め方