Provide Audio Description 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 shows important visuals that aren't spoken aloud, add audio description in the natural pauses.
Overview
Why this matters
When key meaning is visual-only, blind and low-vision users miss essential information unless audio description is provided.
How to fix this issue
Provide audio description for essential visual events (actions, on-screen text, scene changes) in prerecorded video. Deliver via a descriptions track where supported, or publish a clearly labeled described version.
Developer Guidance
Use an AD checklist during media QA: identify visual-only meaning not covered by narration, then ensure each critical moment is described. If player support for `kind="descriptions"` is limited, ship a separate described asset with equal discoverability.
Code Examples
Incorrect Implementation
<video src="product-demo.mp4" controls></video>
<!-- The presenter performs actions and shows on-screen text, but none of it is described verbally -->Correct Implementation
<video src="product-demo-described.mp4" controls>
<track src="product-demo-descriptions.vtt" kind="descriptions" srclang="en" label="Audio Description" />
</video>Real-World Implementation
Before
<video src="feature-tour.mp4" controls></video>
<!-- The video shows several UI elements and interactions without verbal explanation -->After
<video src="feature-tour.mp4" controls>
<track src="feature-tour-desc.vtt" kind="descriptions" srclang="en" label="Audio Description" />
</video>
<a class="video-description-link" href="feature-tour-described.mp4">Play described version</a>CSS Example (Guidance)
/* Optional: styling for description links or indicators */
.video-description-link {
font-weight: 500;
text-decoration: underline;
color: #1e40b0;
}
.video-description-link:hover {
color: #1d4ed8;
}Manual Testing
- 1. Identify visual-only information required to understand the video outcome.
- 2. Verify an AD track or described version is present and clearly labeled.
- 3. Confirm descriptions cover key actions, scene changes, and on-screen text.
- 4. Validate timing/clarity by consuming audio description without looking at the screen.
- 5. Test keyboard and screen-reader discoverability of AD controls/links.
Related Perceivable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance