Search topics
Videos without captions, or with unchecked automatic ones
A how-to video gives its instructions out loud, with no captions, or only speech-recognition captions that nobody checked.
<video src="brew-guide.webm" controls> The problem
People who can't hear the video miss everything it says, and unchecked automatic captions tell them the wrong thing.
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".
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.
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.
3 of 10 groups affected
- No vision (not affected)
- Low vision (not affected)
- Colour vision (not affected)
- No hearing (affected)
- Hard of hearing (affected)
- No speech (not affected)
- Motor (not affected)
- Reach, strength (not affected)
- Cognitive (affected)
- Seizures (not affected)
- Without hearing Everything the narrator says is lost: the amounts, the temperature, when to stop. Wrong automatic captions are worse than none, because they read as the recipe.
- Limited hearing A quiet voice, a fast talker or music under the speech is hard to follow. People who hear some of it use captions to fill the gaps and to check numbers they half caught.
- Limited language, cognitive and learning abilities Reading along while listening helps people who process speech slowly, or who watch in a second language, and lets them check a step without replaying it.
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.
Try it
Mute the brewing video and play it. Can you follow the recipe?
In Broken 1 the video has no captions, so its player has no captions button. In Broken 2, turn on the automatic captions with the player’s captions button and compare them with the narration under the video. Apply a fix to see captions a person checked, in a track or drawn into the picture.
Broken Can you fix this?
How to brew our house blend
The narration, word for word
- Here’s how to brew our house blend.
- Use 15 grams of coffee for 250 millilitres of water.
- After the water boils, let it cool for 30 seconds.
- Pour in three slow stages, and stop at three minutes.
- [Kitchen timer rings]
The fix
Give every video with speech captions that a person has written or checked, in a track viewers turn on or drawn into the picture.
- 1Caption every word said and every sound that matters, in time with it.
- 2Automatic captions count only once a person has corrected them.
- 3Name the speaker when they are off screen, and put sounds in square brackets.
A video with no captions
<h2>How to brew our house blend</h2><video controls preload="metadata" src="brew-guide.webm" poster="brew-guide.jpg"></video>A captions track, written or checked by a person
<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>Why this fix: Keep words as text
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.
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.
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.
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 acrossoriginattribute 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.
Fixing this with an AI coding assistant? Get this guide as Markdown
Verify the fix
4 checks, no mouse.
Test with: Sound off, Keyboard, Caption settings
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. Test the complete journey with the people who will watch it, and with the players and platforms the video really plays in.
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.
References
- WCAG Understanding: captions-prerecorded (opens in a new tab)
- WCAG Understanding: captions-live (opens in a new tab)
- w3.org: captions (opens in a new tab)
- WCAG Technique H95 (opens in a new tab)
- WCAG Technique G87 (opens in a new tab)
- WCAG Technique G93 (opens in a new tab)
- WCAG Technique F8 (opens in a new tab)
- developer.mozilla.org: track (opens in a new tab)
- developer.mozilla.org: WebVTT_API (opens in a new tab)
Keep this fixed as your code changes.
Turn guides like this into rules your coding agents and CI follow, then have the result retested with a keyboard and screen readers.