Accessible Videos
Video is one of the most information-dense media types, and one of the most frequently inaccessible. Captions, audio descriptions, and transcripts are not optional extras — they are legally required for government and nonprofit websites under DOJ Title II.
Note: Future updates to this page will add interactive working components — live examples, editors, and tools — directly in the browser.
Why this matters for neurodivergent users
Captions benefit all neurodivergent viewers, not only those who are deaf or hard of hearing. For ADHD users, captions provide a second channel of information that helps maintain focus when attention drifts from the audio. For dyslexic users, hearingand seeing the words simultaneously reinforces comprehension. For autistic users, captions reduce the cognitive effort of parsing tone of voice and facial expressions.
Transcripts let users search, skim, and jump to the sections they need — critical for users who cannot process audio at full speed or who need to return to a specific moment.
WCAG requirements for video
| Requirement | Level | Applies to | SC |
|---|---|---|---|
| Captions (prerecorded) | AA | Synchronized text equivalent of all spoken dialogue and sounds | 1.2.2 |
| Audio description (prerecorded) | AA | Narration of visual information not conveyed in the main audio | 1.2.5 |
| Sign language (prerecorded) | AAA | Sign language interpretation of all audio content | 1.2.6 |
| Extended audio description (prerecorded) | AAA | Pauses video to allow full description of visual content | 1.2.7 |
| Media alternative (prerecorded) | AAA | Full text transcript including visual and audio information | 1.2.8 |
| Captions (live) | AA | Real-time captions for live video | 1.2.4 |
| Pause, stop, hide | A | User control over auto-playing video | 2.2.2 |
| No flashing | A / AAA | No content flashes more than 3/sec (2.3.1 AA); no flashing (2.3.2 AAA) | 2.3.1, 2.3.2 |
Embedding YouTube videos accessibly
YouTube embeds include captions when the video has them. Always enable captions by default using the cc_load_policy=1 parameter. The iframe must have a descriptive title attribute:
<div
style={{
position: "relative",
paddingBottom: "56.25%", /* 16:9 */
height: 0,
overflow: "hidden",
}}
>
<iframe
src="https://www.youtube.com/embed/VIDEO_ID?cc_load_policy=1&rel=0"
title="How to perform a manual WCAG accessibility audit (14 minutes)"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
border: 0,
}}
/>
</div>Caption quality standards
Auto-generated captions (YouTube, Whisper) are a starting point only. Review and correct them before publishing. Common auto-caption failures:
- Proper nouns spelled phonetically (“WCAG” → “we cag”)
- Missing punctuation and sentence boundaries
- Speaker identification absent in multi-speaker videos
- Sound effects not captioned ([applause], [music])
- Timing misaligned by more than 2 seconds
For government content, caption accuracy below 99% is a liability. Use a human-reviewed caption service or correct auto-captions before publishing.
Writing audio descriptions
Audio descriptions narrate visual information that is not spoken aloud. Include:
- On-screen text (slide titles, form fields, URLs shown)
- Speaker identification when not stated in dialogue: “The presenter advances to a slide titled WCAG 2.1 Overview”
- Meaningful visual actions: “The inspector selects the heading element and the Accessibility pane shows role: heading, level: 2”
Providing a text transcript
A full text transcript (SC 1.2.8, AAA) is the most versatile alternative. It allows:
- Search engines to index the video content
- Users to read at their own pace
- Translation into other languages
- Keyboard navigation to specific sections
Place the transcript on the same page, below the video, in an accessible <details> element or a dedicated section with a heading. Do not link to an external PDF.
Accessible player controls
Custom video players must meet SC 4.1.2 (Name, Role, Value) for all controls. Every button needs:
- A visible label or
aria-label - Keyboard operability (Enter/Space to activate, Tab to focus)
- Visible focus indicator meeting SC 2.4.11 (AAA)
- 4.5:1 contrast on the control against its background
Native <video> elements with browser-default controls satisfy these requirements in all modern browsers. Only build a custom player if the default controls genuinely do not meet your design requirements.
Testing checklist
- Enable captions — confirm they are accurate, timed, and identify speakers.
- Watch with audio off — all visual information should be described.
- Navigate all player controls by keyboard only.
- Run axe-core — rules
video-caption,video-description. - Verify the transcript is present and covers all audio and visual information.
