Provide audio descriptions for videos with important visual content
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 visual content adds meaning that speech alone doesn't convey, add audio description.
Why this matters and how to fix it
Why this matters
Users who are blind or have low vision cannot perceive essential visual information in videos. Without audio descriptions, they miss key actions, scene changes, and non-verbal communication.
How to fix this issue
Provide an audio description track that narrates important visual details not covered by dialogue. This may be built into the main mix or included as a separate described version with <track kind="descriptions">.
Developer guidance
Plan for audio description during video production. Ensure scripts include visual context. For prerecorded video players, verify support for selecting or enabling description tracks.
Code examples
Incorrect Implementation
<video controls src="promo.mp4"></video>Correct Implementation
<video controls>
<source src="promo-described.mp4" type="video/mp4">
<track kind="descriptions" src="promo-descriptions.vtt" srclang="en" label="English Descriptions">
</video>Real-World Examples
Before
<video class="tutorial" src="dashboard-tour.mp4"></video> <!-- Important UI actions are silent and visually shown only -->After
<video class="tutorial" controls>
<source src="dashboard-tour-described.mp4">
<track kind="descriptions" src="dashboard-tour-desc.vtt" label="Audio Description">
</video>CSS Example (Guidance)
/* Highlight when video has a description track */
video:has(track[kind='descriptions']) {
border: 2px dashed #fbbf24; /* subtle yellow border for QA awareness */
border-radius: 6px;
}Manual testing
- 1. Watch the video with your eyes closed.
- 2. Check if important visual actions are announced (not just dialogue).
- 3. If key actions or scene changes are missing, an audio description track is required.
- 4. If a description track exists, verify it is selectable and synchronized.
Trusted by organizations across Europe working toward WCAG and EAA conformance