Captions are the textual format of the spoken audio in multimedia content. This helps users with hearing
impairments to understand the audio content in it.
NOTE:
New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS
and JavaScript (when needed), along with a working demo.
Captions SHOULD be synchronized with the multimedia content.
Multimedia content SHOULD have accurate captions containing the spoken audio.
Captions CAN be avoided if the content in the video is already covered as plain text
on the webpage.
If a button is used to display/hide the captions, the button itself MUST be
accessible as well. For more information, refer to the
Toggle Buttons component.
The caption text MUST meet the contrast requirements as below:
If standard text is used, the color contrast ratio SHOULD be 4.5:1 between
the foreground and the background text.
If large text i.e., 18pts or 14pts with bold is used, the color contrast ratio
SHOULD be 3:1 between the foreground and the background text.
Live captions SHOULD contain additional important things such as Presenter’s
cue, important sound effects, and dialogue.
Pre-recorded captions SHOULD contain additional important things such as important
sound effects, identifying speakers and dialogue.
Pre-recoded captions CAN be implemented as open or closed captions.
Open captions are always in view, and it cannot be turned off.
Closed captions can be turned on or off using a control.
The best practice is to provide closed captions instead of open captions for any multimedia
content.
For all pre-recorded multimedia content, a full text transcript and captions SHOULD
be provided.
Well-defined captions benefits majorly the below users.
People with hearing impairments.
<p>Pearson CEO in CNBC Interview with Pre-Recorded Captions</p>
<video controls title="Pearson CEO Interview" aria-label="Pearson CEO Interview with Closed Captions">
<source src="./pearson_ceo_interview.mp4" type="video/mp4">
<track src="./pearson-ceo-interview.vtt" kind="captions" srclang="en" label="English" default>
Your browser does not support the video tag.
</video>
Pearson CEO in CNBC Interview with Pre-Recorded Captions