Provide Captions for Prerecorded Video
Content available in English only.
Accessibility isn't just about avoiding violations — it's about ensuring that everyone can use your product with confidence. This guide explains each rule's intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
If a prerecorded video contains speech, it must have captions — no exceptions.
Overview
Why this matters
Without captions, prerecorded video audio is unavailable to deaf and hard-of-hearing users, and difficult in muted/noisy environments. Captions are often the only path to the spoken content.
How to fix this issue
Add synchronized captions for all prerecorded video with meaningful audio. Include dialogue, relevant speaker changes, and important non-speech cues. Use `<track kind="captions">` (WebVTT) and ensure users can enable captions in the player.
Developer Guidance
Integrate caption generation + QA into media pipeline. Do not publish raw auto-captions without review. Revalidate sync and wording after re-edits, trims, or re-encodes.
Code Examples
Incorrect Implementation
<video src="promo.mp4" controls></video>
<!-- No caption track provided -->Correct Implementation
<video src="promo.mp4" controls>
<track src="promo-en.vtt" kind="captions" srclang="en" label="English Captions" />
</video>Real-World Implementation
Before
<video src="new-user-onboarding.mp4" controls></video>
<!-- Setup instructions are spoken only; muted users miss steps -->After
<video src="new-user-onboarding.mp4" controls>
<track src="new-user-onboarding.en.vtt" kind="captions" srclang="en" label="English" />
</video>
<!-- Users can follow setup even with audio off -->CSS Example (Guidance)
/* Optional styling for custom caption displays */
.video-captions {
font-size: 1rem;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 4px 8px;
border-radius: 4px;
}Manual Testing
- 1. Find all prerecorded videos with speech or meaningful audio.
- 2. Enable captions and verify the control is easy to discover.
- 3. Confirm captions match speech timing and remain readable during scene changes.
- 4. Check that key non-speech sounds are captioned when relevant.
- 5. Spot-check several timestamps against the source audio for accuracy.
- 6. Re-test after any video re-export/edit to catch desynchronization.
Related Perceivable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance