動画と音声のWebアクセシビリティ実践ガイド：字幕、音声解説、文字起こし、プレイヤー操作

最初に押さえる5つの要点

1. 発話だけでなく、内容の理解に必要な効果音や話者情報もキャプションに含めます。
2. 映像を見ないと分からない行動、場面転換、画面上の文字には音声解説や説明文を用意します。
3. 文字起こしは自分の速度で読める代替手段ですが、同期したキャプションの代わりになるとは限りません。
4. 再生、停止、音量、字幕、再生位置などの操作をキーボードと支援技術から利用できるようにします。
5. 公開前の確認を一度で終わらせず、動画の差し替えやプレイヤー更新のたびに再テストします。

メディアの種類から代替手段を選ぶ

必要な対応は、音声だけのコンテンツか、映像と音声が同期したコンテンツか、ライブ配信かによって変わります。制作を始める前に、どの感覚から何の情報を受け取る設計なのかを分けて考えます。

この表は制作判断の入口です。WCAGへの適合は、対象ページに当てはまる達成基準をすべて確認したうえで判断します。

字幕とキャプションをどう作り分けるか

この記事では制作上の区別として、発話を中心に表示するものを字幕、発話に加えて意味のある効果音、話者、話し方も伝えるものをキャプションと呼びます。用語の使い方は地域やサービスによって重なるため、納品仕様では名称だけに頼らず、含める情報を明記します。

キャプションに含める情報

• 発話：省略によって意味が変わらないようにします。
• 話者：画面だけでは話者を特定できない場面で示します。
• 意味のある音：警報、電話の着信、扉が閉まる音など、展開の理解に必要な音を示します。
• 話し方：ささやき声や怒った声など、意味の解釈に関わる場合に補います。

たとえば、画面外で警報が鳴った直後に登場人物が避難を始める場面では、台詞だけでは行動の理由が伝わりません。「［警報音］」を加えることで、音を聞けない利用者にも因果関係が届きます。

WebVTTを使った基本例

<video controls preload='metadata'>
  <source src='movie.mp4' type='video/mp4'>
  <track kind='captions' src='ja.vtt' srclang='ja'
         label='日本語キャプション' default>
  <track kind='subtitles' src='en.vtt' srclang='en'
         label='English'>
</video>

kind='captions'は同じ言語の発話と音情報を伝えるトラック、kind='subtitles'は翻訳字幕に使う例です。実際の表示と切り替え方法はブラウザやプレイヤーで確認します。事前収録の要件を詳しく確認するときは、WCAG 2.2の事前収録キャプションの解説も参照できます。

公開前の品質確認

• 固有名詞、数字、専門用語を原稿と照合します。
• 表示の開始と終了が発話や音に合っているか確認します。
• キャプションが重要な顔、図表、画面上の文字を隠していないか確認します。
• 音声認識を使った場合も、人が映像と音声を通して確認します。

音声解説と説明付き文字起こし

音声解説は、主音声だけでは分からない重要な視覚情報を言葉で補うナレーションです。人物の行動、場面転換、表情、図表、画面上の文字のうち、内容の理解に必要なものを選びます。

説明を詰め込みすぎると台詞や効果音と重なります。台本の段階で音声解説を入れる余白を確認し、短く具体的な文にします。別音声として提供する場合は、利用者が選択できるプレイヤーまたは音声解説付きの別バージョンを用意し、実際の再生環境で切り替えを検証します。

説明付き文字起こしは、発話と意味のある音に加え、重要な視覚情報も読む順序に沿って記したテキストです。動画を自分の速度で読みたい人や、音声と映像を同時に追いにくい人にも役立ちます。ただし、映像を見ながら同期情報を受け取るキャプションとは役割が違うため、どちらか一方で常に代用できるわけではありません。

操作できるメディアプレイヤー

独自プレイヤーを作る前に、標準のvideo要素とcontrols属性で要件を満たせるか確認します。独自コントロールは外観を調整しやすい一方、キーボード操作、フォーカス管理、状態通知を実装して維持する必要があります。

キーボードで確認する項目

• Tabキーなどで全コントロールへ順番に移動できます。
• 再生、停止、音量、字幕、速度、全画面表示など、提供している機能をキーボードから操作できます。
• 現在フォーカスがある部品を見分けられます。
• メニューを開いた後に閉じられ、プレイヤーから次の要素へ移動できます。

MやCなどの一文字ショートカットを独自に設ける場合は、入力や音声操作との衝突を避ける設計が必要です。一般的なキー割り当てを決め打ちせず、画面上のボタンでも同じ操作を行えるようにします。実装と確認の詳細は、キーボード操作とフォーカス表示の確認方法で解説しています。

