1.2.2 Captions (Prerecorded)

Level: A | Principle: Perceivable | Since: WCAG 2.0 | Automation: Manual


What This Means

All pre-recorded video content that includes audio must have synchronized captions. Captions must include not just spoken dialogue but also relevant sound effects, speaker identification, and music cues that are necessary to understand the content.

This is one of the most impactful accessibility requirements because video is everywhere on the web. Captions make video accessible to deaf and hard-of-hearing users, and also benefit anyone watching without sound.

Who This Affects

  1. Deaf and hard-of-hearing users — captions are their primary way to access audio content in video
  2. Non-native language speakers — captions help them follow along with spoken content
  3. Users in sound-sensitive environments — offices, libraries, public transit
  4. Users with cognitive disabilities — reading along with audio improves comprehension

Common Pitfalls

1. Video with no captions at all

<!-- Bad: no captions provided -->
<video controls src="product-demo.mp4"></video>

2. Auto-generated captions with no review

<!-- Bad: unreviewed auto-captions contain errors -->
<video controls src="medical-lecture.mp4">
  <track kind="captions" src="auto-generated.vtt" srclang="en" label="English (auto)">
</video>
<!-- Auto-captions often mangle technical terms, proper nouns, and accented speech -->

3. Captions that omit sound effects and speaker changes

<!-- Bad: only dialogue is captioned, missing critical audio cues -->
WEBVTT

00:00:05.000 --> 00:00:08.000
Please come in.

00:00:10.000 --> 00:00:12.000
Have a seat.
<!-- Missing: [door creaks open], [thunder rumbles], Speaker identification -->

4. Captions that are out of sync

<!-- Bad: captions appear seconds before or after the spoken words -->
<track kind="captions" src="poorly-timed.vtt" srclang="en">

How to Fix

Provide synchronized captions with a track element

<!-- Good: accurate, synchronized captions -->
<video controls src="product-demo.mp4">
  <track kind="captions" src="product-demo-en.vtt" srclang="en" label="English" default>
</video>

Write complete caption files

WEBVTT

00:00:01.000 --> 00:00:03.500
[upbeat music playing]

00:00:04.000 --> 00:00:07.000
SARAH: Welcome to the product demo.

00:00:07.500 --> 00:00:10.000
SARAH: Today I'll walk you through three new features.

00:00:11.000 --> 00:00:13.000
[screen transitions to dashboard view]

00:00:13.500 --> 00:00:16.000
SARAH: First, notice the redesigned navigation.

YouTube / third-party embeds

<!-- Good: enable captions on YouTube embeds -->
<iframe
  src="https://www.youtube.com/embed/VIDEO_ID?cc_load_policy=1"
  title="Product demo with captions"
  allowfullscreen>
</iframe>

How to Test

  1. Identify all prerecorded video content with audio on the page.
  2. Play each video and enable captions (CC button or track menu). Verify captions appear and are synchronized with the audio.
  3. Compare captions against the spoken dialogue for accuracy, checking that proper nouns, technical terms, and numbers are correct.
  4. Verify captions include speaker identification and relevant non-speech audio cues (e.g., [applause], [music playing], [door slams]).
  5. Check that caption timing is within 1-2 seconds of the spoken words.
  6. Pass: Every video has accurate, synchronized captions that include dialogue, speaker identification, and relevant sound effects.
  7. Fail: Any video lacks captions, has inaccurate captions, omits speaker identification, or misses significant non-speech audio.

axe-core Rules

| Rule | What It Checks | |------|---------------| | video-caption | <video> elements must have a <track> element with kind="captions" |

Sources

  1. W3C WCAG 2.2 — Understanding 1.2.2