WCAG 1.4.2: 音声の制御

このルールの意味

WCAG 1.4.2「音声の制御」は、知覚可能（Perceivable）という原則の下にあるレベルAの達成基準です。内容は次のとおりです。ウェブページ上の音声が、ユーザーの操作なしに自動的に3秒を超えて再生される場合、音声を一時停止または停止するためのメカニズム、またはシステム全体の音量レベルとは独立して音声の音量を制御するためのメカニズムのいずれかを提供しなければならない。

この基準は、ユーザーの明示的な操作なしに再生が始まり、3秒を超えて継続するあらゆる音声コンテンツによって発動されます。これには、ページに埋め込まれたBGM、自動再生される音声付き動画、音声広告、ループする効果音、ページ読み込み時に再生される音声によるイントロなどが含まれます。重要なフレーズは自動的にであり、ユーザーが意図的に開始した音声（再生ボタンのクリック、リンクの起動など）はこのルールの対象外です。

この基準に適合するには、少なくとも次のいずれかを満たす必要があります。

• ユーザーに、音声を完全に停止するか、ユーザーが再開するまで一時停止できる一時停止または停止のコントロールが提供されている。
• ユーザーに、OSのマスターボリュームとは独立した音量コントロールが提供されており、他のアプリケーションやシステム音に影響を与えることなく、その音声だけを小さくしたりミュートしたりできる。

ページ上部にのみ表示され、キーボード操作が可能なメカニズムでも許容されますが、音声が妨げになる前に到達・操作できなければなりません。ベストプラクティスとしては、キーボードユーザーやスクリーンリーダーユーザーがすぐに見つけられるよう、フォーカス順序の最初のインタラクティブ要素としてコントロールを配置することが強く推奨されます。

WCAGで定義されている唯一の公式な例外は、3秒以下の音声です。短い通知音や、自然に止まる短いチャイムなどは対象外です。音量が小さい音声、ループ再生される音声、サードパーティウィジェットに埋め込まれた音声についての例外はありません。これらはすべて、自動再生され、3秒を超える場合はこのルールの対象となります。

なぜ重要か

制御できない自動再生音声は、複数の障害当事者にとって重大なバリアとなるだけでなく、静かな場所や共有スペースで利用している非障害者にとっても摩擦を生みます。

スクリーンリーダーユーザーは最も深刻な影響を受けるグループです。JAWS、NVDA、VoiceOverといったスクリーンリーダーは、ページ内容を伝えるために合成音声を出力します。ウェブページが同時にBGMや動画のサウンドトラックを再生すると、2つの音声ストリームが重なります。スクリーンリーダーの音声は聞き取りにくく、あるいはまったく理解できなくなり、ユーザーは停止コントロールを見つけて作動させるまで実質的にページから締め出されます。しかし、騒音のせいでスクリーンリーダーがページを読み上げられないため、そのコントロールを簡単には見つけられません。世界保健機関（WHO）によると、世界で約22億人が何らかの視覚障害を抱えており、その相当数が主な閲覧手段としてスクリーンリーダーに依存しています。

認知・注意に関する障害のあるユーザー（ADHD、自閉スペクトラム症、不安障害などを含む）は、不意の音声を極めて混乱させるもの、あるいは苦痛なものと感じる場合があります。突然の音楽や音声の開始は、集中を途切れさせたり、感覚過負荷を引き起こしたり、その音がページ内容の一部なのか外部通知なのかについて混乱を招いたりします。

聴覚情報処理障害のあるユーザーや補聴器を使用しているユーザーは、予期しない音量で音声が補聴機器から再生されると、ハウリングや増幅された歪みを経験することがあります。独立した音量コントロールがあれば、他のアプリケーションに影響するシステム全体の設定を変えずに、自分の聴取環境を調整できます。

