Captions Video

title: "Captions for Video — Adding Closed Captions to Video Content" description: "Learn how to add closed captions to video using WebVTT tracks with the track element, creating accessible video content for deaf and hard of hearing users." weight: 2 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, media]

Closed captions use the HTML track element with WebVTT files to provide synchronized text for video dialogue and audio information.

## What You'll Learn

How to create WebVTT caption files and add them to video using the track element.

## Why It Matters

Captions are required by WCAG 2.2 (Success Criterion 1.2.2). Without them, deaf and hard of hearing users cannot access video audio content.

## Real-World Use

A user watches a tutorial video on DodaTech. Captions appear at the bottom showing the narrator's speech: "To configure the settings, click the gear icon in the upper-right corner."

## Caption Track

```html
<video controls>
  <source src="tutorial.mp4" type="video/mp4">
  <track kind="captions" src="captions-en.vtt"
         srclang="en" label="English captions" default>
  <track kind="captions" src="captions-es.vtt"
         srclang="es" label="Espanol subtitulos">
</video>

WebVTT File

WEBVTT

00:00:01.000 --> 00:00:05.000
Welcome to the DodaTech tutorial on accessibility.

00:00:06.000 --> 00:00:10.000
Today we will learn how to add captions to your videos.

00:00:11.000 --> 00:00:15.500
First, create a WebVTT file with your caption text.

00:00:16.000 --> 00:00:20.000
Each caption cue has a start and end timestamp.

00:00:21.000 --> 00:00:25.000
Place the VTT file on your server and add a track element.

00:00:26.000 --> 00:00:30.000
That is all there is to it!

Styling Captions

/* Custom caption styling */
video::cue {
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 1.2em;
  font-family: sans-serif;
  text-shadow: none;
}

Common Mistakes

1. Missing track element

Without the track element, users cannot enable captions.

2. No default track

Use the default attribute on the primary language track so captions are enabled by default.

3. Incorrect WebVTT format

VTT files must have the correct header (WEBVTT) and timestamp format (HH:MM:SS.mmm).

4. Timestamps not synchronized

If captions are out of sync, they distract rather than help. Review timing carefully.

5. Only one language track

Provide captions in the video language at minimum. Multiple languages are better.

Practice Questions

1. What HTML element adds captions to video? The track element inside the video element, with kind="captions".

2. What file format do captions use? WebVTT (.vtt) format, which has timestamp lines followed by caption text.

3. What attribute enables captions by default? The default attribute on the track element makes it the default caption choice.

Challenge: Create a 30-second test video with a WebVTT caption file. Add the track element and verify captions appear correctly.

FAQ

Mini Project

Create a WebVTT caption file for a 1-minute video. Include at least 10 cues with proper timestamps. Add the track element with default attribute.

What's Next

Learn the difference between Subtitles vs Captions and when to use each.