How to add captions to a video on your own page.

What captions need to contain

W3C defines captions as a text version of the speech and the non-speech audio information needed to understand the content. The related WCAG explanation adds that this goes beyond dialogue: sound effects, music, laughter and speaker identification all count when they matter to the meaning.

W3C separates captions from subtitles. Captions are in the same language as the audio; subtitles translate it into another language. This guide is about captions.

Do not trust automatic captions as they come

W3C states that automatically generated captions do not meet user needs or accessibility requirements unless they are confirmed to be fully accurate. Its example shows a missing “not” reversing the meaning of a safety warning.

If a tool gives you a first draft, treat it as a draft. Listen to the whole recording with the text in front of you, and fix names, numbers and negatives first.

Write the WebVTT file

W3C names WebVTT as the most common caption format on the web; SRT and TTML also exist. According to MDN, the only required part of a WebVTT file is the line WEBVTT. Cues follow after a blank line. Each has a start time and end time joined by -->, written as mm:ss.ttt or hh:mm:ss.ttt, then the text. Cues are separated by blank lines, and a <v Name> tag can mark the speaker.

Save it as a plain text file with the .vtt extension, for example captions-en.vtt.

A fictional example

Imagine a fictional 12-second video called “Rename the file”. Its caption file would hold a WEBVTT line, then three cues, each a timing line followed by its text, with a blank line between cues.

Cue 1: 00:00.500 --> 00:03.000, text “<v Narrator>Which file is the current one?</v>”. Cue 2: 00:03.200 --> 00:05.000, text “[A soft chime]”. Cue 3: 00:05.200 --> 00:09.000, text “<v Narrator>Put the date and version in the name.</v>”.

The video and times are invented for illustration.

Attach the file to the video

MDN describes the track element as a child of video that supplies timed text. Use kind="captions" for captions, src for the .vtt file, srclang for the language and label for the name shown in the player menu. The default attribute turns a track on automatically; only one per media element can have it.

Example: <video controls> with a <source> for the video file, followed by <track kind="captions" src="captions-en.vtt" srclang="en" label="English" default>. Keep the native controls so viewers can switch captions on and off. W3C calls this style “closed captions”; open captions are burned into the picture and cannot be turned off.

Check before publishing

This checklist is our suggested routine based on the W3C and MDN pages. It is not a conformance test, and we have not tested the example file in any particular browser or player. Line length and timing conventions vary by platform, and W3C’s captions page leaves those details to its separate transcribing guidance.

• Do the captions match what is said, including numbers, names and negatives?
• Does each important sound or speaker change appear in the text?
• Do the captions appear at the right moments when you play the video?
• Can you turn them on and off in the player, and does the label read clearly?
• Is a transcript on the same page for readers who prefer text?

Use this next

• How to write a transcript
• How to write alt text
• Check the links in your article before publishing