サイトの音声を自動再生する？再生条件と停止方法の確かめ方

音がなくても、案内を読み始められるようにする

背景音は、訪問者が知りたい営業時間やサービスの条件とは役割が違います。音を聴けない場所や、読み上げソフトで本文を聞く人もいるため、案内の要点は文字でも読めるようにします。音声の説明が本題なら、何を聴けるかを短く書き、再生するかを閲覧者が選べる入口にします。

たとえば、会社紹介の音声なら「会社紹介を聴く」と内容が分かる案内を付け、再生と停止を近くに置く案が考えられます。これは作り方の例で、この記事の架空記録でボタンを押した結果ではありません。見つけやすい位置と、キーだけでも選んで操作できるかは、制作する画面で確かめます。

自動で流す理由がある場合も、最初から音を出す必要と、無音の動画を見せる必要を分けます。動画が動いたから音も流れるとは限りません。自動再生が始まることだけを完成条件にせず、始まらない場合の入口と、始まった音を止める方法まで決めてください。

参考：W3C：音声を制御する条件

WordPressで、音声と動画の設定を別々に見る

編集画面で対象の音声または動画を選び、ブロックの設定を開きます。音声ブロックでは自動再生と繰り返し、動画ブロックではそれらに加えてミュートや再生コントロールを確認します。ミュートは音を出さない設定、再生コントロールは閲覧者が再生などを操作する表示です。画面名や利用できる設定は、版や使うブロックで異なります。

「自動再生」は、ページを開いたときに開始を求める設定です。「繰り返し」は終わったあとに再び流す設定で、同じ意味ではありません。「先読み」は再生前にファイルをどの程度読み込むかの設定で、自動再生できることの保証にはなりません。動画の「インライン再生」も、ページ内で再生するための指定で、音の開始許可とは分けます。

対象が外部サービスの埋め込みや独自の部品なら、その部品の仕様を調べます。音声ブロックに動画だけの設定を探したり、ある部品の設定名を全サイトへ当てはめたりしないでください。編集画面の選択内容を確認したら、次は許可された確認先でページを開き、実際の結果を見ます。

参考：WordPress：音声ブロック

参考：WordPress：動画ブロック

設定・実際の再生・聞こえた音を分けて確かめる

確認するページ、ブラウザー、以前にそのサイトを操作したかをそろえ、まず再生ボタンを押さずに開きます。映像が進む、音が聞こえる、操作用の表示がある、の三つを別々に見ます。必要な音量確認も条件に残します。自分の端末全体が消音になっている場合と、媒体そのもののミュートも混ぜません。

次の図は実サイトの試験結果ではなく、違いを説明する架空の記録です。無音動画の例では、自動再生の要求があり、ミュートが有効で、再生された一方、音はありません。背景音声の例では、自動再生の要求があり、ミュートは無効でも、再生されず音もありません。二つはページも閲覧条件も違う別記録で、一方を直した結果ではありません。

両例とも再生コントロールが見えた記録はありますが、押した結果は原票にありません。表示があることだけで、一時停止や手動開始が使えたとは扱いません。再生時間と個別の原因も未確認です。詳しい36項目は任意の補足で読めます。

図の内容を文章で読む

別々の架空記録です。説明用の無音動画：説明用の記録の名前は説明用の無音動画、確認するページは架空の店舗案内、媒体の種類は動画、自動再生の要求は要求あり（true）、ミュートの設定はミュート有効（true）、それ以前のサイト操作は操作なし（false）、閲覧の条件は架空の新しい閲覧条件A、実際の再生は再生あり（true）、実際に聞こえた音は音なし（false）、再生が続いた秒数は未確認、個別の原因は未確認、再生コントロールの表示は表示あり（true）。説明用の背景音声：説明用の記録の名前は説明用の背景音声、確認するページは架空の会社案内、媒体の種類は音声、自動再生の要求は要求あり（true）、ミュートの設定はミュート無効（false）、それ以前のサイト操作は操作なし（false）、閲覧の条件は架空の新しい閲覧条件B、実際の再生は再生なし（false）、実際に聞こえた音は音なし（false）、再生が続いた秒数は未確認、個別の原因は未確認、再生コントロールの表示は表示あり（true）。二例はページと閲覧条件が違い、修正前後ではありません。両方の再生時間と個別原因は未確認です。再生コントロールの表示記録は、停止や手動開始を操作した記録ではありません。

