Videos are one of the most engaging forms of content on the web.
However, if a video does not have captions, it becomes completely inaccessible to people who are deaf or hard of hearing.
Captions make videos inclusive by providing a text version of all important audio information, including dialogue, narration, and background sounds.
WCAG Success Criteria
1.2.2 Captions (Prerecorded) – Level A
All prerecorded video content that includes audio must have captions.
The captions must provide text alternatives for all spoken dialogue, narration, and meaningful sounds.
If the video is live, 1.2.4 Captions (Live) – Level AA applies instead, requiring real-time captions for live audio within the video.
These criteria ensure that users who are deaf or hard of hearing can access the same information that others receive through sound.
What Are Captions
Captions are time-synchronised text alternatives for the audio content within a video.
They include:
- What is being said (dialogue or narration)
- Who is speaking
- Background sounds and effects (for example, [applause], [footsteps], [music playing])
Captions are not the same as subtitles.
Subtitles translate spoken dialogue into another language, while captions describe all sound-based information so that users can understand the video without hearing the audio.
How to Fix the Problem
Every <video> element should include at least one <track> element with kind="captions".
Here is the correct structure:
<video width="300" height="200" controls>
<source src="myVideo.mp4" type="video/mp4"/>
<track src="captions_en.vtt" kind="captions" srclang="en" label="English captions"/>
<track src="captions_es.vtt" kind="captions" srclang="es" label="Spanish captions"/>
</video>Explanation of Attributes
| Attribute | Description |
|---|---|
| src | The path to the caption file, usually in .vtt format |
| kind | Must be “captions” for accessibility |
| srclang | The language of the caption file (for example, “en” for English, “es” for Spanish) |
| label | A user-friendly name displayed in the media player |
Common Mistakes
Avoid the following incorrect patterns:
<!-- Missing captions track -->
<video src="promo.mp4" controls></video>
<!-- Using subtitles instead of captions -->
<video controls>
<source src="interview.mp4" type="video/mp4"/>
<track src="english.vtt" kind="subtitles" srclang="en" label="English Subtitles"/>
</video>
<!-- Track exists but has no source -->
<video controls>
<source src="tutorial.mp4" type="video/mp4"/>
<track kind="captions" src=""/>
</video>
All of these examples fail because they do not provide a usable captions track for users who are deaf or hard of hearing.
Additional Notes
Platforms such as YouTube provide automatic captioning, which can help as a starting point.
However, automatic captions often need manual review and correction to ensure accuracy.
Automatic captions are not a complete accessibility solution unless they are verified and corrected for timing and accuracy.
Why This Matters
Without captions, users who are deaf or hard of hearing:
- Can see the video, but cannot understand what is being said
- Miss important context from sound effects or background music
- Lose access to emotion, tone, or meaning conveyed through audio
With captions, these users receive the same information and experience as everyone else.
Captions ensure inclusivity and equal access to multimedia content.
Rule Description
Each <video> element must include a <track> element with:
<code>kind="captions"
These captions should:
- Include all spoken dialogue and narration
- Identify who is speaking
- Describe meaningful sounds and effects
- Be synchronised and accurate
Simplified Algorithm
- Check if it includes a <track> element.
2. Verify that the <track> has kind=”captions”.
3. Ensure the src attribute points to a valid caption file.
4. Optional but recommended) Confirm that srclang and label are defined.
5. If a <video> element lacks a valid captions track → it fails accessibility.
Example in Context
<video controls width="640" height="360">
<source src="training.mp4" type="video/mp4">
<track src="training_captions.vtt" kind="captions" srclang="en" label="English captions">
</video>Result: The video is now fully accessible to users who are deaf or hard of hearing.
