Videos Without Captions

Overview

All pre-recorded video with audio must have synchronized captions. This serves deaf/hard-of-hearing users and anyone in a noisy or silent environment.

The Problem

This pattern is inaccessible — avoid it.

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

The Fix

Use this accessible pattern instead.

<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. 1

   Generate a WebVTT (.vtt) or SRT (.srt) caption file for each video.

2. 2

   Add a <track> element inside <video> with kind="captions".

3. 3

   Use auto-captioning tools (YouTube, Otter.ai, Rev) then manually review for accuracy.

4. 4

   For third-party embeds (YouTube, Vimeo), enable captions in the player settings.

5. 5

   Captions must be synchronized and include non-speech sounds ('[applause]', '[music]').

Framework Notes

How to apply this fix in your stack.

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

FAQ