The <audio> Element
As defined in the HTML Living Standard, the <audio> element is used to embed sound content in a document. Like the <video> tag, it provides a native playback interface.
(Ensure a text transcript is provided below the player.)
<audio controls>
<source src="podcast.ogg" type="audio/ogg">
<source src="podcast.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>Accessibility: The Necessity of Transcripts
Audio-only content is completely inaccessible to users who are deaf or hard of hearing.
WCAG Requirement: Alternatives for Time-Based Media
Success Criterion 1.2.1 (Level A): For prerecorded audio-only content, an alternative (such as a transcript) is provided.
A transcript should include not only the spoken words but also descriptions of meaningful sound effects or the tone of the speaker.
Understand SC 1.2.1: Audio-only (Prerecorded)Usage Best Practices
- The
controlsAttribute: Never omit the controls. Users must be able to pause, seek, and adjust volume to suit their needs. - Avoid Autoplay: Autoplay audio is highly disruptive and can interfere with screen readers. It is generally considered a poor UX and accessibility practice.
- Preload Attribute: Use
preload="none"orpreload="metadata"to save bandwidth for users on limited data plans.
A11y Tip: Visual Indicators
If the audio is part of a larger interactive experience, provide a visual indicator (like a waveform or a "Now Playing" label) to help users identify which audio source is active.