音はサイトの雰囲気を伝えられる一方で、利用者が望まない場面で流れると、情報の聞き取りや集中を妨げることがあります。
記事や案内ページなど、情報伝達が中心のコンテンツでは、背景音を使わない設計が最もわかりやすい出発点です。
音を使う目的がある場合は、主な音声を邪魔しない音量に調整し、利用者がすぐに停止できる操作を用意します。
この記事で扱う背景音
背景音とは、ページ上で主な情報とは別に流れる音、またはナレーションの後ろで流れる音楽や効果音を指します。
この二つは似ていますが、確認する問題と対策が異なります。
| 場面 | 起こりやすい問題 | 先に検討する対策 |
|---|---|---|
| 記事や案内ページで音が流れる | 読み上げ音声と重なる、または集中を妨げる | 背景音を使わない |
| ナレーションに音楽や効果音が重なる | 主な音声を聞き分けにくい | 背景音をなくすか、十分に小さくする |
| 演出上の理由で音を残す | 利用者が止め方を見つけにくい | わかりやすい停止操作を用意する |
背景音が利用を妨げる場面
背景音の影響は、障害の有無だけでなく、利用している機器や周囲の環境によっても変わります。
- スクリーンリーダーを利用している場合：画面の情報を音声や点字で伝える支援技術の読み上げと背景音が重なると、内容を聞き取りにくくなることがあります。
- 音に敏感な場合：小さな音でも長く続けば、負担やストレスになることがあります。
- 仕事や学習に集中している場合：必要のない音が流れると、文章を読み続けにくくなることがあります。
- 公共の場所や静かな環境で閲覧している場合：予期しない音が周囲への配慮を難しくし、ページを閉じるきっかけになることがあります。
WCAGの20dB基準が対象とする音声
WCAGは、Webコンテンツを利用しやすくするためのアクセシビリティガイドラインです。
WCAG 2.2の達成基準1.4.7「背景音が低い又はない」は、主に発話を含む事前収録の音声のみのコンテンツを対象とするLevel AAAの基準です。
対象となる音声では、次のいずれかを満たすように設計します。
- 背景音を含めない。
- 背景音を利用者が止められるようにする。
- 背景音を主な発話より少なくとも20dB低くする。
したがって、20dBという数値を、Webサイトで流れるすべての音に一律に当てはめるわけではありません。
まず音声の種類と目的を確かめ、ページ上の音については、利用者が再生を選べるか、簡単に止められるかという操作面も確認します。
背景音を使う前に決める四つのこと
1．その音は情報の理解に必要か
装飾や雰囲気づくりだけが目的であれば、背景音を使わない選択から検討します。
音がなくても情報と操作が成立するなら、無音にすることで読み上げや集中との衝突を避けられます。
2．利用者が再生を選べるか
音を使う場合も、ページを開いた時点で再生するのではなく、利用者が必要なときに再生できる構成がわかりやすいでしょう。
再生する前に音声の内容や長さがわかる案内があれば、利用者は自分の環境に合わせて判断できます。
3．停止操作をすぐ見つけられるか
停止や消音の操作は音声プレーヤーの近くに置き、「背景音を停止」のように対象がわかる名前を付けます。
「オフ」だけでは何が止まるのか判断しにくいため、操作の結果が伝わる表記にします。
4．主な音声を聞き取れるか
ナレーションに背景音を重ねる場合は、編集者の環境だけで音量を決めず、背景音をなくした版や音量を下げた版も比べます。
演出より発話の理解を優先し、迷う場合は背景音を外します。
テキストと音声を分けて選べるようにする
文章を読みながら音声も利用できるページでは、テキストと音声を一体にせず、利用者が必要な形式を選べるようにします。
たとえば、本文は音を流さなくても読める状態に保ち、音声は独立したプレーヤーから再生できる構成にします。
この分け方なら、スクリーンリーダーの読み上げを使う利用者も、追加の音声を自分の判断で再生または停止できます。
公開前のチェックリスト
- 音がなくても情報を理解し、必要な操作を完了できるか。
- ページを開いただけで、利用者が選んでいない音が流れないか。
- 音を使う目的を説明できるか。
- 停止や消音の操作が音声の近くにあり、何を止めるかが名前からわかるか。
- ナレーションと背景音を同時に流しても、発話を無理なく聞き取れるか。
- 20dB基準を使う場合、達成基準1.4.7の対象となる音声かを確認したか。
背景音設計の判断順序
- 音がなくても目的を達成できるなら、背景音を使わない。
- 音に役割があるなら、利用者が再生と停止を選べるようにする。
- 事前収録の発話音声に背景音を加えるなら、達成基準の適用範囲を確かめ、無音、停止機能、音量差の順に検討する。
背景音を減らすこと自体が目的ではなく、主な情報と操作を利用者が無理なく受け取れる状態をつくることが目的です。
当社では、ウェブアクセシビリティ対応を支援するUUU ウェブアクセシビリティウィジェットツールを提供しています。
機能や導入方法は、サービスページでご確認ください。