Provide audio descriptions for video
Videos with important visual content include audio descriptions that narrate visual information for blind users.
- Add audio descriptions for visual-only content (actions, expressions, text)
- Use track element with kind='descriptions' for separate description track
- Provide extended description version if gaps between dialogue are too short
- Integrate visual descriptions into main narration when possible
Rule Details
Audio descriptions narrate visual information for users who cannot see the video content.
Code Example
<video controls>
<source src="product-demo.mp4" type="video/mp4">
<!-- Captions for deaf users -->
<track kind="captions" src="captions-en.vtt" srclang="en" label="English">
<!-- Audio descriptions for blind users -->
<track kind="descriptions" src="descriptions-en.vtt" srclang="en" label="English Audio Description">
</video>Why It Matters
Blind users miss critical plot points, product demos, and on-screen information that's only shown visually—audio descriptions provide equal access to the complete experience.
When Audio Descriptions Are Needed
| Visual Content | Needs Description? |
|---|---|
| Character actions/reactions | Yes |
| Scene changes/locations | Yes |
| On-screen text/graphics | Yes |
| Facial expressions conveying emotion | Yes |
| Talking head with no visual action | No |
| Audio-only content (podcast) | No |
VTT Description File Format
WEBVTT
00:00:03.000 --> 00:00:06.000
A woman in business attire enters a modern office lobby.
00:00:15.000 --> 00:00:18.000
She approaches the reception desk where a man looks up from his computer.
00:00:32.000 --> 00:00:35.000
On-screen text reads: "Three months later"
00:01:05.000 --> 00:01:08.000
Close-up of her face showing concern as she reads the document.React Video Player with Descriptions
interface VideoPlayerProps {
src: string
captions?: string
descriptions?: string
poster?: string
}
function AccessibleVideoPlayer({
src,
captions,
descriptions,
poster
}: VideoPlayerProps) {
const [descriptionsEnabled, setDescriptionsEnabled] = useState(false)
const videoRef = useRef<HTMLVideoElement>(null)
return (
<div className="video-container">
<video
ref={videoRef}
controls
poster={poster}
aria-describedby="video-description"
>
<source src={src} type="video/mp4" />
{captions && (
<track
kind="captions"
src={captions}
srcLang="en"
label="English Captions"
default
/>
)}
{descriptions && (
<track
kind="descriptions"
src={descriptions}
srcLang="en"
label="Audio Description"
/>
)}
</video>
{descriptions && (
<button
onClick={() => setDescriptionsEnabled(!descriptionsEnabled)}
aria-pressed={descriptionsEnabled}
>
{descriptionsEnabled ? 'Disable' : 'Enable'} Audio Descriptions
</button>
)}
<p id="video-description" className="sr-only">
Video with audio descriptions available. Use the Audio Descriptions button to enable.
</p>
</div>
)
}Alternative: Extended Description Video
// Provide two versions of the video
function VideoWithDescriptionChoice({ standardSrc, extendedSrc }: {
standardSrc: string
extendedSrc: string
}) {
const [useExtended, setUseExtended] = useState(false)
return (
<div>
<div role="group" aria-label="Video version selection">
<label>
<input
type="radio"
name="video-version"
checked={!useExtended}
onChange={() => setUseExtended(false)}
/>
Standard version
</label>
<label>
<input
type="radio"
name="video-version"
checked={useExtended}
onChange={() => setUseExtended(true)}
/>
Version with audio descriptions
</label>
</div>
<video controls key={useExtended ? 'extended' : 'standard'}>
<source src={useExtended ? extendedSrc : standardSrc} type="video/mp4" />
</video>
</div>
)
}Writing Good Descriptions
❌ Bad: "A person is there."
✅ Good: "Sarah enters the room looking worried."
❌ Bad: "Something happens on screen."
✅ Good: "The graph shows sales dropping 40% over three months."
❌ Bad: "He reacts."
✅ Good: "Marcus slams his fist on the table in frustration."Exceptions
- Logos, purely decorative text treatments, and screenshots used as documentation can be valid exceptions when their accessible alternative is still provided appropriately.
- An image or media rule should not force redundant alt text, captions, or transcripts when another nearby mechanism already provides the equivalent information clearly.
- If the media asset fails more than one rule, prioritize the issue that most directly blocks understanding for assistive technology users.
Verification
Automated Checks
- Use browser accessibility tooling, axe, Lighthouse, or equivalent automated checks against a representative rendered state.
Manual Checks
- Watch video with eyes closed—can you follow the story?
- Verify description track appears in player controls
- Check descriptions fit in gaps between dialogue
- Ensure descriptions don't overlap important audio
Use with AI
Copy these prompts to use with your AI assistant, or install the MCP server to use directly from Claude, Cursor, or Windsurf.
Check
Verify implementation
Identify videos where visual content conveys information not available in the audio track (actions, expressions, scene changes, on-screen text). Verify audio descriptions are available or visual content is described in dialogue.
Fix
Auto-fix issues
Add a separate audio description track using the track element with kind='descriptions'. Alternatively, provide an extended version with pauses for descriptions, or include visual descriptions in the main narration.
Explain
Learn more
Explain how blind and low-vision users miss visual-only information in videos, and why audio descriptions provide equal access to the complete content experience.
Review
Code review
Review the rendered markup and interactive states that affect Provide audio descriptions for video. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.