The <audio> Element
As defined in the HTML Living Standard, the <audio> element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element.
<audio controls>
<source src="podcast.mp3" type="audio/mpeg">
<source src="podcast.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
View HTML Living Standard: The audio element
Best Practices for Audio Accessibility
- Always include
controls: Users must be able to play, pause, and adjust volume. Never autoplay audio, as it can interfere with screen readers. - Provide a Transcript: A text-based version of the audio content is essential for users who are deaf or hard of hearing.
- Fallback Content: The text between the opening and closing tags is only displayed in browsers that do not support the element. Use it to provide a link to the audio file.
WCAG Requirement: Audio Alternatives
Success Criterion 1.2.1 (Level A): For prerecorded audio-only media, an alternative for time-based media is provided that presents equivalent information.
Providing a transcript satisfies this requirement. Transcripts not only help users with disabilities but also improve SEO and allow users to consume content in "quiet" environments.
Understand SC 1.2.1: Audio-only and Video-onlyAvoid Autoplay
Autoplay is a major accessibility barrier. If audio starts automatically, it can drown out the voice of a screen reader, making the page impossible to navigate for blind users.
WCAG Requirement: Audio Control
Success Criterion 1.4.2 (Level A): If any audio on a Web page plays automatically for more than 3 seconds, a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.
Understand SC 1.4.2: Audio Control