トピックを検索
止められない自動再生の音声
トップの動画が音声付きで自動再生され、ページには一時停止や消音の操作がありません。
<video src="our-story.mp4" autoplay loop> 問題
スクリーンリーダー利用者は、動画の音で読み上げが聞こえず、音を止める方法を見つけられません。
コーヒー焙煎店のトップページを開くと、焙煎したコーヒー豆が落ちる短いバナー動画が始まります。動画は自動で再生され、繰り返し流れ、音楽が聞こえます。動画にはコントロールがなく、ページのほかの場所にも一時停止や消音のボタンがありません。
達成基準1.4.2では、自動で流れる音は、3秒以内に止まるか、一時停止・停止できるか、システムの音量とは別に音量を下げられる必要があります。この動画には autoplay 属性があり、muted 属性も controls 属性も、独自のボタンもありません。そのため、ページを開いている間、音が流れ続けます。
静かなオフィスや図書館、電車の中にいる人も困ります。音の出どころを探すより、タブを閉じてしまうことがよくあります。
10グループ中3グループに影響
- 全盲 （影響あり）
- 弱視 （影響なし）
- 色覚 （影響なし）
- ろう （影響なし）
- 難聴 （影響あり）
- 発話 （影響なし）
- 手の操作 （影響なし）
- 届く範囲・力 （影響なし）
- 認知 （影響あり）
- 光過敏 （影響なし）
- 視覚を使わない 動画の音がスクリーンリーダーの読み上げに重なり、ページの内容も、音を止めるボタンも聞き取れません。パソコンの音量を下げると、読み上げも聞こえなくなります。
- 聴覚が限られる 聴力が一部残っている人は、読み上げや人の声に別の音が重なると、どちらも聞き取りにくくなります。補聴器は、動画の音もほかの音と一緒に大きくします。
- 言語・認知・学習の能力が限られる 勝手に始まる音は、ページから注意をそらします。音で気が散りやすい人や、音に圧倒されやすい人は、音が止まるまで落ち着いて読めません。
ブラウザーは、初めて訪れたページで自動的に音を流すことをブロックします。そのため、新しいブラウザーにアドレスを貼り付けて確認するテスターにも、ヘッドレスの自動チェックにも、音は聞こえません。一方Chromeは、訪問者がそのサイトで何かをクリックした後なら音を許可します。サイトの別ページから来た人には、すぐに動画の音が聞こえます。axeは、muted も controls もない autoplay を指摘しますが、人が確認すべき項目としてだけです。スクリプトが play() で始めた音は検出しません。AIによる修正では muted を加えて一時停止のボタンを省くことが多く、音は消えても、誰も一時停止できない動画が繰り返し流れます。
試してみる
短い動画を再生し、キーボードで止めてみてください。
「音付きで試す」は、動画が音付きで勝手に始まる場面の代わりです。このページは自動で音を流しません。押した後、Tabでページ内を移動し、読み上げプレビューを確認してください。修正を適用すると、動画のボタンが使えます。
問題あり 修正できますか？
読み上げプレビュー（シミュレーション）
Tabでリンクやボタンへ移動してください。
再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。
修正方法
音は利用者が始めるものにします。動画は再生ボタンを待つか、音を出すボタンを付けて消音で始めます。
- 1訪問者が始めた音以外は、3秒を超えて流さない。
- 2音はページ内の操作で止められるようにし、システムの音量を下げさせない。
- 3自動再生する動画には、HTMLに
muted属性を書く。
<section class="hero"> <video src="our-story.mp4" autoplay loop playsinline></video> <h1>少量ずつ、ていねいに焙煎</h1></section>再生ボタンが押されるまで待つ
<section class="hero"> <video id="film" src="our-story.mp4" poster="our-story.jpg" loop playsinline aria-hidden="true"></video> <h1>少量ずつ、ていねいに焙煎</h1> <button type="button" id="play" class="film-button"> <svg aria-hidden="true" focusable="false"><use href="#icon-play"></use></svg> <span class="visually-hidden">動画を再生</span> </button></section><script> const film = document.getElementById('film'); const play = document.getElementById('play'); // アイコンと、見えない名前を一緒に切り替えます。 const set = (button, icon, name) => { button.querySelector('use').setAttribute('href', icon); button.querySelector('.visually-hidden').textContent = name; }; play.addEventListener('click', () => (film.paused ? film.play() : film.pause())); const show = () => set(play, film.paused ? '#icon-play' : '#icon-pause', film.paused ? '動画を再生' : '動画を一時停止'); ['play', 'pause'].forEach((type) => film.addEventListener(type, show));</script>ブラウザーが許可すれば、動画は音声付きで始まり、繰り返し流れます。コントロールもほかのボタンもないため、音を止めるには、ページを離れるか、スクリーンリーダーごとパソコン全体の音量を下げるしかありません。
autoplay がないため、再生ボタンが押されるまで何も流れず、ページは静かに開きます。それまでは、ポスター画像がトップの見た目を保ちます。ボタンは本物の <button> のためキーボードで操作でき、再生が始まれば、同じボタンで一時停止できます。アイコンと見えない名前は動画の実際の状態から決めるため、再生に失敗しても食い違いません。
どちらも1.4.2を満たします。再生ボタンを待つ方法は、失うものがなく、誰にとっても静かです。動画の目的が内容を伝えることにある場合や、動画がなくてもページの見た目が成り立つ場合に選びます。消音で始める方法は、デザインの前提である動く映像を残せます。失うのは訪問直後の音だけで、それも多くのブラウザーではもともとブロックされます。動画が動く背景である場合に選びます。
トップの動画で、ブラウザーのコントロールバーを表示することはまれなため、サンプルのコードでは動画に専用の丸いアイコンボタンを付けています。本物の <button> 要素なのでARIAのロールは要らず、次の条件をすべて満たせば、画面上はアイコンだけで構いません。
- 名前がコードにある：「動画を一時停止」のような見えないテキストか
aria-labelで名前を付け、アイコンにはaria-hidden="true"を付ける。見えないテキストはブラウザーの翻訳機能で訳されるが、aria-labelは訳されないことがある。 - アイコンと背景のコントラストが3:1以上ある（1.4.11）。動く映像の上では、白いアイコンの下に暗い円を敷く。ここでは
.film-buttonがそれにあたり、.visually-hiddenは一般的な視覚的に隠すクラスを表す。 - ボタンが24×24ピクセル以上ある（2.5.8）。動画の上に浮かぶ操作では44ピクセルがよく使われる。
- フォーカス表示が動画の上でも見える。
- アイコンと名前を一緒に切り替える：一時停止のアイコンには「動画を一時停止」、再生のアイコンには「動画を再生」。
再生、一時停止、スピーカーのアイコンは、文字なしでも伝わるほど一般的です。ホバーとフォーカスで出るツールチップは任意で、付ける場合は1.4.13（ホバーまたはフォーカスで表示されるコンテンツ）を満たす必要があります。押すと名前が変わるボタンは、すべてのスクリーンリーダーが読み上げ直すわけではありません。利用者が使うスクリーンリーダーで確認してください。
標準の controls でも基準は満たせます。商品紹介の動画のように、腰を据えて見る動画には標準のコントロールが適しています。字幕のメニューも付いてくるため、話し声のある動画を独自のボタンで操作する場合は、字幕を表示する手段を自分で用意する必要があります。
雰囲気づくりのためだけのバナー動画は、映っている内容を読み上げる必要はありません。そのためサンプルでは aria-hidden="true" で動画を隠し、何を操作するかはボタンに伝えさせています。ただし、それは動画自体にコントロールがない場合だけです。<video controls> に付けると、フォーカスできるボタンまで隠してしまうため、代わりに aria-label="バナー動画" のような短い名前を付けます。どちらの場合も、スクリーンリーダーから隠しても音は止まりません。メディアが再生を始めてもスクリーンリーダーは何も知らせないため、音楽はそのまま読み上げに重なります。
三つ目の方法として、音を自動で流し、ページの先頭に「音を消す」ボタンを置く方法（達成方法G170）も、形の上では1.4.2を満たします。ただし、これを前提に計画すべきではありません。次の三つの点で不十分です。
- ブラウザーは初めての訪問で、この方法が守ろうとする音そのものをブロックするため、意図どおりに動くことはまれです。
- スクリーンリーダー利用者は、音楽が読み上げに重なる中でボタンを探す必要があります。
- ボタンが先頭にある間しか満たせないため、後からCookieバナーやスキップリンクを加えると、気づかないうちに崩れます。
どうしても音を自動で流す必要がある場合は、そのボタンを先頭に置き、アイコンだけでなく文字で示してください。
3秒以内に終わる音には、操作は必要ありません。短い効果音が問題にならないのはそのためです。ただし、長いBGMの抜け道にはなりません。3秒に切り詰めるほうが、再生ボタンを加えるより内容を大きく変えてしまいます。
ページ内の音量スライダーも、そのページの音だけを変えるものなら、音を調整する手段として認められます。システムの音量は、スクリーンリーダーの音量も一緒に変えるため、認められません。
自動で流れる音は、autoplay 付きの video タグだけから来るとは限りません。次のものも1.4.2の「自動的に再生される」音にあたり、同じ方法で直せます。
- ブランドサイトや飲食店のサイトによくあるBGMプレーヤー：最初は止めておき、ラベルの付いたボタンで再生できるようにする。
- アドレスで自動再生をオンにしたYouTubeやVimeoの埋め込みプレーヤー：消音のオプションもオンにし、コントロールを表示したままにする。
- ページ内のどこかを最初にクリックしたときに
play()を呼ぶスクリプト：そのクリックはメニューを開くためやリンクをたどるためのもので、音を求めたものではない。
フレームワークによっては、muted を属性として書かず、読み込み後にプロパティとして設定するものがあります。配信されるHTMLに属性があるかを確認し、ブラウザーで最初のフレームから音が出ないことも確認してください。
どの方法を選んでも、話し声のある動画には字幕が必要です。独自のボタンで操作する場合は、字幕を表示する手段も必要です。このバナーは音楽だけのため、サンプルでは字幕を省いています。
AI コーディングアシスタントで修正しますか？ このガイドを Markdown で取得
修正の確認
マウスを使わない5つの確認
確認方法： キーボード、スクリーンリーダー、自動再生の設定
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。トップの動画や埋め込みプレーヤーを変更した際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。ブラウザーの自動再生のルールは変わるため、今日あるブラウザーで静かなページが、明日は別のブラウザーで音を流すこともあります。対象のブラウザーと支援技術で、操作全体を確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。