# Videos without captions, or with unchecked automatic ones

Source: https://easeweb.dev/learn/video-captions
Topics: Images and media > Videos have captions (WCAG 1.2.2, 1.2.4)
The fix: Write the captions, or correct the automatic ones word for word, including sounds that matter. Then either add them as a captions track that viewers turn on in the player, or draw them into the picture so they always show.
Test with: sound off, keyboard, caption settings
References: https://www.w3.org/WAI/WCAG22/Understanding/captions-prerecorded.html https://www.w3.org/WAI/WCAG22/Understanding/captions-live.html https://www.w3.org/WAI/media/av/captions/ https://www.w3.org/WAI/WCAG22/Techniques/html/H95 https://www.w3.org/WAI/WCAG22/Techniques/general/G87 https://www.w3.org/WAI/WCAG22/Techniques/general/G93 https://www.w3.org/WAI/WCAG22/Techniques/failures/F8 https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/track https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API

This is a recreated teaching example, not a finding about a named client. The code is a starting pattern: test it in your own product. No completed assistive-technology test is claimed here.

## What happens

A coffee roaster's product page has a short brewing guide on video. The picture is coffee beans; everything useful is in the narration: 15 grams of coffee for 250 millilitres of water, let the water cool for 30 seconds after it boils, pour in three stages, stop at three minutes, and then the kitchen timer rings. The player has no captions button, because the video has no captions. On a second version of the page, the shop has uploaded the video with the captions its video platform made by speech recognition. They are there, and they say "fifty grams" and "thirteen seconds".

## Why it fails

Success criterion 1.2.2 asks for captions for all prerecorded audio in synchronised media: every word spoken, who is speaking when that isn't clear, and the sounds that carry meaning, such as the timer. A video with no captions fails it outright. Captions that change the numbers fail it too: W3C's guidance is that automatic captions don't meet the requirement unless someone has confirmed they are fully accurate, and technique F8 names captions that leave out dialogue or important sounds as a failure. 1.2.4 asks the same of live video, in real time.

## Who is affected

Anyone watching in a quiet office, on a train or with the sound off on a phone meets the same silence, and often moves on rather than turn the sound up.

## What automation and AI miss

axe looks for a `<track kind="captions">` inside each `<video>`. When there is none, it asks a person to check, because the captions might be drawn into the picture. When there is one, it passes, without loading the file or reading a word of it. It never sees a YouTube or Vimeo player at all. Nothing automated can tell whether "fifty" should be "fifteen". AI tools generate captions readily, which is how the second version happened: speech recognition is the step before captioning, not the captioning itself.

## Before: a video with no captions

```html
<h2>How to brew our house blend</h2>
<video controls preload="metadata"
  src="brew-guide.webm" poster="brew-guide.jpg"></video>
```

The narration is the only place the recipe exists. With no captions track, the player offers no captions button, and someone who can't hear gets coffee beans for 24 seconds.

## Before: automatic captions nobody checked

```html
<video controls preload="metadata"
  src="brew-guide.webm" poster="brew-guide.jpg">
  <track kind="captions" srclang="en"
    label="English (auto-generated)" src="brew-guide.auto.vtt">
</video>
```

```vtt
WEBVTT

00:04.200 --> 00:09.600
use fifty grams of coffee for
250 milliliters of water

00:10.200 --> 00:14.600
after the water boils let it
cool for thirteen seconds
```

The track is real and the button appears, so every scanner passes it. But speech recognition heard "fifteen" as "fifty" and "thirty" as "thirteen", left out the timer, and wrote "poor" for "pour". Someone who follows these captions makes a different, worse cup of coffee.

## After: a captions track, written or checked by a person

```html
<video controls preload="metadata"
  src="brew-guide.webm" poster="brew-guide.jpg">
  <track kind="captions" srclang="en" label="English"
    src="brew-guide.en.vtt">
</video>
```

```vtt
WEBVTT

00:01.000 --> 00:03.700
Here’s how to brew our house blend.

00:04.200 --> 00:09.600
Use 15 grams of coffee
for 250 millilitres of water.

00:10.200 --> 00:14.600
After the water boils,
let it cool for 30 seconds.

00:15.200 --> 00:19.700
Pour in three slow stages,
and stop at three minutes.

00:20.300 --> 00:22.300
[Kitchen timer rings]
```

