動画と音声のWebアクセシビリティ対応:字幕、文字起こし、音声解説の設計ポイント

black camera zoom lens in close photography
Photo by Pixabay on Pexels.com

Webアクセシビリティとは、利用者の障害や閲覧環境にかかわらず、必要な情報と機能を利用しやすくする考え方です。

動画と音声は、文章だけでは伝えにくい動きや声の調子を示せる一方、情報を音または映像だけに任せると、内容を受け取れない利用者が生まれます。

制作の出発点は、音で伝えている情報と映像で伝えている情報を分け、それぞれに適した代替手段を用意することです。

動画と音声で生じる情報の壁

音だけでは伝わらない情報

会話やナレーションを音声だけで提供すると、音を聞き取れない利用者は内容を確認できません。

聴覚に障害がある場合に限らず、騒がしい場所や音を出せない環境でも同じ問題が起こります。

字幕や文字起こしを用意すれば、音を再生できない状況でも内容を追えます。

映像だけでは伝わらない情報

話者が「こちらをご覧ください」とだけ述べ、結論を図表や動作だけで示すと、映像を見にくい利用者には要点が伝わりません。

ナレーションで視覚情報を補うか、ページ上の文章として説明する必要があります。

操作できなければ内容に到達できない

字幕や音声解説があっても、再生と停止、音量調整などを利用者が操作できなければ活用できません。

マウスだけに依存せず、キーボードでも操作でき、各ボタンの役割が名前から分かる状態にします。

代替手段の役割と使い分け

字幕、文字起こし、音声解説は似た機能に見えますが、補う情報が異なります。

字幕、文字起こし、音声解説を選ぶ考え方も確認し、コンテンツの種類に合う方法を選びます。

手段 補う情報 確認する点
字幕 会話、ナレーション、理解に必要な効果音や環境音 音声と表示のタイミングが合い、話者を区別できるか
文字起こし 音声の内容をページ上で読めるようにしたテキスト 見出しや段落があり、必要な箇所を探しやすいか
音声解説 せりふだけでは分からない動作、表情、図表などの視覚情報 本編の音声を妨げず、理解に必要な情報を補えているか

字幕は音声情報を時間に合わせて示す

字幕は、話し言葉を文字にするだけのものではありません。

内容の理解に必要な拍手や雷の音なども記し、映像だけを見ても場面を把握できるようにします。

話者が画面から分からない場面では、「司会者:」のように発言者を示します。

自動で作成した字幕を下書きにする場合も、固有名詞、誤変換、表示のタイミングを人が確認してから公開します。

文字起こしは内容を自分の速度で読めるようにする

文字起こしは、音声の内容をページ内または別ページの文章として提供する方法です。

音声だけのコンテンツでは、会話やナレーションを省かず、段落と見出しで内容を探しやすくします。

字幕が再生時間に合わせて表示されるのに対し、文字起こしは利用者が自分の速度で読み、必要な部分を確認できます。

音声解説は映像にしかない意味を補う

音声解説は、せりふやナレーションだけでは分からない視覚情報を言葉で伝える方法です。

人物の動作、表情、図表の要点など、内容の理解に必要な情報を選んで説明します。

本編の音声と重なる場合は、音声の間に説明を入れるか、別の音声トラックとして提供します。

再生コントロールを利用者に委ねる

動画や音声は、利用者が開始、停止、再開、音量調整を行えるようにします。

予期しない自動再生は避け、利用者が再生を始める設計にします。

詳しい理由と確認方法は、音声の自動再生を避ける設計で整理しています。

再生ボタンや音量ボタンには役割が分かる表示名を付け、キーボードで順番に移動して操作できるかを確認します。

実装と手動確認の手順は、Webアクセシビリティのキーボード操作も参考になります。

制作から公開までの進め方

  1. 情報を分ける:音だけで伝えている内容と、映像だけで伝えている内容を洗い出します。
  2. 代替手段を決める:字幕、文字起こし、音声解説、ページ内の説明文から必要なものを選びます。
  3. 本編と同時に作る:公開直前に付け足すのではなく、台本や編集の段階から代替手段を準備します。
  4. 人が内容を確認する:字幕の誤り、音声とのずれ、説明不足、読みづらい分割を修正します。
  5. 複数の操作方法で試す:音を消した状態、映像を見ない状態、キーボードだけの状態で要点と操作が伝わるかを確かめます。

改善前と改善後の例

改善前

  • 動画に字幕がなく、会話を音声だけで伝えている。
  • ナレーションが「こちらをご覧ください」と述べ、要点を映像だけで示している。
  • 操作ボタンの名前が分からず、キーボードでは再生できない。

改善後

  • 会話と理解に必要な音を、タイミングを合わせた字幕で示している。
  • 映像だけに含まれる要点を、ナレーションまたはページ上の説明文で補っている。
  • 文字起こしを掲載し、再生しなくても内容を確認できる。
  • 各コントロールの役割が分かり、キーボードでも再生、停止、音量調整ができる。

公開前の確認項目

  • 音声だけで伝えている情報に、字幕または文字起こしがあるか。
  • 映像だけで伝えている情報に、音声解説または説明文があるか。
  • 字幕に必要な効果音と話者情報が含まれ、表示のタイミングが合っているか。
  • 再生、停止、音量調整を利用者が行えるか。
  • 自動再生に依存していないか。
  • キーボードだけで各コントロールに移動し、操作できるか。

動画や音声を更新したときは、字幕、文字起こし、音声解説も同時に見直します。

代替手段と操作方法を本編の一部として管理することで、情報を受け取れる利用者と利用場面を広げられます。

投稿者 greeden

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)