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.
Why this matters and how to fix it
Why this matters
Many prerecorded videos contain important visual information—such as actions, gestures, scene changes, or on-screen text—that is not spoken aloud. Users who are blind or have low vision cannot access this information without an audio description track. WCAG 2.2 and EN 301 549 (aligned with WCAG 2.1 Level AA) require audio description for prerecorded video when visual content is necessary to understand the meaning.
How to fix this issue
Add an audio description track that narrates essential visual details such as actions, on-screen text, and scene changes. The narration should fit naturally into existing pauses in the video’s audio. If your player supports it, include a <track kind="descriptions"> element. Make sure the described version is easy to find and clearly labeled.
Developer guidance
Review the video and identify all meaningful visual information that is not spoken aloud. Create an audio description track that fits into natural pauses without changing video timing. If your platform supports WebVTT descriptions, include a <track kind="descriptions"> file. If not, provide a separate audio-described version of the video. Ensure that screen readers can discover and activate the description option.
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 Examples
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" />
</video>
<p class="sr-only">Description: The narrator explains the on-screen interface elements, button labels, and actions as the presenter demonstrates the product.</p>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 prerecorded videos containing meaningful visual information that is not spoken aloud.
- 2. Check for an audio description track (<track kind="descriptions">) or an audio-described version of the video.
- 3. Play the described version and verify that narration fits naturally into the existing audio without pausing the video.
- 4. Ensure all essential actions, gestures, and on-screen text are described.
- 5. Test with a screen reader to confirm that the audio description option is discoverable and correctly labeled.
Trusted by organizations across Europe working toward WCAG and EAA conformance