運動障害のあるユーザーで、キーボードやスイッチアクセスで操作している人にとっては、停止／一時停止コントロールがキーボードで到達可能であり、ページ構造の早い位置に論理的に配置されている必要があります。コントロールがマウスでしかクリックできなかったり、タブ順の後ろの方に埋もれていたりすると、そこに到達するまでの間に実質的な救済を提供できません。

具体的なシナリオを考えてみましょう。ある視覚障害のある求職者が、企業の採用ページを訪れます。そのページでは、アップテンポな音楽付きのプロモーション動画が自動再生されます。ユーザーがスクリーンリーダーを起動すると、すぐにページタイトルやナビゲーションの読み上げが始まりますが、音楽が合成音声を完全にかき消してしまいます。停止ボタンは、キーボードフォーカスのないスタイル付きの<div>で、ページ中央の動画プレーヤー内に視覚的に配置されています。ユーザーはキーボードでそこに到達できず、スクリーンリーダーの音声もよく聞こえないため効率的にナビゲートできず、最終的にページを離脱します。企業は有能な候補者を失い、法的リスクにも直面します。

ユーザビリティとSEOの観点からも、自動再生音声のあるページは直帰率が高くなる傾向があります。多くのユーザー（障害の有無にかかわらず）は、予期しない音が鳴り始めるとすぐにタブを閉じてしまうからです。検索エンジンは高い直帰率を品質の低さを示すシグナルとして解釈し、結果的に検索での発見性を損ないます。

関連する axe-core のルール

WCAG 1.4.2は手動テストを必要とします。この達成基準に直接対応するaxe-coreの自動ルールは存在しません。自動ツールがこの違反を検出できない理由は、ブラウザとJavaScriptの仕組みに根本的に関係しています。

• 動的な音声の開始: 音声は、JavaScriptのタイマー、イベントリスナー、初期DOM解析後に実行されるサードパーティスクリプトなどによってトリガーされる場合があります。静的なDOMを検査する自動スキャナでは、音声が自動再生されるかどうか、その再生時間、特定の音声ソースにコントロールが機能的に結びついているかどうかを確実に判断できません。
• コントロールの存在と操作性: 音量スライダーや一時停止ボタンがDOM上に存在していても、機能していなかったり、画面外に隠されていたり、キーボードユーザーにはアクセスできない場合があります。自動ツールは要素の存在を検出できますが、それを作動させたときに実際に音声が止まるかどうかを、インタラクションを実行して結果を「聞く」ことなしに検証することはできません。これは人間の聴覚による判断を要するタスクです。
• 時間の閾値: 音声が3秒を超えて再生されるかどうかを判断するには、ページ読み込み中の時間ベースの評価が必要であり、これは静的なDOM解析ツールや、単なるランタイムDOM解析ツールの範囲外です。
• サードパーティの埋め込み: iframe、サードパーティSDK、広告ネットワークを通じて埋め込まれた音声は、テストツールのJavaScriptサンドボックスからは検査できない場合があり、プログラム的な検出が不可能です。

これらの制約があるため、監査者は実際にページを訪問し、自動再生音声がないかを聞き取り、停止／一時停止／音量コントロールが存在し、キーボードで到達可能であり、正しく機能するかを手動で確認する必要があります。

テスト方法