名前、役割、状態を伝える

再生ボタン、字幕切り替え、音量、再生位置には、支援技術が取得できる名前と役割が必要です。字幕のオンとオフ、メニューの開閉、再生位置など、操作で変化する状態や値も実際の表示と同期させます。

• 可能な限りbuttonやinput type='range'などの標準要素を使います。
• アイコンだけのボタンには、機能が分かるアクセシブルな名前を付けます。
• トグルボタンの状態はaria-pressed、開閉メニューはaria-expandedなどで伝えます。
• ARIA属性を付けるだけで操作は完成しません。キーボード処理と状態更新も実装し、支援技術で確認します。

自動再生、動き、点滅への配慮

再生は利用者の操作で始める設計が分かりやすく、突然の音や通信量の増加も避けられます。自動で始まるコンテンツを採用する場合は、停止や一時停止、音量の調整へすぐ到達できるかを確認します。

prefers-reduced-motionは、プレイヤー周辺の装飾的なアニメーションや画面遷移を抑えるために使えます。映像そのものをCSSで止める仕組みではないため、動画には別途、利用者が操作できる再生と停止を用意します。

@media (prefers-reduced-motion: reduce) {
  .player-panel {
    animation: none;
    transition: none;
  }
}

強い点滅は、1秒間に3回を超えないか、定められた閾値を下回る必要があります。制作時に避けることを基本とし、公開前に映像全体を確認します。

多言語対応と通信環境

翻訳字幕は言語ごとにトラックを分け、srclangと利用者に見えるラベルを一致させます。人名、製品名、専門用語は用語集で表記を統一し、文脈を共有したうえで翻訳を確認します。

通信環境への配慮では、再生品質を選べる仕組みや帯域に応じた配信を検討します。同時に、動画が再生できない場合でも主要な情報へ到達できるよう、文字起こしや資料への導線を動画の近くに置きます。特定のコーデックを採用するだけでは、端末やブラウザをまたいだ利用を保証できません。

制作工程に組み込む方法

1. 企画：音声のみ、映像のみ、同期メディア、ライブのどれに当たるかを整理し、必要な代替手段を決めます。
2. 台本：話者名、意味のある音、画面上の文字を記録し、音声解説を入れる余白も確認します。
3. 編集：キャプション、音声解説、説明付き文字起こしを同じ原稿から整え、内容の不一致を防ぎます。
4. 実装：プレイヤー、トラック、言語ラベル、テキスト版への導線を設定します。
5. 検証と運用：キーボード、支援技術、音声なし、画面なし、モバイル、低速回線などの条件で確認し、差し替え後も再テストします。

制作担当だけに確認を任せると、更新時に字幕や説明文が抜けやすくなります。企画、編集、実装、公開の各工程に担当項目を割り当て、公開条件として記録します。日々の更新まで含めた考え方は、公開後のWebアクセシビリティを守る運用ルールでも整理しています。

公開前の確認チェックリスト

1. 音声を消しても、キャプションから発話、話者、重要な音を理解できます。
2. 画面を見ない状態でも、主音声、音声解説、説明付き文字起こしから重要な視覚情報を把握できます。
3. キーボードだけで全機能を操作でき、フォーカス位置を見失いません。
4. スクリーンリーダーでボタン名、状態、再生位置を確認できます。
5. キャプションが顔、図表、画面上の文字を隠していません。
6. 動きを減らす設定が周辺UIに反映され、危険な点滅がありません。
7. 字幕の言語、文字起こしへのリンク、モバイル表示、読み込み失敗時の案内を確認しました。

WCAG 2.2との対応関係

動画と音声に関係する主な達成基準を、確認の入口として整理します。コンテンツの種類や例外条件を含めた判定が必要なため、この一覧だけで適合を宣言することはできません。

動画と音声を公開するときの優先順位

最初に、コンテンツの種類に合わせてキャプション、音声解説、文字起こしを選びます。次に、プレイヤーをキーボードと支援技術で操作できる状態にし、音声なし、画面なし、動きを減らした環境を含めて確認します。

最後に、その確認を制作標準へ組み込みます。公開時に整っていても、動画の差し替えや翻訳追加、プレイヤー更新で利用しにくさは再発するため、運用のチェックリストまで用意して初めて品質を保てます。

この記事に関連する株式会社greedenの取り組み

動画に字幕や音声解説を加えても、公開後の更新で品質を保つには継続的な点検が必要です。株式会社greedenは、Webアクセシビリティ支援サービス「UUU」で、既存サイトの改善点の診断と対応を支援します。