サイトアイコン IT & ライフハックブログ｜学びと実践のためのアイデア集

WCAG 2.2「1.4.2 音声の制御」Level A：自動再生の停止と音量調整の実装例

greeden
three red tower speakers

Photo by Pixabay on Pexels.com

WCAG 2.2の達成基準1.4.2「音声の制御」は、利用者の操作なしに始まる音声が3秒を超えて続く場合に、音声を止める手段か、システム音量から独立した音量調整を求めるレベルAの基準です。
この記事では、要件の読み方からHTMLとJavaScriptによる実装、公開前の確認までを順に整理します。

達成基準1.4.2が求めること

対象は、ウェブページを開いたときなどに自動で始まり、3秒を超えて続く音声です。
該当する場合は、次のどちらかを利用者が操作できるようにします。

「3秒以内」は、音声ファイル名や実装者の想定ではなく、実際の音声が自動で止まるまでの時間で判断します。
3秒を超えるなら、停止操作か独立した音量調整が必要です。

再生のしかた 達成基準1.4.2での扱い 実装方針
利用者が再生を開始する 「3秒を超える自動再生」には該当しない 再生、停止、音量を操作できるプレーヤーを用意する
自動再生し、3秒以内に止まる この基準の十分な達成方法になり得る 音源の長さと実際の停止時刻を確認する
自動再生が3秒を超える 停止手段か独立した音量調整が必要 ページの先頭付近に、見つけやすい操作部品を置く

WCAG 2.2の全体像を先に確認すると、この達成基準が「知覚可能」の原則に含まれる理由もつかみやすくなります。

音声の自動再生が利用を妨げる理由

自動再生音声は、ページの内容を読むための音声と重なることがあります。
特に、画面上の文字や操作部品を音声で伝えるスクリーンリーダーを使う人は、読み上げを聞き取りにくくなります。

予期しない音は、集中を保つことが難しい人にも負担を与えます。
公共の場所や静かな環境では、利用者が慌てて端末全体の音量を下げなければならない場合もあります。

そのため、基準を満たす操作部品を置くだけでなく、可能なら音声を自動再生せず、利用者の操作で再生を始める設計を優先します。

自動再生を避ける実装

最も単純な方法は、autoplayを付けず、ブラウザー標準の操作部品を表示することです。
利用者が必要なときだけ再生できるため、ページを開いた直後の音声干渉を避けられます。

<audio controls preload="metadata">
  <source src="guide-audio.mp3" type="audio/mpeg">
  お使いのブラウザーは音声再生に対応していません。
</audio>

controlsを付けると、再生、一時停止、音量などの標準操作が表示されます。
採用前には、対象ブラウザーとキーボードで実際に操作できるかを確認します。

短い音声を3秒以内で止める実装

効果音などを自動再生する場合は、音声そのものが3秒以内に終了することを確認します。
次のHTMLは音声の長さを3秒に切り詰めるコードではないため、使用するファイルの実時間を別途確認する必要があります。

<audio autoplay>
  <source src="short-audio.mp3" type="audio/mpeg">
  お使いのブラウザーは音声再生に対応していません。
</audio>

ファイルを差し替えたときに長さが変わる可能性もあります。
公開前の確認項目に「自動再生音声が3秒以内に止まるか」を含めておくと、更新による見落としを減らせます。

長い自動再生に停止と音量を用意する実装

3秒を超える音声を自動再生する必要がある場合は、停止操作と音量調整の両方を用意すると、利用者が状況に合わせて選べます。
次の例では、再生状態に合わせてボタン名を更新し、ページ内の音量だけを0％から100％まで調整します。

<audio id="backgroundAudio" autoplay loop>
  <source src="background-audio.mp3" type="audio/mpeg">
  お使いのブラウザーは音声再生に対応していません。
</audio>

<button type="button" id="audioToggle">音声を一時停止</button>

<label for="volumeControl">音声の音量</label>
<input
  type="range"
  id="volumeControl"
  min="0"
  max="1"
  step="0.1"
  value="1"
>
<output id="volumeValue" for="volumeControl">100%</output>

<script>
  const audio = document.getElementById("backgroundAudio");
  const audioToggle = document.getElementById("audioToggle");
  const volumeControl = document.getElementById("volumeControl");
  const volumeValue = document.getElementById("volumeValue");

  function updatePlaybackLabel() {
    audioToggle.textContent = audio.paused
      ? "音声を再生"
      : "音声を一時停止";
  }

  function updateVolume() {
    const volume = Number(volumeControl.value);
    const percent = Math.round(volume * 100);

    audio.volume = volume;
    volumeValue.textContent = `${percent}%`;
    volumeControl.setAttribute("aria-valuetext", `${percent}%`);
  }

  audioToggle.addEventListener("click", async () => {
    if (audio.paused) {
      try {
        await audio.play();
      } catch {
        updatePlaybackLabel();
      }
    } else {
      audio.pause();
    }
  });

  audio.addEventListener("play", updatePlaybackLabel);
  audio.addEventListener("pause", updatePlaybackLabel);
  volumeControl.addEventListener("input", updateVolume);

  updatePlaybackLabel();
  updateVolume();
</script>

audio.pausedを参照しているため、ボタンの初期表示は実際の再生状態に追従します。
再生中は「音声を一時停止」、停止中は「音声を再生」と表示され、操作の結果がラベルから分かります。

音量スライダーにはlabelを関連付け、現在値を百分率でも表示しています。
最小値を0にすることで、端末やスクリーンリーダーの音量を変えずに、この音声だけを消せます。

操作部品は音声が始まる位置の近く、できればページの先頭付近に置きます。
音声が読み上げを妨げている状態で、利用者に長い本文を移動させてから停止ボタンを探させる設計は避けます。

よくある失敗と直し方

音声ファイル名だけで3秒以内と判断する

short-audio.mp3という名前でも、実際の再生時間は分かりません。
音源を再生して、ページ上の音が3秒以内に止まることを確認します。

システム音量の操作を利用者に委ねる

「音が大きい場合は端末の音量を下げてください」という案内だけでは、ページの音声とスクリーンリーダーなどの音声を分けて調整できません。
ページ内の音声を停止するか、その音声専用の音量調整を提供します。

ボタン名と再生状態が一致しない

初期表示を常に「一時停止」にすると、音声が停止している場合にも同じ表示が残ります。
playイベントとpauseイベントでラベルを更新し、現在できる操作を示します。

停止操作をページの後半に置く

停止操作が見つかるまで音声が続けば、操作部品を探すこと自体が難しくなります。
停止ボタンは読み順とタブ順の早い位置に置き、分かりやすい名前を付けます。

公開前の確認チェックリスト

自動再生を含むページ全体の設計を点検するときは、音声の自動再生を避けるWebアクセシビリティ設計の確認項目も参考になります。

利用者が音声を選べるページにする

達成基準1.4.2への対応は、3秒という時間だけを確認して終わる作業ではありません。
自動再生を避けられるなら利用者の操作で開始し、自動再生が必要なら、すぐ見つけられる停止操作か独立した音量調整を用意します。

実装後は、マウスだけでなくキーボードでも操作し、音声と操作ラベルの状態が一致しているかを確認します。
この確認まで含めることで、スクリーンリーダーの読み上げや利用者の集中を妨げにくいページになります。

当社では、ウェブアクセシビリティを導入しやすくするUUU ウェブアクセシビリティを提供しています。
アクセシビリティ改善を検討している方は、サービスの詳細をご覧ください。

モバイルバージョンを終了