1. 自動プレスキャン: ページに対して axe DevTools や Google Lighthouse を実行します。これらのツールはいずれも1.4.2の違反を直接フラグ付けすることはありませんが、コントロールへのキーボードフォーカスの欠如、アクセシブルでないメディアプレーヤー要素、カスタム音声ウィジェットのARIAラベル不足など、関連する問題を表面化させます。手動テストを始める前にこれらを解決し、別の問題と混同しないようにします。
2. 手動による音声検出: スピーカーまたはヘッドフォンを有効にした状態でページを読み込みます。ユーザー操作なしに、最初の数秒以内に音声が再生され始めるかどうかを確認します。もし再生される場合は、タイマーを使って3秒を超えて再生されるかを確認します。ホームページ、ランディングページ、商品ページ、メディア埋め込みや広告枠があると分かっているページなど、主要なページタイプをすべて確認します。
3. 停止／一時停止／音量コントロールの位置特定: マウスを使わず、ページ読み込み直後にTabキーを押します。音声コントロールに到達するまでに何回タブ移動が必要か数えます。コントロールに可視のフォーカスインジケータが表示されることを確認します。EnterまたはSpaceを押してコントロールを作動させ、音声が停止するか、音量を独立して調整できることを確認します。
4. NVDA と Firefox を用いたスクリーンリーダーテスト: NVDAを起動し、Firefoxを開いてページに移動します。音声が再生されるのを許可します。NVDAの読み上げコマンド（矢印キー、仮想カーソル）を使って音声コントロールを探し、作動させてみます。NVDAがコントロールのロールとラベル（例：「Pause audio, button」）を正しくアナウンスし、それを作動させると競合する音声が静まることを確認します。
5. VoiceOver と Safari（macOS/iOS）を用いたスクリーンリーダーテスト: Command + F5でVoiceOverを有効にします。ページに移動し、スワイプまたは矢印キーで音声コントロールを探します。VoiceOverが意味のあるラベルを読み上げ、コントロールが期待どおりに動作することを確認します。iOSでは、自動再生の挙動についてもテストします。モバイルブラウザは音声の権限を異なる方法で扱うためです。
6. JAWS と Chrome を用いたスクリーンリーダーテスト: JAWSを有効にした状態で、Chromeでページを読み込みます。Tabキーと、JAWSのフォームコントロール一覧（Insert + F5）を使ってインタラクティブ要素を探します。音声コントロールが一覧に現れ、操作可能であることを確認します。
7. サードパーティコンテンツの確認: ページにソーシャルメディア動画、広告ユニット、iframeコンテンツが埋め込まれている場合、可能であればそれらを個別に読み込み、同様に適合しているか、あるいはホストページ側で上書き用のコントロールを提供しているかを確認します。
8. 音量の独立性の確認: ページが一時停止／停止コントロールではなく音量コントロールを提供している場合、そのページの音量コントロールを操作してもOSのマスターボリュームが変化しないことを確認します。別のアプリケーション（ローカルのメディアプレーヤーなど）を開き、ページ側のコントロールを操作した後も、そのアプリケーションの音量が影響を受けていないことを確かめます。

修正方法

自動再生される背景音声にコントロールがない — 不適切

<!-- Audio starts automatically with no visible or keyboard-accessible control -->
<audio src='background-music.mp3' autoplay loop></audio>

自動再生される背景音声にアクセシブルな一時停止コントロールがある — 適切

<!-- Control is the first focusable element, announced properly by screen readers -->
<button id='audio-toggle' aria-label='Pause background music' aria-pressed='true' onclick='toggleAudio()'>
  Pause Music
</button>

<audio id='bg-audio' src='background-music.mp3' autoplay loop></audio>

<script>
  function toggleAudio() {
    var audio = document.getElementById('bg-audio');
    var btn = document.getElementById('audio-toggle');
    if (audio.paused) {
      audio.play();
      btn.setAttribute('aria-pressed', 'true');
      btn.setAttribute('aria-label', 'Pause background music');
      btn.textContent = 'Pause Music';
    } else {
      audio.pause();
      btn.setAttribute('aria-pressed', 'false');
      btn.setAttribute('aria-label', 'Play background music');
      btn.textContent = 'Play Music';
    }
  }
</script>

<!-- The native <button> element is keyboard-accessible by default.
     aria-pressed communicates toggle state to screen readers.
     aria-label updates dynamically to reflect current action. -->

サウンドトラック付き動画が自動再生され、キーボード操作可能な停止コントロールがない — 不適切

<!-- The video autoplays with sound; the only stop control is a mouse-only overlay -->
<div class='hero-video-wrapper'>
  <video src='promo.mp4' autoplay loop></video>
  <div class='stop-btn' onclick='stopVideo()'>Stop</div>