The file carries every sentence and the timer, in time with the speech, and the player shows its captions button for the track. Because the captions are text drawn by the browser, viewers turn them on or off and their system caption settings can make them larger, change their colours or give them a solid background. Starting from the automatic file is fine; what makes it captions is a person correcting it against the audio.

## After: captions drawn into the picture

```html
<video controls preload="metadata"
  src="brew-guide.open.webm" poster="brew-guide.jpg"></video>
```

The captions are part of every frame, edited into the video before export (open captions). They show for everyone, in every player, including social platforms that drop caption files, so the video needs no track. This passes 1.2.2 only while the drawn captions are accurate and complete, and some viewers lose out: nobody can enlarge or recolour them, they shrink with the video on a phone, they can't be turned off when they cover part of the picture, and browser translation and find in page can't reach them.

## Which option to use

Both pass 1.2.2 when the words are right. Use the captions track: it does the same job with a small text file, and leaves viewers in control of size, colour and whether the captions show, which the drawn captions can't do. Draw the captions into the picture only where a track can't travel, such as a clip posted to a platform that ignores caption files, and keep a track version of the same video on your own site.

## Implementation decisions

Where the video plays changes where the captions file goes:

- Your own `<video>`: a `<track>` per language, as above. A captions file on another origin needs CORS headers and a `crossorigin` attribute on the video, or the browser drops the track without an error.
- An embedded YouTube, Vimeo or Wistia player: upload the corrected file to the video on that platform, or edit the automatic track there and publish the edited one. The embed code doesn't change. Unpublish the automatic track where the platform allows it, so its captions menu offers only the checked one.
- A custom player with its own buttons: it needs a captions button of its own, named and reachable from the keyboard, because the browser's captions button goes with the native controls.

Use `kind="captions"` for the language that is spoken. `kind="subtitles"` is meant for translations, written for viewers who can hear the sound, so they leave out sound cues. Add translated subtitles as further tracks if you have them; they don't replace the captions.

A `default` attribute on the track turns the captions on when the video starts. That suits a video that starts muted, where nobody will hear it anyway. For a video people choose to play, leave it off and let viewers, or their system settings, decide.

Captions are more than a transcript in time. Name a speaker who is off screen or who changes, put meaningful sounds in square brackets ("[Kitchen timer rings]", "[Laughter]"), and keep each cue to two short lines on screen long enough to read. A transcript under the video is welcome, and it is how an audio-only clip meets 1.2.1, but it is not a fix for 1.2.2: it isn't synchronised, so viewers have to choose between the picture and the words.

Live video, such as a launch stream or a webinar, falls under 1.2.4. It needs real-time captions from a human captioner, or from a live captioning service you have checked is accurate enough for your speakers and vocabulary. When the stream ends and the recording stays on the page, it becomes prerecorded video and needs a corrected captions file under 1.2.2.

One exception is narrow: a video that only repeats text already on the page, and says so, is a media alternative for text and needs no captions. A video with no speech and no meaningful sound, such as a silent product loop, needs none either.

## Verify the fix

1. Turn the sound off and watch the whole video. Every word, every speaker change and every sound that matters reaches you as captions, in time with it.
2. Turn the sound on and read the captions against the speech, word for word: numbers, measurements, product names and negatives first.
3. Using only the keyboard, reach the player and turn the captions on and off. Captions drawn into the picture have no switch: check that they show from the first word instead.
4. In the system caption settings (Windows: Accessibility, Captions; macOS: Accessibility, Captions), choose a larger caption style and play the video again. Track captions take the style. Drawn captions don't, which is the limit of that fix: check they are still readable at phone width.

Record the OS, browser and assistive-technology versions, the build, the date, and the actual result of each step. Repeat whenever the video or its captions file is replaced.

## Limits

This is a starting pattern, not a guarantee for every application. Captions carry what is heard. What is only shown, such as a pouring technique or text on screen that nobody reads out, needs audio description, a separate requirement (1.2.3 and 1.2.5). A video that starts by itself with sound is covered in [autoplaying sound with no way to stop it](/learn/autoplay-audio). Test the complete journey with the people who will watch it, and with the players and platforms the video really plays in.