What captions and transcripts do

How it works

A video tells its story through picture and sound. People who can't hear need the sound as text; people who can't see need the important visual content as speech or text. There are three tools for this:

• Captions show speech and relevant sounds (“[phone rings]”) in sync with the picture. They also help everyone watching without sound, on the train for instance.
• Transcripts give the content of a podcast or video as text on the page. Search engines can read them.
• Audio description describes visual content you can't get from the soundtrack.

In HTML a caption file in WebVTT format is attached to the video as a track:

<video controls>
  <source src="signup.mp4" type="video/mp4">
  <track kind="captions" src="signup.en.vtt" srclang="en" label="English">
</video>

The file itself is plain text with timestamps:

WEBVTT

00:00:01.000 --> 00:00:04.000
Welcome! In two minutes we'll show you how to sign up.

WCAG 2.2 requires captions for prerecorded video (success criterion 1.2.2), a transcript or alternative for audio-only content (1.2.1), and a way to stop sound that plays by itself for more than three seconds (1.4.2).

What matters

• A caption track. kind="captions" (with sounds) or kind="subtitles" (speech only) on the video element. Captions burnt into the picture help too, but can't be switched off or detected automatically.
• Checked texts. Automatic captions are a start; names, technical terms and numbers often go wrong. Proofread them.
• No sound by itself. A video or audio with autoplay needs muted. Otherwise it drowns out the screen reader, and its users can hardly find the stop button.
• Controls. With controls the video gets the browser's own player controls, which work with the keyboard.

How to set it up

For videos on YouTube or Vimeo you upload captions there or correct the automatic ones; they then show in the embed too. These videos sit in an iframe, and the check can't see their captions. Self-hosted videos get the VTT file through the video block of your CMS (in WordPress: “Text tracks”) or directly in the HTML. A transcript goes below the video or podcast episode as text.