Loading...
Ensuring prerecorded video content is accessible through audio description or media alternatives
Must be audio described
~20% of population
Audio track or text alternative
Level A (Required)
"An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such."
This success criterion ensures that prerecorded video content is accessible to users who cannot see the visual information. You must provide either:
A separate audio track that describes visual content during natural pauses in the dialogue.
A comprehensive text document that describes all visual and audio content.
Makes visual content accessible to blind and low vision users who cannot see actions, gestures, facial expressions, or other important visual information in videos.
Provides comprehensive context and detailed descriptions that enhance understanding for all users, including those with cognitive disabilities or learning differences.
Required by WCAG 2.2 Level A and essential for ADA compliance, avoiding legal issues and ensuring your content meets accessibility standards.
~1.3% of population
Cannot see visual content like actions, settings, gestures, or scene changes in videos
~2.9% of population
May miss important visual details, facial expressions, or small text in videos
~10-15% of population
Benefit from audio descriptions to understand complex visual information and context
~8-12% of population
Audio descriptions help maintain focus and understanding of visual content
Situational users
Cannot watch video but can listen, need audio descriptions for full understanding
~15-20% globally
May choose audio-only or prefer text alternatives when video streaming is difficult
Review your video to identify all visual elements that convey important information
Decide between audio description track or complete media alternative
Create concise, objective descriptions of visual content
Synchronize descriptions with video content using proper timing
Develop comprehensive text alternative describing all visual and audio content
Add audio descriptions to your video player and test with users
Accessibility Training Video
A woman in a blue suit stands in front of a whiteboard with accessibility diagrams.
Visual Content Not Described
❌ Problems:
Upload video file (optional)
<!-- Video with audio description track -->
<video controls width="600">
<source src="video.mp4" type="video/mp4">
<track kind="descriptions" src="descriptions.vtt" srclang="en" label="English Descriptions" default>
<track kind="captions" src="captions.vtt" srclang="en" label="English Captions">
Your browser does not support the video tag.
</video>
<!-- Audio Description WebVTT File (descriptions.vtt) -->
WEBVTT
NOTE
Audio descriptions for accessibility tutorial video
1
00:00:00.000 --> 00:00:03.000
A woman in a blue suit stands in front of a whiteboard.
2
00:00:05.000 --> 00:00:07.000
She points to a flowchart showing website navigation.
3
00:00:10.000 --> 00:00:12.000
Close-up of hands typing on a laptop keyboard.
<!-- Alternative: Media Alternative Link -->
<video controls width="600">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p><a href="video-transcript.html">Complete text alternative for this video</a></p>// Video with audio descriptions
function VideoWithDescriptions({ videoSrc, descriptionTrack, mediaAlternative }) {
const [showAlternative, setShowAlternative] = useState(false);
return (
<div className="video-container">
<video controls width="100%" className="max-w-2xl">
<source src={videoSrc} type="video/mp4" />
<track
kind="descriptions"
src={descriptionTrack.src}
srcLang={descriptionTrack.lang}
label={descriptionTrack.label}
default={descriptionTrack.default}
/>
Your browser does not support the video tag.
</video>
{/* Media Alternative Option */}
<div className="mt-4">
<button
onClick={() => setShowAlternative(!showAlternative)}
className="text-blue-600 underline"
>
{showAlternative ? 'Hide' : 'Show'} Complete Text Alternative
</button>
{showAlternative && (
<div className="mt-2 p-4 bg-gray-100 rounded">
<h3>Complete Media Alternative</h3>
<div dangerouslySetInnerHTML={{ __html: mediaAlternative }} />
</div>
)}
</div>
</div>
);
}
// Usage
<VideoWithDescriptions
videoSrc="/accessibility-tutorial.mp4"
descriptionTrack={{
src: "/descriptions.vtt",
lang: "en",
label: "English Descriptions",
default: true
}}
mediaAlternative="<p>Complete text description of all visual and audio content...</p>"
/>