Webページを開いた瞬間に音声が流れると、利用者は内容を読む前に音源を探して止めなければなりません。
音声機能の設計では、利用者が「いつ再生するか」「いつ止めるか」「どの音量で聞くか」を自分で選べる状態にすることが基本です。
ここでは、音声の自動再生が利用を妨げる理由と、実装時に確認したい操作方法を整理します。
音声コントロールが指すもの
音声コントロールとは、Webページ内の音声を利用者自身が再生、一時停止、停止し、音量を調整できる仕組みです。
単に消音できるだけでは、聞き直したい人や途中で中断したい人の操作には応えられません。
- 再生開始：利用者が必要なときに音声を始められる。
- 一時停止と停止：聞くのを中断し、不要な音声を止められる。
- 音量調整：利用環境や聞こえ方に合わせて音量を変えられる。
- キーボード操作：マウスを使わなくても各コントロールへ移動して操作できる。
自動再生が利用を妨げる理由
自動再生の問題は、音が好みに合わないことだけではありません。
予期しない音声が別の音声や作業に割り込み、必要な情報の理解や操作を難しくする場合があります。
- スクリーンリーダーを使う人：スクリーンリーダーは画面の情報を音声で読み上げる支援機能であり、ページ内の音声が重なると読み上げを聞き取りにくくなることがあります。
- 音に敏感な人：突然の音や大きな音によって、不快感や負担が生じることがあります。
- 聞こえにくさのある人：音量が固定されていると、必要な音声を聞き取りやすい状態に調整できません。
- 集中して作業している人：複数のページを開いていると、どのページから音が出ているのかを探すだけでも作業が中断します。
- 静かな場所で利用する人：公共の場や職場では、意図しない音声が周囲にも影響します。
音声の自動再生を避けることは、特定の利用者だけに向けた対応ではなく、利用環境を選ばずページを使いやすくする配慮です。
WCAGと音声コントロールの関係
ウェブコンテンツアクセシビリティガイドライン（WCAG）でも、自動的に始まる音声を利用者が制御できるようにする考え方が示されています。
詳しい位置づけは、関連記事「WCAG 2.2の「1.4.2 音声コントロール」」で確認できます。
ここで求められる配慮は、音声や動画をすべてなくすことではなく、再生の主導権を利用者に持たせることです。
ただし、音声コントロールはウェブアクセシビリティを構成する一つの領域であり、サイト全体の適合性は音声以外の項目も含めて確認する必要があります。
実装時の確認ポイント
実装では、機能が存在するかだけでなく、必要なときに見つけて操作できるかを確認します。
| 確認項目 | 確認する内容 |
|---|---|
| 初期状態 | ページを開いただけでは音声が始まらず、利用者の操作を待つ。 |
| 再生と停止 | 再生後も、一時停止または停止の操作を見つけやすい位置で使える。 |
| 音量 | 消音だけでなく、必要に応じて音量を段階的に調整できる。 |
| キーボード | キーボードだけでコントロールへ移動し、再生と停止を操作できる。 |
| 表示と名称 | 「再生」「一時停止」「停止」など、各ボタンの働きを見分けられる。 |
| 読み上げとの両立 | スクリーンリーダーの読み上げ中に予期しない音声が重ならず、必要ならすぐ止められる。 |
再生は利用者の操作から始める
ページを表示しただけで音声を始めず、再生ボタンを押したときに開始する設計にします。
これにより、利用者は内容と周囲の状況を確認してから、音声を聞くかどうかを判断できます。
停止と音量調整を別の操作として用意する
音量を下げる操作と音声を止める操作は、利用者の異なる目的に応えます。
一時的に中断したい場合は一時停止、不要になった場合は停止、聞き取りやすさを変えたい場合は音量調整を選べるようにします。
キーボードだけでも操作できるようにする
マウス操作が難しい人のために、キーボードで再生ボタンや停止ボタンへ移動し、そのまま実行できることを確認します。
ショートカットを用意する場合も、通常のキーボード操作の考え方に沿って、各コントロールへ到達できる状態を保ちます。
ボタンの働きを明確にする
アイコンの見た目だけに頼らず、「再生」「一時停止」「停止」など、何が起きるボタンなのかを理解できる表示にします。
コントロールを一か所にまとめ、音声が流れている間も見失いにくくすると、停止までの操作が短くなります。
音声を含むページの公開前チェック
実装後は、次の順序で実際の操作を確かめます。
- ページを開き、操作していない状態で音声が始まらないことを確認する。
- 再生後に一時停止と停止が使え、コントロールが見失われないことを確認する。
- 消音と音量調整を試し、利用者が聞こえ方を変えられることを確認する。
- マウスを使わず、キーボードだけで再生から停止まで操作する。
- スクリーンリーダーの読み上げとページ内音声が重なる場面でも、コントロールを識別して音声を止められるか確認する。
音声をアクセシブルにする目的は、音声をなくすことではありません。
利用者が再生するタイミングと聞き方を選べるようにし、意図しない音声に操作を妨げられないページにすることです。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールをリリースしております。
アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。