Webアクセシビリティ達成基準「1.4.2 音声の制御の達成基準」の話

前回はWebアクセシビリティ達成基準「1.4.1 色の使用の達成基準」について解説しました。
続けて今回は「1.4.2 音声の制御の達成基準」への対応について解説します。

「音声コンテンツを提供する際に注意すべきアクセシビリティ対応」について、具体的なポイントと実装方法を紹介します。動画やBGMなど、音声を使ったコンテンツは年々増えていますが、その分だけユーザーの利用環境に配慮する必要も高まっています。

「1.4.2 音声の制御」とは？

「1.4.2 音声の制御（Audio Control）」は、音が自動で再生されるコンテンツに関する達成基準です。
WCAG（Web Content Accessibility Guidelines）2.0レベルAに含まれており、視覚障害者や聴覚障害者はもちろん、スクリーンリーダーを利用するユーザーにも深く関わる項目です。

基本の定義

達成基準1.4.2では、以下のように定義されています。

ページが読み込まれてから自動的に再生される音声が3秒を超える場合、ユーザーはその音声を一時停止、停止、または音量を調整できなければならない。

つまり、ユーザーが操作できない状態で音声が流れ続けるようなページは、アクセシビリティ上問題があるということです。

なぜ「音声の制御」が重要なのか

一見、短いBGMや説明動画の自動再生ぐらい問題ないように思えるかもしれません。
しかし実際には、以下のような問題を引き起こします。

スクリーンリーダー利用者への影響

スクリーンリーダーは、Webページ上のテキストを読み上げるツールです。
自動再生の音声が同時に流れると、読み上げ音声と混ざってしまい、操作が困難になることがあります。
ユーザーは音声の出所を特定できず、重要な情報を聞き逃すおそれがあります。

聴覚過敏・注意障害のある利用者への影響

突然音声が再生されると、驚いてしまったり、集中が途切れてしまう人もいます。
特に公共性の高いサイトや教育系のサイトでは、ユーザーに不要なストレスを与えないことが求められます。

オフィスや公共空間での閲覧

業務中や図書館など、音を出せない環境でWebサイトを閲覧するケースも多くあります。
音が自動再生されると慌ててタブを閉じることになり、結果的にユーザーの離脱を招くことになります。

達成基準1.4.2を満たすための具体的な対応方法

音声や動画の「自動再生を避ける」

最も簡単で確実な方法は、音声を自動再生しないことです。
HTML5の<audio>タグや<video>タグにautoplay属性を付けなければ、自動再生は起こりません。

<!-- NG例：音声が自動再生される -->
<audio src="bgm.mp3" autoplay></audio>

<!-- OK例：ユーザー操作で再生 -->
<audio src="bgm.mp3" controls></audio>

YouTubeなどの埋め込み動画でも、iframeパラメータに「autoplay=1」を設定しないよう注意しましょう。

自動再生が必要な場合は「停止・ミュート機能」を提供する

どうしても演出上、自動再生が必要な場合もあると思います。
その際は、ユーザーが簡単に停止・ミュートできる操作手段を提供することが必要です。

例：JavaScriptで音声を停止・再生するトグルボタンを用意

<audio id="bgm" src="bgm.mp3" autoplay></audio>
<button onclick="toggleAudio()">音声を停止</button>

<script>
function toggleAudio() {
  const audio = document.getElementById('bgm');
  if (audio.paused) {
    audio.play();
    event.target.textContent = '音声を停止';
  } else {
    audio.pause();
    event.target.textContent = '音声を再生';
  }
}
</script>

ページ読み込み後3秒以内に自動停止する

WCAGの原文では「3秒を超える音声」と明記されています。
したがって、どうしても自動再生したい場合は、3秒以内に自動で停止させるという選択肢もあります。

ただし、ユーザーが驚くリスクは残るため、実際には自動再生を避ける方が無難です。

よくあるNGパターンと改善例

動画がページ読み込みと同時に再生される

トップページのメインビジュアルなどで、BGM付きの動画が自動再生されるケースがあります。
この場合、ユーザーが停止できないと1.4.2に違反します。

改善策：

• 「音声をオフにするボタン」を設置する
• デフォルトをミュートにして、ユーザーが明示的に再生を選べるようにする
  → muted autoplayを併用すれば、ミュート状態での再生は許容されます。

<video autoplay muted loop>
  <source src="visual.mp4" type="video/mp4">
</video>

ページBGMが常に流れ続ける

古い企業サイトなどで、BGMが常に流れる仕様を見かけることがあります。
この場合、停止手段がないと明確なNGです。

改善策：

• 「音声を再生／停止」ボタンを追加
• 再生状態を視覚的にも分かるようにする（例：音量アイコン）

JavaScriptライブラリの初期設定で音が出る

スライダーやアニメーションライブラリの中には、初期設定でサウンドが入っているものもあります。
開発時に気づかないこともあるため、ライブラリのデフォルト設定を必ず確認しましょう。

音声制御のUX（ユーザー体験）への影響

アクセシビリティ対応というと「義務的」な印象を持たれがちですが、音声制御はユーザー体験の質（UX）にも直結します。

制御できる安心感

ユーザー自身が「音声を出す／出さない」を選べることは、サイトの信頼感を高めます。
とくにビジネスサイトでは、意図せぬ音声再生が企業イメージを損なうこともあるため、制御手段の提供は必須といえます。

モバイル環境との相性

スマートフォンでは、モバイルOS側で自動再生をブロックする場合があります。
そのため、アクセシビリティ対応を行うことが結果的に再生エラーの防止にもつながります。

多様な利用環境への対応

聴覚に制限がある人だけでなく、視覚障害、注意障害、さらには業務中や移動中の人など、さまざまな環境のユーザーにとって「制御できるWebサイト」は親切です。

制作現場での実践ポイント

Web制作の現場では、案件によって動画やBGMを使う機会も多いと思います。
ここでは、実際の制作フローの中で意識しておきたいポイントを紹介します。

企画段階で「音の必要性」を検討する

音声やBGMは、本当に必要かどうかをまず検討します。
「雰囲気を出したい」という理由だけで入れてしまうと、後からアクセシビリティ対応が難しくなります。

デザイン段階で「制御UI」を設計する

音声を使用する場合は、最初から「停止ボタンをどこに置くか」「どんなアイコンにするか」をデザイン段階で決めておきます。
あとから追加すると、デザイン全体の整合性が取れなくなることがあります。

実装後はスクリーンリーダーで実機テスト

音声再生がスクリーンリーダーの読み上げを妨げていないか確認します。

まとめ：音の扱いも「情報の伝え方」の一部

「1.4.2 音声の制御」は、単に「音を止められるようにする」だけの話ではありません。
Webサイト上で音をどう扱うかは、情報をどう届けるかという設計思想にも関わります。

• 不要な自動再生は避ける
• 音声を使うなら、ユーザーが自由にコントロールできるようにする
• 制御UIをわかりやすく、操作しやすく設計する

これらを意識することで、誰にとっても快適なWeb体験を提供できるようになります。