◧ UX & accessibility

Captions and transcripts: video and audio accessible to all

How to make videos and podcasts accessible: captions, transcripts and audio description, quality rules, the WebVTT format and automatic caption errors.

Video and audio are now a huge part of digital content: lessons, tutorials, interviews, podcasts, product presentations. Without text alternatives, however, they remain closed to people who cannot hear, people who cannot see the images and people who simply cannot turn the volume up. Many people watch videos on their phone with the sound off, on public transport or at the office: captions help them too.

Three different tools

It is useful to distinguish three kinds of alternative, which meet different needs.

Tool Who it mainly serves What it contains
Captions Deaf and hard of hearing people, people watching without sound Dialogue and relevant sounds, synchronised with the video
Transcript Deafblind people, people who prefer reading, people looking for a passage All the content as text, not synchronised
Audio description Blind and partially sighted people A spoken description of what is shown and cannot be understood from the audio

WCAG covers these tools in section 1.2 on time-based media. For prerecorded video, captions are required at level A (criterion 1.2.2) and audio description at level AA (criterion 1.2.5); for audio-only content, such as a podcast, a text alternative such as a transcript is required (criterion 1.2.1).

Captions done well

Captions for deaf people are not just a transcript of the words. They must convey all the sound information needed to understand.

What to include

  • the dialogue, faithful to what is said, with small simplifications only where needed for readability;
  • who is speaking, when it is not obvious from the picture, for example with the name in square brackets or a dash at the start of the line;
  • significant sounds: [phone rings], [applause], [tense music];
  • tone, when it changes the meaning: [ironically], [whispering].

How to present them

  • no more than two lines at a time, of reasonable length;
  • enough time to read them: a caption that disappears too soon is useless;
  • precise synchronisation with the audio;
  • text with good contrast, usually light on a semi-transparent dark background;
  • a position that does not cover important information, such as on-screen names or charts.

Automatic captions

Video platforms and many video conferencing tools generate automatic captions using speech recognition. They have improved a great deal and are an excellent starting point, but publishing them without review is risky. Typical errors:

  • proper names, acronyms and technical terms got wrong;
  • missing or random punctuation that changes the meaning of sentences;
  • no indication of who is speaking or of sounds;
  • difficulty with accents, background noise and several people talking at once.

An error in a key term, in a lesson or an instructional video, can make the most important passage incomprehensible. The most efficient workflow is to generate a draft automatically and then correct it by hand while listening again.

The WebVTT format

On the web, captions are added to HTML video with the track element, and the standard format is WebVTT, a simple text file:

WEBVTT

00:00:01.000 --> 00:00:04.000
[Giulia] Today we'll see how to configure the router.

00:00:04.500 --> 00:00:07.000
[notification sound]
First of all, let's connect to the interface.

The file is linked to the video like this:

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

You can add several tracks for different languages. Many video editors and transcription services export directly to WebVTT or to the SRT format, which is easy to convert.

Transcripts

A transcript is the full text of the content, placed under the video or linked in a clearly visible way. For a podcast it is the main alternative. A good transcript:

  • is divided into paragraphs, indicating who is speaking;
  • includes descriptions of sounds and, for videos, of important visual information;
  • can have headings that help people find their way through long content.

Beyond accessibility, a transcript makes content searchable and lets people find a passage without listening to everything again.

Audio description

If information appears on screen in a video without being spoken, such as a phone number, on-screen text or a step that is shown but not explained, people who cannot see miss it. Audio description recovers it with a voice that describes it in the gaps between dialogue.

Often the simplest solution is to prevent the problem during production: the person speaking in the video describes what they are doing. «Now I click Settings, at the top right» instead of «now I click here». It is a habit that improves the video for everyone else too.

Accessible video players

Finally, the player itself must be usable: play, pause, volume and caption buttons reachable with the keyboard and announced by screen readers, and no autoplay with sound.

In short

  • Captions, transcripts and audio description serve different people and do not replace one another.
  • Captions must include who is speaking and significant sounds, not just the words.
  • Automatic captions are a good draft, but they must always be reviewed before publishing.
  • WebVTT and the track element are the standard way to add captions to web video.
  • Describing out loud what you do in the video reduces the need for separate audio description.
MM
Marco Marzaduri

Marco Marzaduri works in cybersecurity, digital forensics and web development. With degrees in computer science and psychology, he combines technical analysis with an understanding of the human factor.

Read also