Audio elements should have a text alternative or transcript.

When an <audio> element is present on a page, users who are deaf or hard of hearing cannot access the spoken content or meaningful sounds within the recording. Without a text alternative, these users are completely excluded from the information the audio conveys. This applies to any prerecorded audio-only content, such as podcasts, recorded interviews, voicemail messages, or audio clips.

This rule maps to WCAG 2.0 Success Criterion 1.2.1: Audio-only and Video-only (Prerecorded), a Level A requirement. Level A is the minimum conformance level, meaning any page that includes prerecorded audio without a text alternative fails a baseline accessibility standard.

The fix is to provide a transcript that includes all spoken content and descriptions of any non-speech sounds that carry meaning (such as laughter, applause, or a door slamming). The transcript can appear directly on the same page as the audio player or be linked nearby so users can easily find it.

There is one exception: if the audio itself is already a media alternative for text content that already exists on the page, a separate transcript is not required. For example, if a page contains a full written article and the audio is simply a recording of someone reading that article aloud, the article text already functions as the transcript. In this case, make the relationship between the text and the audio clear so users understand they convey the same information.

How to fix it

1. Create a transcript that captures all spoken words in the audio.
2. Include descriptions of non-speech sounds when they are relevant to understanding the content (for instance, "[applause]" or "[phone ringing]").
3. Place the transcript on the same page, directly below or adjacent to the audio player, or provide a clearly labeled link to the transcript nearby.
4. If the audio is an alternative version of text already on the page, add a label or note that makes this relationship obvious.

Examples

Audio element without a transcript

This audio element has no text alternative. A deaf user has no way to access the content.

<audio src="interview.mp3" controls></audio>

Audio element with a transcript on the same page

The transcript appears directly after the audio player, giving all users access to the content.

<audio src="interview.mp3" controls></audio>
<h2>Transcript</h2>
<p>
  Host: Welcome to the show. Today we're talking about web accessibility.
</p>
<p>
  Guest: Thanks for having me. Accessibility is something every team should
  think about from the start of a project.
</p>
<p>[Applause]</p>

Audio element with a linked transcript

When placing the full transcript on the same page is impractical, a link to a separate transcript page works as well. The link should be close to the audio player.

<audio src="interview.mp3" controls></audio>
<p>
  <a href="interview-transcript.html">Read the full transcript</a>
</p>

Audio element that is a media alternative for existing text

When the page already contains the text content that the audio reproduces, a separate transcript is not needed. The relationship between the text and the audio must be made clear.

<p>
  The following is the opening paragraph of the mayor's annual address:
  This year, our city has made progress on housing, transportation, and
  public safety. We remain focused on building a city that works for
  everyone.
</p>
<p>You can also listen to the audio recording of this passage below.</p>
<audio src="mayor-address.mp3" controls></audio>

Learn more:

W3C Reference

Understanding Non-text Content

→

W3C Reference

Understanding Media Alternative (Prerecorded)

→

MDN Reference

HTML audio element

→