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 — Enabling native controls

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

<audio … controls="controls"/>
Example — Adding a label

The aria-label attribute identifies the subject of audio clip.

<audio … aria-label="Moon landing"/>
Example — 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 — Including a fallback error message

A user agent will only render the content inside the audio element if it does not support the element. The user agent does not display this content if it does not support the provided 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 controls are accessible even if scripting is not available. If you define your own custom controls, disable the native controls by JavaScript so they remain available in user agent that do not support scripting.

Providing a label for audio clips ensures that users can understand the purpose of the audio before choosing whether to listen to it. Users with high bandwidth costs, for example, can save both time and money by not having to download clips they are not interested in.

In terms of providing alternatives, WCAG requires "media alternatives" for audio content. These are like transcripts but cannot be only a simple listing of the spoken dialogue. The alternative must also describe any important non-verbal sounds.

Although the audio element allows child content for fallback purposes, such content is not intended to serve as an accessible alternative. The user agent only makes this content available to the user if it does not support the audio element (e.g., in EPUB 2 user agents).

It is also important to consider that users need to be able to hear the audio produced by their assistive technologies (e.g., a screen reader). Playing audio automatically interferes with their ability to hear the text, for example, so unless the audio clip only plays for three seconds or less, the user must be able to disable playback or mute the volume without also muting their assistive technology (i.e., the system audio control is not sufficient to meet this requirement as it will raise and lower all audio in synchronicity).

Related Links