</div>
<!-- Problem: <div> is not keyboard-focusable and has no role or label -->

サウンドトラック付き動画が自動再生され、アクセシブルな停止コントロールがある — 適切

<div class='hero-video-wrapper'>
  <!-- Stop control appears first in DOM and focus order -->
  <button
    id='video-stop-btn'
    aria-label='Stop promotional video'
    onclick='stopVideo()'
  >
    Stop Video
  </button>

  <video id='promo-video' src='promo.mp4' autoplay loop muted='false'></video>
</div>

<script>
  function stopVideo() {
    var video = document.getElementById('promo-video');
    var btn = document.getElementById('video-stop-btn');
    video.pause();
    video.currentTime = 0;
    btn.disabled = true;
    btn.textContent = 'Video Stopped';
  }
</script>

<!-- Using a native <button> ensures keyboard access without additional ARIA.
     Placing the button before the video in DOM order puts it early in tab sequence. -->

サードパーティの埋め込み音声ウィジェットに独立した音量コントロールを提供 — 適切

<!-- When a third-party widget auto-plays, provide a host-level mute control -->
<button
  id='mute-widget-audio'
  aria-label='Mute podcast player'
  aria-pressed='false'
  onclick='muteWidget()'
>
  Mute Podcast
</button>

<iframe
  id='podcast-frame'
  src='https://embed.example.com/podcast/ep42?autoplay=1'
  title='Episode 42: Web Accessibility Deep Dive'
  allow='autoplay'
></iframe>

<script>
  function muteWidget() {
    <!-- postMessage API used to communicate with cross-origin iframe player -->
    var frame = document.getElementById('podcast-frame');
    var btn = document.getElementById('mute-widget-audio');
    var isMuted = btn.getAttribute('aria-pressed') === 'true';
    frame.contentWindow.postMessage({ action: isMuted ? 'unmute' : 'mute' }, 'https://embed.example.com');
    btn.setAttribute('aria-pressed', String(!isMuted));
    btn.setAttribute('aria-label', isMuted ? 'Mute podcast player' : 'Unmute podcast player');
  }
</script>

<!-- Note: host-level volume/mute control satisfies 1.4.2 when
     the iframe player's own controls may be inaccessible. -->

よくある間違い

• 音声停止ボタンとして<div>や<span>を使用しながら、tabindex='0'、role='button'、キーボードイベントハンドラを追加しない。このような要素はキーボードナビゲーションやスクリーンリーダーからは見えないため、最も必要としているユーザーにとってコントロールが役に立ちません。
• DOM上でメインコンテンツの後ろに音声コントロールを配置する。その結果、キーボードユーザーはコントロールに到達するまでに数十のリンクやフォームフィールドをタブ移動しなければならず、その頃には音声が1分以上再生されていることもあります。コントロールはページ上で1番目または2番目のフォーカス可能要素であるべきです。
• HTMLのmuted属性で音声をデフォルトでミュートし、それを適合とみなす。ミュートされた自動再生音声要素は、ユーザーが操作できるコントロールではありません。ユーザーは音声の存在を知ることも、自分の好みの音量を選ぶこともできません。
• 音量スライダーでwindow.AudioContext.destination.gainを呼び出し、システムの音声レベルを変更してしまう。特定のメディア要素の.volumeプロパティだけを調整するのではなくシステム音量を変えてしまうため、独立性の要件に反します。
• モバイルブラウザは自動再生をブロックするはずだと想定し、コントロールを用意しない。多くのモバイルブラウザは、音声がvideo要素に埋め込まれている場合や、ユーザーが以前にそのドメインとやり取りしている場合には自動再生を許可します。ブラウザの挙動を想定するのではなく、常にコントロールを実装してください。
• ボタンの状態が変化したときにアクセシブルネームを更新しない。一時停止していた音声を再開するボタンが、ラベルとして依然「Pause」となっている場合、aria-labelを「Play」に更新すべきです。そうしないと、スクリーンリーダーユーザーは誤ったアナウンスを聞き、意図しない操作をしてしまう可能性があります。
• ブラウザのネイティブメディアコントロール（controls属性）だけに頼り、自動再生音声が侵襲的になる前にそれらが表示されるかを確認しない。ネイティブコントロールはメディア要素の下にレンダリングされるため、折りたたみ位置より下にある場合、重大な妨害が起きる前にキーボードで到達できないことがあります。
• 広告ネットワークから配信される音声付き広告についてテストを行わない。ページ読み込み後に動的に挿入される広告枠もページ体験の一部であり、1.4.2の対象です。広告ネットワーク側で適合が保証できない場合は、ページ全体のミュートコントロールを提供してください。
• 3秒の例外を抜け道とみなし、連続した音声トラックを3秒未満のセグメントに分割する。WCAGの意図は明確です。技術的にどのように分割されていようと、連続して再生される、あるいはループする音声はこの達成基準の対象です。
• 音声コントロールに可視のフォーカスインジケータを提供しない。コントロールがキーボードで到達可能であっても、フォーカスリングがなければ視覚的にページを利用しているキーボードユーザーはそれを見つけられません。これはこの達成基準のユーザビリティ上の意図だけでなく、WCAG 2.4.7（フォーカスの可視化）にも反します。

