この記事でわかること

  • 自動で流れる音について定めた、WCAGの達成基準1.4.2の内容
  • 画面の読み上げを使う人にとって、自動で流れる音が困る理由
  • 音は押したときだけ流し、止めるボタンと音量の部品を先頭近くに置く書き方
  • 自動で流す版・先頭に止めるボタンを置いた版と、ブラウザで比べた結果

教室の紹介ページを開いたとたんに、案内のナレーションが流れ出す。画面の読み上げを使っている人には、読み上げの声とナレーションが重なって、どちらも聞き取りにくくなります。止めるボタンを探そうにも、その案内の声が聞こえません。この記事では、自動で流れる音を止められるようにする方法を、WCAG 2.2の達成基準1.4.2を軸に整理します。

当たった資料は、W3Cの達成基準1.4.2の解説(Understanding)と、技法G60・G170・G171、失敗例F23・F93で、どれも2026年11月1日に原文で確かめました。教室のページも案内の音も、この記事のために用意した見本で、道具や講座の宣伝は含みません。

先に結論: 音は押したときだけ流し、止めるボタンを先頭近くに置く

音は、利用者がボタンを押したときだけ流します。 どうしても自動で流すなら、3秒以内で止めるか、止めるボタンと音量の部品をページの先頭近くに置きます。止める手段は、パソコン全体の音量とは別に用意します。

作り方 基準との関係
押したときだけ流す 自動で流れないので、問題にならない
自動で流し、3秒以内に止まる 対象外。ただし自動で流すことはすすめられない
自動で流し、先頭近くに止めるボタン 満たせる
自動で3秒を超えて流し、止める手段なし 失敗例F23・F93に当たる

自動で流れる音に関わる基準(1.4.2)

WCAG 2.2の達成基準1.4.2(レベルA)は、ページの音が自動で3秒を超えて流れるなら、その音を一時停止または停止する手段か、パソコン全体の音量とは別に音量を変える手段を用意することを求めています。

解説では、画面の読み上げソフトを使う人は、ほかの音が同時に流れていると、読み上げの声を聞き取りにくいとしています。読み上げの声が、ページの音と同じ音量の調整で操作される場合は、なおさらです。音量の調整には、0まで下げられることも含みます。

この基準を満たさない内容は、ページ全体の使い勝手を妨げるため、ほかの基準のために使っているかどうかにかかわらず、ページのすべての内容がこの基準を満たす必要があります。

自動で流すより、押したときに流す

解説では、ページを開いたときに音が自動で流れると、読み上げの声を頼りに操作する人は、止めるための仕組みを見つけにくくなるとしています。そのため、自動で音を流すこと(特に3秒を超えるもの)をすすめず、ページに来た後で利用者が始める操作で音を流すことをすすめています。

ここでいう「自動で」は、利用者が意図して操作した結果として始まったものではない音を広く指します。音が流れると分かる名前のボタンを押して始まる音は、利用者の操作に応えたものです。

技法G171は、利用者が求めたときだけ音を流す方法です。技法G170は、ページを開いたときに自動で流れる音を止めるボタンを、ページの先頭近くに置く方法です。G170では、そのボタンはキーボードで操作でき、Tabキーや読み上げの順の早い位置にあり、音を止めると分かる名前を付けるとしています。

書き方の例: 押したときだけ流し、止める・音量を変える部品を先頭に置く

次のHTMLは、ページの先頭近くに置く、案内の音声の部品の例です。音は自動では流さず、ボタンを押したときに流し、もう一度押すと止まります。音量の部品で0まで下げられます。

<!-- ページの先頭近くに置く。音は押したときだけ流す -->
<div class="sound-control">
  <button type="button" id="sound-toggle">案内の音声を流す</button>
  <label for="sound-volume">音量</label>
  <input type="range" id="sound-volume" min="0" max="1" step="0.1" value="0.5">
