ウェブサイトの背景音は、雰囲気を演出できる一方で、情報を受け取るための音を聞き取りにくくすることがあります。とくに、スクリーンリーダーの読み上げを聞いている人、音に敏感な人、静かな場所で閲覧している人にとって、意図しない音は操作や理解の妨げになりかねません。
基本となる考え方は明快です。情報を伝えるうえで必要のない背景音は使わず、必要な音声は利用者が再生や停止を選べるようにします。この記事では、その理由と実装時の判断基準を順に整理します。
背景音対策の要点
先に結論をまとめると、次の順序で考えると判断しやすくなります。
- 記事やニュースなど、音がなくても成立するページでは背景音を流さない。
- 音声を使う場合は、利用者の操作で再生を始められるようにする。
- 停止やミュート、音量調整の方法を見つけやすくする。
- ナレーションや会話が主役なら、背景音をなくすか、発話を妨げない大きさまで下げる。
- テキストと音声の両方を用意する場合は、利用者が別々に選べるようにする。
「小さな音なら問題ない」と制作側だけで決めるのではなく、音を必要としない利用方法も確保することが大切です。
背景音がアクセシビリティを損なう場面
ここでいう背景音とは、ナレーションや会話などの主音声とは別に流れる音楽や環境音を指します。背景音そのものが情報ではない場合でも、次のような場面では利用を妨げることがあります。
- スクリーンリーダーの読み上げと重なる：ページの音と読み上げ音声が同時に流れると、必要な情報を聞き分けにくくなります。読み上げ環境については、スクリーンリーダーの仕組みと実装ポイントも参考になります。
- 音に敏感な人の負担になる：小さくても持続する音が、ストレスや疲れにつながることがあります。
- 読むことや作業への集中を妨げる：仕事や学習中の閲覧では、内容と関係のない音が注意をそらすことがあります。
- 利用環境に合わない：公共の場所や静かな室内では、突然の音によってページを閉じざるを得ない場合があります。
配慮の対象を特定の障害だけに限定せず、「音を聞かない、または聞けない状況でも同じ情報と操作に到達できるか」と考えると、設計上の抜けを見つけやすくなります。
WCAGで区別したい2つの観点
ウェブコンテンツアクセシビリティガイドライン（WCAG）を参照するときは、「ページ上で流れる音を利用者が制御できること」と「発話の背後にある音を聞き分けやすくすること」を分けて考える必要があります。
ページ上で流れる音を制御できるようにする
ページを開いただけで音が始まる設計は避け、できるだけ利用者の操作をきっかけに再生します。音を使う場合は、再生だけでなく、停止、一時停止、ミュート、音量調整の方法も明確にします。スクリーンリーダーの音声とページの音が重なっても、停止方法を探せる配置になっているかを確認しましょう。
発話と背景音を聞き分けやすくする
元記事で触れていた「20デシベルの差」は、あらゆるウェブページの背景音に一律で当てはめるものではありません。主に発話を含む録音済みの音声のみコンテンツでは、背景音を入れない、背景音だけを止められるようにする、または背景音を前景の発話より少なくとも20デシベル低くする、という考え方があります。
前景の発話とは、利用者が聞き取るべきナレーションや会話です。音量の数値だけを目標にせず、発話が明瞭に聞こえること、背景音を必要としない利用者が止められることを優先します。音声や動画全体の設計は、音声・動画コンテンツのアクセシビリティ実践ガイドでも解説しています。
コンテンツ別の判断例
| コンテンツ | 起こりやすい問題 | 基本の対応 |
|---|---|---|
| 記事・ブログ・ニュース | 読む内容と関係のない音が集中を妨げる | 背景音を使わない |
| ナレーション中心の音声 | 音楽や環境音で発話が聞き取りにくくなる | 背景音をなくすか十分に下げ、停止できるようにする |
| テキストと音声を併用するページ | 読み上げ音声とページの音声が重なる | テキストと音声を分け、利用者が再生を選べるようにする |
| 演出として音を使うページ | 意図しない再生や継続音が負担になる | 自動再生を避け、明確な停止・ミュート手段を用意する |
迷ったときは、まず音なしで情報と操作が成立する形を作り、そのうえで必要な人が音を選べる設計にすると整理しやすくなります。
実装を進める5つの手順
1. 背景音の目的を確認する
背景音が情報を伝えているのか、雰囲気を加えるだけなのかを分けます。後者であれば、使わない選択を最初に検討します。
2. 再生を利用者の選択にする
ページを開いた直後に音を流すのではなく、「音声を再生」など、結果が分かる操作から始められるようにします。
3. 止め方を分かりやすくする
再生を始めた場所の近くに、停止、一時停止、ミュートなどの操作を置きます。「オン／オフ」だけでは何が変わるか分かりにくい場合は、「背景音を止める」のように対象と動作を示します。
4. 主音声とのバランスを整える
ナレーションや会話がある場合は、それらが常に前面で聞こえるようにします。制作環境だけで判断せず、背景音を止めた状態でも内容が自然に伝わるかを確かめます。
5. テキストと音声を独立させる
本文を読むために音声再生を必須にしたり、音声を聞くために本文を操作し続けたりする構成は避けます。テキストを読む、音声を聞く、両方を利用するという選択を分けておくと、利用者が自分の環境に合わせやすくなります。
公開前チェックリスト
- ページを開いただけで、予期しない音が流れないか。
- その背景音は、情報を伝えるために本当に必要か。
- 再生した場所の近くで、停止や一時停止ができるか。
- 「音声オフ」などの表示から、止まる音を理解できるか。
- ナレーションや会話が背景音に埋もれていないか。
- 背景音を止めても、情報や操作の意味が失われないか。
- テキストと音声を別々に利用できるか。
- スクリーンリーダーの読み上げとページの音が重なったとき、停止操作を見つけられるか。
確認中に迷う項目があれば、背景音なしを初期状態に戻し、必要な人が再生を選ぶ形から見直すとよいでしょう。
まとめ
背景音のアクセシビリティ対策では、音量を下げるだけでなく、音を使わない選択肢と利用者による制御を用意することが重要です。情報中心のページでは背景音を使わず、音声コンテンツでは発話の聞き取りやすさを優先します。
設計、実装、公開前確認の各段階で「音がなくても情報と操作に到達できるか」を確かめれば、スクリーンリーダー利用者だけでなく、音に敏感な人や静かな環境で閲覧する人にも使いやすいページに近づきます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールを提供しています。アクセシビリティ向上に関心のある方は、サービスの詳細をご覧ください。