要約
音声にラベルを付け、ユーザーが再生を制御できるようにし、音声が聞こえないユーザーや情報の処理に時間がかかるユーザーのための代替手段を用意します。
テクニック
-
音声の内容を説明するラベルを付けます。[[WCAG-1.1.1]]
-
デフォルトで
audio
要素のネイティブコントロールを有効にします。[[WCAG-2.1.1]] -
トランスクリプトを付けます。[[WCAG-1.2.1]]
-
自動的に開始される音声をユーザーが無効にしたり、音量をオフにしたりできるようにします。[[WCAG-1.4.2]]
-
音声を録音する際は、背景ノイズが少ないか、または全くないことを確認してください。[[WCAG-1.4.7]]
例
controls
属性を設定すると、ネイティブ HTML コントロールがデフォルトで有効になります。
<audio … controls="controls"/>
aria-label
属性は、音声クリップの主題を識別します。
<audio … aria-label="Moon landing"/>
音声クリップの後にトランスクリプトへのリンクが提供されます。
<div>
<audio src="audio/01.mp3"
controls="controls"
aria-label="Truman's fair deal"/>
<a href="transcript01.html">Read the transcript</a>
</div>
ユーザーエージェントは、音声要素をサポートしていない場合にのみ、 audio
要素内のコンテンツをレンダリングします。ユーザーエージェントは、提供された音声形式をサポートしていない場合、このコンテンツを表示しません(このような場合、ユーザーエージェントは独自のエラーメッセージを表示します)。
<audio
src="audio/clip12.mp3"
controls="controls"
aria-label="Churchill's 'We Shall Never Surrender' speech">
<div class="err">
<p>
Sorry, it appears your system does not support audio playback.
</p>
</div>
</audio>
解説
音声クリップを含める場合は、もともとのユーザーエージェントのコントロールがデフォルトで有効になっていることを確認します(つまり、 audio
要素にcontrols
属性を設定します)。この方法により、スクリプトが利用できない場合でもコントロールにアクセスできるようになります。独自のカスタムコントロールを定義する場合は、スクリプトをサポートしていないユーザーエージェントでもコントロールが利用できるよう、JavaScript でネイティブコントロールを無効にしてください。
音声クリップにラベルを付けると、ユーザーはビデオを視聴するかどうかを決める前に、ビデオの目的を理解できるようになります。たとえば、高額の通信費がかかるユーザーは、興味のないクリップをダウンロードする必要がないため、時間と費用の両方を節約できます。
代替手段を提供するという点では、WCAG は音声コンテンツに「メディア代替手段」を要求しています。これはトランスクリプト(文字起こし)のようなものですが、単に話された台詞を羅列しただけのものではいけません。代替手段は、重要な非言語的な音についても記述する必要があります。
audio
要素では代替手段として子コンテンツが許可されていますが、そのようなコンテンツはアクセシブルな代替手段として機能するよう意図されているわけではありません。この子コンテンツは、 audio
要素をサポートしていないユーザーエージェント(例: EPUB 2 ユーザーエージェント)の場合にのみ、ユーザーに提供されます。
また、ユーザーが支援技術(スクリーンリーダーなど)によって生成された音声を聞くことができるようにすることも重要です。たとえば、音声を自動的に再生すると、テキストを聞く妨げになることがあります。音声クリップの再生時間が3秒以内など、ごく短い場合を除いて、ユーザーは支援技術をミュートにすることなく、音声再生を無効にしたり、音量をミュートしたりできる必要があります。(つまり、システムの音声コントロールは支援技術を含むすべての音声を同期して上げ下げするため、この要件を満たすのに十分ではありません)。
関連リンク
- MDN — <audio>: 埋め込み音声要素
- HTML —
audio
要素 - HTML —
track
要素