ウェブサイトに動画を掲載すると、サービスの雰囲気や使い方を短時間で伝えやすくなります。
一方で、音声だけ、映像だけ、マウス操作だけに頼った動画は、利用環境や身体特性によって内容が届きにくくなります。
動画を公開するときは、Webアクセシビリティの基本として、字幕、音声解説、操作性、テキスト要約、読み込みやすさをまとめて確認することが大切です。
まず確認したい動画アクセシビリティの観点
動画のアクセシビリティは、特別な追加機能だけを指すものではありません。
聞こえない、見えない、操作しにくい、通信環境が不安定といった状況でも、できるだけ同じ情報にたどり着けるようにする設計です。
| 確認項目 | 何を補うか | 主な対象 |
|---|---|---|
| 字幕・キャプション | 音声で伝えている内容 | 音が聞こえない人、音を出せない環境の人 |
| 音声解説 | 映像だけで伝えている内容 | 画面を見づらい人、映像を注視できない人 |
| 再生コントロール | 再生、停止、音量、字幕切り替え | キーボードや支援技術で操作する人 |
| テキスト要約 | 動画全体の要点 | 短時間で内容を確認したい人、動画を再生できない人 |
| 品質・読み込み配慮 | 通信環境に応じた視聴しやすさ | 低速回線やモバイル環境の人 |
1. 字幕・キャプションを用意する
字幕は、話している言葉を文字で表示するだけではありません。
内容理解に必要な笑い声、拍手、ドアが閉まる音、音楽の変化なども、必要に応じて文字で補います。
そのため、動画や非テキスト情報の代替手段を考えるときは、「音を文字に置き換える」だけでなく、「理解に必要な情報を残す」視点が重要です。
字幕を追加するHTML例
<video controls>
<source src="sample-video.mp4" type="video/mp4">
<track src="captions.vtt" kind="captions" srclang="ja" label="日本語字幕">
あなたのブラウザは動画をサポートしていません。
</video><track>タグで字幕ファイルを指定すると、ユーザーが字幕を選べる形にしやすくなります。
字幕ファイルを作るときは、話者の発言、重要な音、場面の変化を、読みやすい長さで整理します。
字幕がない場合に起きること
<video controls>
<source src="sample-video.mp4" type="video/mp4">
あなたのブラウザは動画をサポートしていません。
</video>- 音声を聞けないユーザーには、説明や会話の内容が伝わりません。
- 音を出せない場所で閲覧しているユーザーも、動画の要点を把握しにくくなります。
- 映像だけでは分からない効果音や周囲の状況が、情報として失われます。
2. 音声解説で映像の意味を補う
音声解説は、映像だけで伝えている情報を音声で説明するものです。
たとえば、登場人物の表情、画面上の文字、場面転換、重要な動きなどは、映像を見られないと理解しにくい場合があります。
そのような情報を別音声や解説付き動画で補うと、画面を十分に見られないユーザーにも内容が伝わりやすくなります。
音声解説付き動画への導線例
<p><a href="video-with-description.mp4">音声解説付きの動画を見る</a></p>リンク文は「こちら」ではなく、何が開くのか分かる文言にします。
解説付きの別バージョンを用意する場合も、通常版の近くに配置し、ユーザーが迷わず選べるようにします。
3. 再生コントロールを操作しやすくする
動画は、再生、停止、音量調整、字幕の切り替えをユーザー自身が操作できる必要があります。
特に、キーボード操作とフォーカス表示に配慮し、Tabキーで操作対象に移動できるか、現在どこを操作しているか分かるかを確認します。
基本的な再生コントロールの例
<video controls>
<source src="sample-video.mp4" type="video/mp4">
あなたのブラウザは動画をサポートしていません。
</video>controls属性を付けると、ブラウザ標準の再生コントロールを表示できます。
ただし、実際の操作性はブラウザ、埋め込み方法、利用しているプレイヤーによって変わるため、公開前にキーボードだけで操作を確認します。
自動再生は慎重に扱う
音声付き動画が突然再生されると、ユーザーが混乱したり、画面読み上げなどの支援技術の利用を妨げたりすることがあります。
動画は、ユーザーが必要なタイミングで再生できる状態にしておくのが基本です。
どうしても自動再生が必要な場面では、音声の有無、停止方法、再生開始の分かりやすさを必ず確認します。
4. 動画内容をテキストでも要約する
テキスト要約は、動画を見られない人だけのためではありません。
内容をすばやく確認したい人、通信環境の都合で動画を再生できない人、後から検索して読み返したい人にも役立ちます。
要約では、動画の目的、主な話題、結論、必要な補足情報を短く整理します。
テキスト要約の例
この動画では、会社の成り立ちとミッションを紹介しています。
最初に創業者が会社設立の背景を説明し、続いて現在の事業内容を紹介します。
最後に、今後の展望と社会的な責任について話しています。
- 動画の主要なポイントを、再生しなくても分かる形で書きます。
- 登場人物、場面、画面上の文字など、理解に必要な情報を補います。
- 長い動画では、章ごとの見出しや箇条書きを使うと読みやすくなります。
5. 読み込み速度と品質選択にも配慮する
動画はファイルサイズが大きくなりやすく、通信環境によっては再生までに時間がかかります。
低速な回線でも内容にアクセスできるように、必要に応じて画質の異なる動画やテキスト要約を用意します。
複数画質を用意する場合の考え方
<video controls>
<source src="video-720p.mp4" type="video/mp4">
<source src="video-480p.mp4" type="video/mp4">
あなたのブラウザは動画をサポートしていません。
</video>複数の動画ファイルを用意するだけで、すべての環境で分かりやすい画質選択UIが出るとは限りません。
利用しているCMSや動画プレイヤーの仕様に合わせて、ユーザーが選べる導線を用意し、その導線がキーボードでも操作できるか確認します。
公開前チェックリスト
- 字幕に、発言だけでなく理解に必要な音情報が含まれているか。
- 映像だけで伝えている重要な情報に、音声解説やテキスト補足があるか。
- 再生、停止、音量、字幕切り替えをキーボードで操作できるか。
- 音声付き動画が意図せず自動再生されないか。
- 動画の要点をテキストだけでも理解できるか。
- 低速回線やモバイル環境でも、代替手段を含めて内容にアクセスできるか。
まとめ
アクセシブルな動画掲載では、字幕、音声解説、操作性、テキスト要約、読み込みやすさを一体で考えます。
どれか一つを整えるだけでは、音声に頼る情報、映像に頼る情報、操作しにくいUIが残ることがあります。
まずは字幕とテキスト要約から着手し、次に音声解説、プレイヤーの操作性、品質選択を確認すると、動画の内容をより多くのユーザーに届けやすくなります。