トルコのアクセシビリティ規制との関係

トルコの大統領通達 2025/10は、2025年6月21日付官報第32933号で公布され、トルコで事業を行う幅広い公的・民間主体に対し、WCAG 2.2に整合したウェブアクセシビリティ要件を義務付けています。WCAG 1.4.2「音声の制御」はレベルAの達成基準であり、最も基礎的な要件層に位置づけられます。レベルA基準に適合しないことは、この通達におけるベースラインの不適合を意味します。

通達では、適合期限が次のように定められています。公的機関は、通達の公布日から1年以内にレベルAの完全な適合を達成しなければならず、規制の対象となる民間事業者には2年の猶予が与えられています。

大統領通達で明示的に対象とされている主体は、以下のとおりであり、したがってWCAG 1.4.2を満たす義務があります。

• あらゆるレベルの公的機関・政府機関（省庁、自治体、国民が利用するデジタルサービスを提供する国関連機関を含む）。
• トルコで事業を行うEコマースプラットフォーム（マーケットプレイス運営者およびD2C型オンライン小売業者を含む）。
• トルコの銀行法に基づき規制される銀行・金融機関（オンラインバンキングポータル、モバイルウェブインターフェース、デジタル商品ページを含む）。
• 病院および医療提供者（民間病院グループおよび、患者が予約、記録へのアクセス、健康情報の取得を行う公的ヘルスポータルを含む）。
• 20万件以上の加入者を有する通信事業者（顧客向けウェブサイト、セルフサービスポータル、プロモーションページを含め、これらは適合しなければならない）。
• トルコの消費者にサービスを提供する旅行代理店およびオンライン旅行プラットフォーム（予約エンジンや目的地情報ページを含む）。
• オンラインで乗車券販売や旅客情報サービスを提供する民間交通事業者。
• 国民教育省（MoNE）に認可された私立学校（入学ポータル、学習管理システム、情報提供用ウェブサイトを含む）。

これらすべての主体にとって、銀行のホームページ上のプロモーション動画、Eコマースの商品ページの背景サウンドトラック、政府ポータルに埋め込まれたニュースクリップなど、いかなるページであっても、アクセシブルでキーボード到達可能な一時停止または音量コントロールを提供せずに音声を自動再生することは、WCAG 1.4.2と大統領通達 2025/10 による義務の双方に対する直接の違反となります。対象となる主体は、規制上の指摘を回避し、すべてのユーザーに公平なサービスを提供するため、自動再生メディアの有無についてすべてのページテンプレートを監査し、適用期限より十分前に適合するコントロールを実装することが強く推奨されます。