WCAG 2.2の達成基準「1.2.2 字幕（事前録画）」は、事前に収録した音声を含む同期メディアに、音声と同期する字幕を提供する基準です。
字幕は、音声を聞けない利用者にも、会話や内容の理解に必要な音を文字で伝えます。
ここでは、基準の対象と字幕に含める情報を整理し、HTMLの<track>要素とWebVTTを使った基本的な実装方法を説明します。
達成基準1.2.2が求める字幕
同期メディアとは、音声と映像などが時間に沿って対応しているコンテンツです。
解説動画、製品デモ、収録済みの講義など、映像と一緒に事前録画された音声を提供する場合は、原則として字幕を用意します。
ただし、動画が本文の内容をそのまま示す「テキストの代替」であり、その用途が明確に表示されている場合は例外です。
達成基準1.2.2はLevel Aに位置づけられています。
ライブ配信の字幕は別の達成基準で扱われるため、詳しくはWCAG 2.2「1.2.4 字幕（ライブ）」の解説を参照してください。
字幕に含める情報
字幕は、発話を文字に置き換えるだけの原稿ではありません。
映像の内容を理解するために必要な音声情報を、適切なタイミングで伝える必要があります。
- 会話とナレーション：話された内容を意味が変わらないように記載します。
- 話者の情報：画面だけでは誰の発言か分かりにくい場面では、話者名や役割を示します。
- 意味のある非発話音：拍手、警報音、ドアが閉まる音など、理解に必要な音を記載します。
- 表示のタイミング：対応する音声に合わせて字幕を表示し、読み終える前に消えないよう調整します。
| 音声の例 | 字幕の例 | 伝える内容 |
|---|---|---|
| 講師の発言 | 講師：保存ボタンを選択します。 | 発言者と操作内容 |
| 画面外の警報音 | ［警報音］ | 場面の理解に必要な音 |
| 会場の反応 | ［拍手］ | 発言後の反応 |
音声に含まれない映像上の情報は、字幕だけでは伝えられません。
映像の説明が必要な場合は、音声解説やメディア代替の考え方も併せて確認します。
HTMLとWebVTTによる実装
ウェブページ上の動画に切り替え可能な字幕を追加する基本的な方法は、<video>要素の中に<track>要素を置くことです。
WebVTTは、字幕の文章と表示時間を記述するテキスト形式です。
track要素を動画に追加する
<video controls>
<source src="example.mp4" type="video/mp4">
<track
src="example-ja.vtt"
kind="captions"
srclang="ja"
label="日本語字幕">
このブラウザは動画を再生できません。
</video>src：WebVTTファイルの場所を指定します。kind="captions"：音声を理解するための字幕トラックであることを示します。srclang="ja"：字幕の言語を日本語に指定します。label="日本語字幕"：動画プレーヤーの字幕メニューに表示する名称を指定します。
元の実装例で使われていたkind="subtitles"は、主に会話の翻訳や書き起こしを表す種類です。
効果音や話者情報も扱うアクセシビリティ用の字幕には、kind="captions"を使います。
WebVTTファイルを作成する
WebVTTファイルはWEBVTTで始め、各字幕の開始時刻、終了時刻、表示する文章を順に記述します。
WEBVTT
00:00:00.000 --> 00:00:04.500
講師：これはウェブアクセシビリティの説明動画です。
00:00:04.500 --> 00:00:07.500
［拍手］
00:00:07.500 --> 00:00:12.000
字幕は、音声の内容を文字で伝えます。タイムスタンプが音声とずれていると、文章が正しくても内容を追いにくくなります。
作成後は必ず動画を再生し、字幕の開始と終了を実際の音声に合わせて調整します。
公開前の確認項目
コードに字幕ファイルを指定しただけでは、達成基準を満たしたと判断できません。
字幕の内容、同期、動画プレーヤーでの操作を実際に確認します。
- 字幕をオンとオフに切り替えられるか。
- 字幕ファイルが読み込まれ、最後まで表示されるか。
- 会話やナレーションに抜けがないか。
- 話者が変わる場面を字幕だけで区別できるか。
- 理解に必要な効果音や音楽の情報が含まれているか。
- 字幕の表示時間が音声に合い、落ち着いて読めるか。
- 字幕が映像内の重要な文字や操作箇所を隠していないか。
複数言語の字幕を提供する場合は、言語ごとに<track>要素を追加し、それぞれに適切なsrclangとlabelを設定します。
独自の言語切り替え処理を追加する前に、利用する動画プレーヤーの標準字幕メニューで各トラックを選択できるか確認すると、実装と検証を整理しやすくなります。
字幕が役立つ利用場面
字幕は、聴覚障害のある人や聞こえにくさのある人が、動画の音声情報を受け取るために必要です。
そのほかにも、音を出せない場所、周囲が騒がしい環境、聞き慣れない言葉を確認したい場面で役立ちます。
例えば、オンライン講座に字幕があれば、受講者は聞き取れなかった専門用語を文字で確認しながら学習できます。
実装時に押さえる要点
- 事前録画された音声付きの同期メディアには、原則として字幕を提供する。
- 発話だけでなく、話者と意味のある音の情報も字幕に含める。
<track kind="captions">とWebVTTで実装し、内容と同期を再生確認する。
字幕は、ファイルを追加して終わる対応ではなく、利用者が音声と同じ情報を受け取れるかを確認して完成します。
当社では、ウェブアクセシビリティの導入を支援するUUU ウェブアクセシビリティウィジェットツールを提供しています。
字幕を含むウェブアクセシビリティ対応を進めたい方は、サービスの詳細をご覧ください。