</div>
<audio id="guide" src="guide.mp3" preload="none"></audio>

<script>
  const guide = document.getElementById("guide");
  const toggle = document.getElementById("sound-toggle");
  toggle.addEventListener("click", () => {
    if (guide.paused) { guide.play(); } else { guide.pause(); }
  });
  // ボタンの名前で、いま押すと何が起きるかを伝える
  guide.addEventListener("play", () => { toggle.textContent = "案内の音声を止める"; });
  guide.addEventListener("pause", () => { toggle.textContent = "案内の音声を流す"; });
  document.getElementById("sound-volume").addEventListener("input", (e) => {
    guide.volume = Number(e.target.value);   // 0 で音が出なくなる
  });
</script>

audio要素にautoplayを付けないことが要点です。失敗例F93は、音のあるaudioやvideoの要素にautoplayがあり、mutedがなく、止める手段も用意されていない作りを失敗としています。

手順: 自分のページで、自動で流れる音を確かめる

  1. 何もせずに開く: ページを開いて操作をせずに待ち、3秒を超える音が流れないかを聞きます
  2. autoplayを探す: HTMLのaudioやvideoの要素に、autoplayが付いていないかを見ます
  3. 止めるボタンを探す: 音が自動で流れるなら、ページの先頭近くに止めるボタンがあるかを見ます
  4. キーボードで止める: Tabキーでボタンを選び、EnterキーやSpaceキーで止められるかを試します
  5. 自動で流さない形に直す: できれば、autoplayを外し、押したときに流すボタンに置きかえます

試した結果

上のHTMLと、同じ音を<audio autoplay>で流す版、autoplayで流しつつ先頭に止めるボタンを置いた版を作りました。音は架空の5秒の音です。手元のPCの中だけで動く小さな配信の仕組みからページを出し、Chromeで開いて、再生が始まるか・止まるかを順に調べました。音そのものは出さない設定にして、再生の位置が進むかで判断しました。

  • 上のHTMLでは、開いてから4秒たっても音は流れていませんでした。Tabキーを1回押すと「案内の音声を流す」のボタンに移り、Enterキーで再生が始まり、ボタンの名前は「案内の音声を止める」に変わりました
  • 音量の部品を0にすると、音の音量は0になりました。もう一度ボタンを押すと、再生は止まりました
  • autoplayの版は、Chromeを初期の設定のまま開いたときは、再生が始まりませんでした。自動の再生を許す設定で開くと再生が始まり、4秒後も流れ続けました。この版には、Tabキーで選べる部品が1つもありませんでした
  • 先頭に止めるボタンを置いた版は、自動の再生を許す設定で開くと流れ始め、Tabキーを1回押すと止めるボタンに移り、Enterキーで止まりました

作業用のMacで、画面を表示しない形のChrome 156を使いました。読み上げソフトでの確認はしておらず、確かめたのは再生の状態とキーボードの操作です。

自分で直すか、相談するかの判断

目安は、「音を流しているのが、自分で書いたaudioやvideoの要素か」です。それなら、autoplayを外して押したときに流すボタンを置くか、先頭近くに止めるボタンを足せば直せます。

埋め込んだ動画の部品や広告など、自分では書きかえられない所から音が出ている場合は、自動で流さない設定があるかを先に調べます。なければ、その部品の提供元か、制作を任せた人に、音を止める方法を尋ねます。音の扱いを自分で直せるようになりたいときは、Webデザインの講座で講師に実際のページを見せて相談するやり方もあります。

つまずきやすいところ

まとめ

  • 自動で3秒を超えて流れる音には、止める手段か、パソコン全体とは別の音量の手段を用意します
  • いちばん確実なのは、音を押したときだけ流すことです
  • 自動で流すなら、止めるボタンをページの先頭近くに置き、キーボードで操作できるようにします
  • ページを開いて何もせずに待ち、3秒を超える音が流れないかを確かめます