Loading...
Loading content...
Loading content...
Provide captions for all prerecorded videos with sound.
Why it matters: Users who are deaf or hard of hearing rely on captions to understand spoken content in videos.
Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
What This Means: This success criterion requires that all prerecorded video content with audio must have synchronized captions. Captions are text versions of the spoken words and important sounds that appear on screen in sync with the audio. They must include all dialogue, speaker identification when necessary, and descriptions of meaningful sound effects.
Why It's Important: Users who are deaf or hard of hearing cannot access information presented through audio. Captions make video content accessible by providing a text representation of all audio information. This allows deaf and hard of hearing users to understand dialogue, follow the narrative, and catch important sound cues that contribute to understanding the content.
Captions should be synchronized with the audio track, appear on screen in a readable format, and include all spoken dialogue. They should also identify speakers when multiple people are talking and describe important non-speech sounds like [door slams], [music playing], or [phone ringing]. Captions can be provided as closed captions (user can toggle on/off) or open captions (always visible), and should be available through the video player controls.
This criterion ensures that deaf users can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that hard of hearing users can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that non-native speakers can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
Users who cannot hear the audio miss all the dialogue and sound effects.
The video player has a CC button that toggles synchronized text captions.
This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 1.2.2 Captions (Prerecorded) are met. Check off items as you complete them.
To meet this success criterion, ensure the following requirements are met:
While meeting the minimum requirements ensures compliance, consider these enhancements for a better user experience:
Auto-generated captions are good enough for compliance.
Auto-generated captions often have errors and may not meet accuracy requirements. Manual review and correction are typically needed for quality captions.
I only need captions if my video has dialogue.
Captions should include all important audio information, including sound effects, music cues, and non-speech sounds that convey meaning.
Subtitles and captions are the same thing.
Subtitles assume viewers can hear audio and only translate dialogue. Captions are for deaf/hard of hearing users and include all audio information including sound effects.
Videos without any captions.
Add synchronized captions using <track> elements with kind='captions' or provide captions through the video player's built-in functionality.
Captions that are out of sync with the audio.
Ensure caption timing is precisely synchronized. Use proper caption file formats (WebVTT, SRT) with accurate timestamps.
Captions missing important sound effects or non-speech audio.
Include descriptions of meaningful sounds in brackets, e.g., [door slams], [music playing], [phone ringing].
No speaker identification when multiple people are speaking.
Identify speakers in captions when it's important for understanding, especially in interviews or conversations with multiple participants.
Captions that are hard to read (poor contrast, small text).
Ensure captions have sufficient contrast against the video background and are appropriately sized. Consider providing caption styling options.
Note: These are official W3C resources for 1.2.2. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 1.2.2 Captions (Prerecorded) correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Perceivable PrincipleGuideline
1.2 Time-based Media