要約

音声にラベルを付け、ユーザーが再生を制御できるようにし、音声が聞こえないユーザーや情報の処理に時間がかかるユーザーのための代替手段を用意します。

テクニック

例

例 - ネイティブコントロールの有効化

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秒以内など、ごく短い場合を除いて、ユーザーは支援技術をミュートにすることなく、音声再生を無効にしたり、音量をミュートしたりできる必要があります。（つまり、システムの音声コントロールは支援技術を含むすべての音声を同期して上げ下げするため、この要件を満たすのに十分ではありません）。

関連リンク