Summary

Ensure the audio is labeled, the user can control playback, and there are alternatives for users who cannot hear the audio or need more time to process the information.

Techniques

Examples

Example 1 — Enabling native controls

Setting the controls attribute enables the native HTML controls by default.

<audio src="audio/clip01.mp3"
       controls="controls"
       aria-label="Moon landing"/>
Example 2 — Including a transcript

A link to a transcript is provided after the audio clip.

<div>
   <audio src="audio/01.mp3"
          controls="controls"
          aria-label="Truman's fair deal"/>
   <a href="transcript01.html">Read the transcript</a>
</div>
Example 3 — Including a fallback error message

Content included inside the audio element is only rendered if the element itself is unsupported. The content is not displayed if there are no supported audio formats (the user agent will display its own error message in such cases).

<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>

Explanation

When including audio clips, ensure that the native user agent controls are enabled by default (i.e., by setting the controls attribute on the audio element). This practice ensures that the control are accessible even if scripting is not available. If custom controls are provided and supported by the user agent, the native controls can be disabled by JavaScript.

Although the audio element allows child content for fallback purposes, such content is not intended to serve as an accessible alternative. It is only made available to the user if the audio element is not supported by the user agent (e.g., EPUB 2 user agents).

The following methods for making audio content accessible are instead recommended in the HTML5 specification:

Related Links