Audio content brings personality, realism, and emotional depth to a website, whether through voiceovers, background music, or sound cues. But without captions, this experience becomes completely inaccessible for people who are deaf or hard of hearing.
Captions bridge that gap by providing a text-based alternative to every meaningful sound. They allow all users to understand spoken dialogue, sound effects, and other audio cues, ensuring that no one misses important information, regardless of their hearing ability or environment.
WCAG Success Criteria
1.2.2 Captions (Prerecorded) – Level A
All prerecorded audio content in synchronised media must provide captions that serve as text alternatives for the spoken dialogue, sounds, and other meaningful auditory information.
If the audio content is live, 1.2.4 Captions (Live) – Level AA applies instead.
WCAG 1.2.4 Captions (Live) requires that live audio content in synchronised media must include captions. This means that any real-time audio, such as webinars, livestreams, online meetings, conferences, or live broadcasts, must provide captions that accurately represent spoken words and meaningful sounds while the event is happening.
What Are Captions
Captions are synchronised text alternatives for audio content.
They include:
- What is being said (dialogue or narration)
- Who is speaking
- Relevant background sounds or musical cues (for example, [door slams], [music playing softly])
Captions are not the same as subtitles.
Subtitles only translate spoken words between languages.
Captions describe all meaningful sounds so that deaf users can fully understand the audio experience.
How to Fix the Problem
To make your audio accessible, every <audio> element should include at least one <track> element with kind=”captions”.
Here is the correct structure:
<audio controls>
<source src="mySpeech.mp3" type="audio/mp3">
<track src="captions_en.vtt" kind="captions" srclang="en" label="English captions">
<track src="captions_es.vtt" kind="captions" srclang="es" label="Spanish captions">
</audio>Explanation of Attributes
| Attribute | Description |
|---|---|
| src | Path to the caption file, usually in .vtt format |
| kind | Must be “captions” for accessibility |
| srclang | Defines the language of the captions (for example, “en”, “es”) |
| label | Provides a user-friendly name shown in the media player |
Common Mistakes
Avoid the following patterns, as they fail accessibility testing:
<!-- Missing captions track entirely -->
<audio src="podcast.mp3" controls></audio>
<!-- Track included but missing kind="captions" -->
<audio controls>
<source src="podcast.mp3" type="audio/mp3">
<track src="captions.vtt">
</audio>
<!-- Using subtitles instead of captions -->
<audio controls>
<source src="interview.mp3" type="audio/mp3">
<track src="english.vtt" kind="subtitles" srclang="en" label="English Subtitles">
</audio>All of these examples fail because they do not provide a proper caption track for users who are deaf or hard of hearing.
Why This Matters
Without captions, users who are deaf or hard of hearing:
- Cannot follow what is being said
- It misses context, such as who is speaking or what sound effects mean
- Lose access to key information and emotions expressed through sound
With captions, these users receive the same information as everyone else.
This improves accessibility, usability, and inclusion.
Rule Description
Every <audio> element must include a <track> element with:
kind="captions"This ensures that assistive technologies and browsers can present synchronised, readable text versions of the audio content.
Captions should:
- Include all speech and narration
- Identify who is speaking
- Describe sound effects and music cues
Simplified Algorithm
- For each
- Check if there is a <track> child element.
- Ensure the <track> includes kind=”captions”.
- Verify that the caption file is properly referenced with src.
- (Optional but recommended) Include srclang and label for clarity.
- If any <audio> element lacks a valid <track> → the rule fails.
Quick Reference Table
| Type | Example | Pass/Fail |
|---|---|---|
| kind=”captions” | <track src=”captions_en.vtt” kind=”captions”> | ✅ |
| Missing captions track | <audio src=”music.mp3″> | ❌ |
| Empty track | <track kind=”captions” src=””> | ❌ |
| Using subtitles | <track kind=”subtitles” srclang=”en”> | ❌ |
Example in Context
<audio controls>
<source src="lesson.mp3" type="audio/mp3">
<track src="lesson_captions.vtt" kind="captions" srclang="en" label="English captions">
</audio>Result: Fully accessible audio for all users, including those who cannot hear the sound.
Wrapping Up
Captions make audio content accessible to people who cannot hear, ensuring that no information is lost. They also help users in noisy environments, non-native speakers, and anyone who prefers to read rather than listen.
Always include:
- A
<track>element with kind=”captions” for every<audio> - Meaningful captions that cover dialogue, speaker names, and important sounds
- Optional labels and languages to improve usability
It is a simple yet powerful step that makes your audio inclusive for everyone.
