WCAG 2.2 ガイドライン「1.4.2 音声コントロール」Level A について
はじめに
WCAG 2.2の「1.4.2 音声コントロール」は、ウェブページで自動的に再生される音声が3秒以上続く場合、以下のいずれかの操作手段を提供することを求めています：
- 音声を一時停止または停止するメカニズム
- システム全体の音量とは独立した音量調節機能
この記事では、HTML、CSS、JavaScriptを使って、この基準を満たす具体的な実装方法を初心者向けに詳しく解説します。
1. 音声コントロールが必要な理由
自動再生される音声には以下のような問題があります：
- 視覚障害を持つ方：スクリーンリーダーを使う際に音声が重なり、情報が分かりにくくなる。
- 認知障害を持つ方：予期しない音声により混乱する可能性がある。
- 環境の制約：音声を再生できない環境（図書館など）で問題になる。
音声コントロールを提供することで、すべてのユーザーが快適にコンテンツを利用できるようになります。
2. 実装方法
a. 自動再生を3秒以内に制限する
音声を自動再生する場合、3秒以内に終了するように設定します。
HTMLの例
<audio autoplay>
<source src="short-audio.mp3" type="audio/mpeg">
このブラウザは音声をサポートしていません。
</audio>
- 短い効果音などは、この方法で問題を回避できます。
b. 再生・一時停止ボタンを提供する
ユーザーが音声を制御できるように再生・一時停止ボタンを設置します。
HTMLとJavaScriptの例
<audio id="backgroundAudio" autoplay loop>
<source src="background-audio.mp3" type="audio/mpeg">
このブラウザは音声をサポートしていません。
</audio>
<button id="audioControl">一時停止</button>
<script>
const audio = document.getElementById("backgroundAudio");
const controlButton = document.getElementById("audioControl");
controlButton.addEventListener("click", () => {
if (audio.paused) {
audio.play();
controlButton.textContent = "一時停止";
} else {
audio.pause();
controlButton.textContent = "再生";
}
});
</script>
ポイント
audio.pausedプロパティで現在の再生状態を判定します。- ボタンのラベルを状態に応じて切り替えることで、ユーザーに分かりやすい操作を提供します。
c. 音量調節機能を提供する
音量調節機能を実装することで、システム音量とは独立して音声を調整できます。
HTMLとJavaScriptの例
<audio id="backgroundAudio" autoplay loop>
<source src="background-audio.mp3" type="audio/mpeg">
このブラウザは音声をサポートしていません。
</audio>
<label for="volumeControl">音量：</label>
<input type="range" id="volumeControl" min="0" max="1" step="0.1" value="1">
<script>
const audio = document.getElementById("backgroundAudio");
const volumeControl = document.getElementById("volumeControl");
volumeControl.addEventListener("input", () => {
audio.volume = volumeControl.value;
});
</script>
ポイント
<input type="range">を使い、音量を滑らかに調整できるようにします。audio.volumeプロパティは0（ミュート）から1（最大音量）の間で指定します。
3. よくある失敗例とその対策
a. 音声を止める手段がない
失敗例
<audio autoplay>
<source src="long-audio.mp3" type="audio/mpeg">
</audio>
- 音声が自動再生され、停止手段が提供されていません。
改善策 再生・一時停止ボタンを設置します（先述の例を参照）。
b. 「音量を調節してください」というメッセージのみ
失敗例
<p>音声が大きすぎる場合は、システム音量を調節してください。</p>
- システム全体の音量を調整するように求めるだけでは、基準を満たしません。
改善策 音声の個別音量調節機能を提供します（先述の例を参照）。
4. アクセシビリティのメリット
a. ユーザーの選択肢を増やす
- 自動再生音声を手動で停止できることで、環境や個人の状況に応じた操作が可能になります。
b. 不意の音声再生によるストレスを軽減
- ユーザーの意図しない音声再生を防ぎ、快適なブラウジング体験を提供します。
まとめ
WCAG 2.2の「1.4.2 音声コントロール」は、3秒以上自動再生される音声に対してコントロール手段を提供することを求めています。
実装のポイント
- 自動再生を3秒以内に制限
短い音声の場合、特にコントロールを設ける必要はありません。 - 再生・一時停止ボタンを設置
ユーザーが音声を手動で制御できるようにします。 - 音量調節機能を追加
システム音量とは独立した音量調整手段を提供します。
これらを実践することで、音声コンテンツが誰にとっても利用しやすいものになります！
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。