Captions and transcripts

Media controls let someone operate a video. Captions let them understand its audio.

Add captions with a track element:

<video controls src="repair.mp4">
  <track
    kind="captions"
    src="repair-en.vtt"
    srclang="en"
    label="English"
    default
  >
</video>

The caption file uses WebVTT. A small file looks like this:

WEBVTT

00:00:00.000 --> 00:00:03.500
Place the bicycle on a stable surface.

00:00:03.500 --> 00:00:06.000
[bicycle bell rings]

Captions include spoken words and meaningful sounds. Identify the speaker when the image does not make that clear.

Do not publish automatic captions without reviewing them. Names, technical words, and punctuation often need correction.

Add a transcript

A transcript presents the same information as normal page text. It helps people who prefer reading, use translation tools, or cannot play the media.

Link it near the media:

<p><a href="repair-transcript.html">Read the transcript</a></p>

Audio-only content needs a transcript too. If the recording explains something visual, describe that information in the transcript.

Captions and transcripts are not interchangeable. Captions follow the timing of the media. A transcript is easier to scan and search.

The simplest rule is this: do not make sound the only way to receive important information.