Videos without captions.

The problem

Captions make video usable for the roughly 1-in-8 people with hearing loss—and for the far larger group watching on mute, in a noisy place, or learning the language. WCAG 1.2.2 requires synchronized captions for all pre-recorded video with audio, and missing captions are a frequent basis for ADA complaints against media-heavy sites. Captions also boost SEO and engagement, since the transcript becomes indexable text and most social video is watched without sound.

The fix

<video src="demo.mp4" controls></video>
<!-- No captions — fails WCAG 1.2.2 -->

<video controls>
  <source src="demo.mp4" type="video/mp4">
  <track kind="captions" src="demo.en.vtt" srclang="en" label="English" default>
</video>

Step by step

1. 1Generate a WebVTT (.vtt) or SRT (.srt) caption file for each video.
2. 2Add a <track> element inside <video> with kind="captions".
3. 3Use auto-captioning tools (YouTube, Otter.ai, Rev) then manually review for accuracy.
4. 4For third-party embeds (YouTube, Vimeo), enable captions in the player settings.
5. 5Captions must be synchronized and include non-speech sounds ('[applause]', '[music]').

Common mistakes

• ×Shipping video with no <track> captions at all.
• ×Relying on auto-generated captions without reviewing them for accuracy.
• ×Captions that omit speaker changes and non-speech sounds ([music], [applause]).
• ×Burning captions into the video so they can’t be turned off or restyled.

How to test for it

• Mute the video and confirm you can follow it entirely from the captions.
• Check captions are synchronized and accurate (aim for over 99%).
• Confirm captions can be toggled and aren’t permanently burned in.

In your framework

<video controls>
  <source src={videoSrc} type="video/mp4" />
  <track kind="captions" src={captionSrc} srcLang="en" label="English" default />
</video>

Questions