# Video elements must have captions via <track kind='captions'> or <track kind='subtitles'>.

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/accesslint/0.16/time-based-media/video-captions
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

Videos that contain audio must include captions so that people who are deaf or hard of hearing can access the spoken dialogue and other meaningful sounds. When a `<video>` element lacks a `<track>` element with `kind="captions"` or `kind="subtitles"`, this content is completely unavailable to those users.

Captions are distinct from subtitles in some contexts, but HTML treats both `kind="captions"` and `kind="subtitles"` as valid ways to provide text synchronized with video audio. Captions typically include not just dialogue but also descriptions of relevant sound effects, music, and speaker identification. Subtitles usually focus on translating dialogue. For accessibility purposes, either kind satisfies the requirement as long as the text track conveys the same information as the audio.

This rule maps to WCAG 2.0 Success Criterion 1.2.2: Captions (Prerecorded), which is a Level A requirement. Level A is the minimum conformance level, meaning any site that claims WCAG conformance must meet it. The criterion exists because audio content in video is a barrier for users who cannot hear it, and captions are the established solution.

Beyond deaf and hard of hearing users, captions also help people watching video in noisy environments, non-native speakers of the audio's language, and people with cognitive disabilities who benefit from reading along with spoken content.

## How to fix this

Add a `<track>` element inside the `<video>` element that points to a caption file in WebVTT format (`.vtt`). Set the `kind` attribute to `"captions"` (or `"subtitles"` if appropriate). The caption file should include:

- All spoken dialogue, with speaker identification when multiple speakers are present.
- Descriptions of meaningful non-speech audio such as sound effects, music, or silence that carries meaning.

If the video has no audio track at all, this rule does not apply. If the video is a media alternative for text content already present on the same page (and is labeled as such), captions are also not required, though they are still recommended.

To create a WebVTT caption file, write a plain text file with the `.vtt` extension. Each caption entry has a timestamp range and the corresponding text:

```
WEBVTT

00:00:01.000 --> 00:00:04.000
[Background music playing]

00:00:04.000 --> 00:00:08.000
Welcome to our guide on keyboard accessibility.
```

## Examples

### Video without captions (incorrect)

This video has no `<track>` element. Users who cannot hear the audio have no way to access that content.

```html
<video src="product-demo.mp4" controls>
</video>
```

### Video with captions track (correct)

A `<track>` element with `kind="captions"` provides synchronized text for the audio content.

```html
<video src="product-demo.mp4" controls>
  <track src="product-demo-captions.vtt" kind="captions" srclang="en" label="English captions">
</video>
```

### Video with subtitles track (also correct)

Using `kind="subtitles"` is an acceptable alternative. Include the `srclang` and `label` attributes so users can identify the track.

```html
<video src="product-demo.mp4" controls>
  <track src="product-demo-en.vtt" kind="subtitles" srclang="en" label="English">
</video>
```

### Video that is a labeled media alternative for on-page text (correct)

When a video repeats information already provided as text on the same page, and the page clearly identifies the video as an alternative, captions are not strictly required. The surrounding text must convey the same information as the audio.

```html
<p>
  Keyboard accessibility means every interactive element on a page can be
  reached and operated with the keyboard alone. Watch the video below for
  the same information in video form.
</p>
<video src="keyboard-accessibility.mp4" controls>
</video>
```

Even in this case, adding captions is still good practice because it improves the experience for all users.