PC原寸画像を開く · スマホ原寸画像を開く

参考：MDN：自動再生とブラウザーの扱い

始まらない場合は、手動で再生できるかを確認する

音のある自動再生はブラウザーの条件に左右されます。以前の操作や閲覧環境で扱いが変わるため、編集画面がオンでも、すべての訪問者に開始するとは限りません。Chromeの説明を、他のブラウザーや今回の個別原因の確定へ広げないでください。

最初に再生されなかったら、閲覧者が選べる再生操作を確認します。ページの目的に合う案内が見え、Tabなどで選び、使う部品に合うキーやクリックで開始できるかを試します。自動で始まらない状態と、操作しても始まらない状態は別です。操作後に始まったか、音が出たか、止められたかを続けて確認します。

操作しても始まらない場合は、対象ファイルの読み込みとエラー、使うブロックや外部埋め込みの条件を制作担当が調べます。開発者向けの実装では、再生要求の成功・失敗を調べる方法もあります。ここではコードやブラウザー設定を変えて制限を回避する手順へ進まず、分かった結果と未確認の原因を分けて残します。

参考：Chrome：自動再生の条件と開始失敗時の扱い

参考：MDN：再生要求が失敗した場合の扱い

自動で鳴る音は、ページ側で止められるかを見る

自動で音が流れた場合は、音が続いた時間と止める方法を確認します。WCAG 2.2の音声の基準では、自動の音声が3秒を超える場合、一時停止または停止、あるいは端末全体の音量とは別に音量を調整する仕組みを求めています。端末の主音量を下げるだけの確認とは違います。

操作表示が見えるだけで終わらず、選んで止めると実際に音が止まるか、再開する場合に何を押すかを確かめます。ほかの説明を読みながらも操作できる位置が必要です。この記事の架空例は再生時間が未確認なので、3秒超かどうかや基準への適合は判定できません。

映像の動きを止める条件も、音とは別に確認します。自動で始まり、5秒を超えて続き、他の内容と並行して示される動きには、不可欠な活動の例外を除いて一時停止・停止・非表示の仕組みが関係します。音声の3秒と混同せず、無音だから点検不要とは考えないでください。一部の確認だけでサイト全体の適合を認定することもしません。

参考：W3C：音声を制御する条件

参考：W3C：動きを一時停止・停止・非表示にする条件

公開先でも、同じ条件で再生と停止を確かめる

確認先で使えたら、権限のある担当が変更内容を確認して保存・公開します。公開先でもページ、ブラウザー、以前の操作の条件をそろえ、最初の再生、聞こえた音、手動開始、停止をもう一度確かめます。編集画面のプレビューだけの結果を、そのまま公開先の結果へ写しません。

原票の三つ目は公開先の記録をまだ取得していない例です。媒体や自動再生設定、音、再生時間、原因、操作表示はいずれも未確認であり、「始まらなかった」「問題なし」とは書けません。確認した条件が違う場合も同じ結果にまとめず、どこまで確かめたかを残します。

音声の必要性を決め、設定と再生の結果を分け、閲覧者が始めて止められる形を確かめる。この順で進めると、自動再生のオン・オフだけに頼らず、案内の読みやすさと操作を検討できます。音声以外のキーボード・画像・入力・拡大も点検したい場合は、次の記事でサイト全体の確認項目を整理できます。

企業サイトのアクセシビリティを点検する