WebsightWho it affects
Someone who is deaf watching the museum's exhibition tour sees the curator talking and pointing at objects, and has no idea what is being said.
Someone watching on a train with no headphones has the sound off. With captions they watch; without, they scroll past.
Someone whose first language is not English follows spoken English much more easily when they can read it at the same time.
Broken versus fixed
The broken markup is shown as code rather than rendered, because the effect is in how it is announced or handled, not how it looks.
<video src="tour.mp4" controls width="320"></video>The player only shows a captions button if a track exists. Here there is none, so there is nothing to switch on.
<video src="tour.mp4" controls width="320">
<track kind="captions" src="tour.en.vtt" srclang="en" label="English" default>
</video>The browser shows a captions button and draws the text from tour.en.vtt over the picture.
Test it by hand in two minutes
- Play the video with the sound muted. Can you follow what is said?
- Look for a CC or subtitles button on the player and turn it on. The words should match the speech and include sounds that matter.
- Right click the video, choose Inspect, and check for a track element with kind="captions". Open its src in a new tab: you should see WEBVTT on the first line.
- For embedded players such as YouTube, check the captions were uploaded or corrected, not auto-generated and left.
The fix
<video src="tour.mp4" controls></video><video src="tour.mp4" controls>
<track kind="captions" src="tour.en.vtt" srclang="en" label="English" default>
</video>A WebVTT file starts with the line WEBVTT, then timestamps and text. Most editing tools export it. Captions include speech and relevant sound; subtitles are speech only.
Several languages
<track kind="captions" src="tour.en.vtt" srclang="en"><track kind="captions" src="tour.en.vtt" srclang="en" label="English" default>
<track kind="captions" src="tour.cy.vtt" srclang="cy" label="Cymraeg">One track per language. The label is what appears in the player's menu.
Video with no sound
<video src="timelapse.mp4" controls></video><video src="timelapse.mp4" controls aria-describedby="tl"></video>
<p id="tl">Time-lapse of the new gallery being built. This video has no sound.</p>Captions make no sense for a silent video. Say it has no sound so nobody wonders if their speakers are broken. The scanner will still flag it; mark it as reviewed.
Common mistakes
- Burning captions into the picture only; they cannot be resized, searched or turned off, and the scanner cannot see them.
- Using kind="subtitles" when the track also describes sounds; the check looks for captions.
- Uploading auto-generated captions without reading them.
- Pointing the track at a file that returns a 404, which passes the scanner and fails the viewer.
WCAG criteria this rule maps to
axe-core tags this rule as WCAG 2.2 level A. It is one of the checks for:
- 1.2.2 Captions (Prerecorded) (level A). Official W3C text.
The scanner checks each video element for a track with kind="captions". It cannot load the file, check it is in sync, or tell whether the video has any speech to caption. Embedded players inside iframes are not checked at all. Automated tools find only part of the accessibility problems on a page; a pass on this rule is not a pass on the criterion.
Related rules
audio-caption
An audio element plays sound and nothing else, so anyone who cannot hear gets nothing.
A
Sound must not start playing on its own
no-autoplay-audio
If a page starts playing sound by itself and keeps going for more than three seconds, it needs a way to stop or mute it before anything else on the page.
A
Frames must have a title
frame-title
An iframe is a window onto another page: a map, a video, a booking form, a payment field.
A
Embedded objects must have alternative text
object-alt
The object element embeds another file in the page: a PDF timetable, an SVG, an audio file, sometimes a whole page.