Audio and video with captions

The audio and video elements play media directly in the browser, with built-in controls that already work with a keyboard and screen readers. Captions are part of the same markup, through the track element, so accessible media needs no plug-ins or players.

A basic video

<video src="shaping.mp4" controls width="1280" height="720">
  <p>Your browser cannot play this video. <a href="shaping.mp4">Download the video (MP4, 18 MB)</a>.</p>
</video>

• controls shows the browser's play, pause, volume, seek and full-screen controls. Without it, visitors have no way to control the video unless you build your own buttons with JavaScript.
• width and height reserve space and prevent layout shift, just as they do for images.
• The content inside video appears only in browsers that cannot play video at all. Today that is rare, but a download link is still a useful fallback.

Multiple sources

Not every browser supports every format. Use source elements, and the browser plays the first one it can:

<video controls width="1280" height="720" poster="shaping-poster.jpg">
  <source src="shaping.webm" type="video/webm">
  <source src="shaping.mp4" type="video/mp4">
  <a href="shaping.mp4">Download the video (MP4, 18 MB)</a>
</video>

Always include type, so the browser can skip formats it cannot play without downloading them. MP4 with H.264 video is the most widely supported choice; WebM and AV1 can give smaller files where supported. Order sources from most preferred to least.

poster sets the image shown before the video plays. Without it, the browser shows the first frame once it has loaded, or a blank box.

Captions with track

Captions give the dialogue and important sounds as text, in sync with the video. They are essential for people who are deaf or hard of hearing, and widely used by everyone else in noisy places or with the sound off.

Add them with track:

<!DOCTYPE html>
<html lang="en-GB">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shaping a loaf</title>
  <style>video { max-width: 100%; height: auto; }</style>
</head>
<body>
  <h1>How to shape a loaf</h1>
  <video controls width="1280" height="720" poster="shaping-poster.jpg">
    <source src="shaping.mp4" type="video/mp4">
    <track kind="captions" src="shaping.en.vtt" srclang="en" label="English" default>
    <track kind="subtitles" src="shaping.fr.vtt" srclang="fr" label="Français">
    <a href="shaping.mp4">Download the video (MP4, 18 MB)</a>
  </video>
  <p><a href="shaping-transcript.html">Read the transcript</a></p>
</body>
</html>

Captions include sound effects and speaker names for people who cannot hear the audio. Subtitles translate the dialogue for people who can hear it but do not understand the language.

WebVTT files

Track files use the WebVTT format, a plain text file with the .vtt extension:

WEBVTT

00:00:00.000 --> 00:00:03.500
Start with the dough seam-side up.

00:00:03.500 --> 00:00:07.000
[Dough scraper taps the bench]
Fold the top third down towards you.

00:00:07.000 --> 00:00:11.000
<v Head baker>Keep the surface tight, but do not tear it.

Each cue has a start and end time, then the text. Square brackets for sounds and voice tags such as <v Head baker> for speakers are common conventions.

Automatic captions from video platforms are a starting point, not a finished product. Check them for accuracy, especially names and technical terms.

Transcripts

A transcript is the full text of the audio, plus descriptions of important visual information, on the page or a linked page. It helps people who are deafblind and use braille displays, people who prefer reading, and search engines. For audio-only content such as podcasts, a transcript is the main text alternative, since there is no video to caption.

The Web Accessibility Essentials course covers captions, transcripts and audio description in detail, including which ones different WCAG levels require.

Audio

audio works the same way, without the visual parts:

<figure>
  <figcaption>Episode 12: Why rye behaves differently</figcaption>
  <audio controls preload="none">
    <source src="episode-12.mp3" type="audio/mpeg">
    <source src="episode-12.ogg" type="audio/ogg">
    <a href="episode-12.mp3">Download episode 12 (MP3, 24 MB)</a>
  </audio>
</figure>
<p><a href="episode-12-transcript.html">Read the transcript</a></p>

MP3 and AAC are the safest audio formats; Ogg and Opus are good additional options.

preload

preload hints how much the browser should download before someone presses play:

Browsers treat preload as a hint and may ignore it, for example on mobile data.

Autoplay, muted, loop and playsinline

<video autoplay muted loop playsinline width="640" height="360" poster="oven-poster.jpg">
  <source src="oven-loop.mp4" type="video/mp4">
</video>

• autoplay starts playback without a click. Browsers block autoplay with sound in most cases, so autoplaying video almost always needs muted as well.
• loop restarts the video when it ends.
• playsinline asks mobile browsers, especially on iPhone, to play the video in the page rather than switching to full screen.

Summary

• Add controls so people can play, pause and adjust media.
• List source elements with type, most preferred format first, and include a download link as fallback.
• Add captions with <track kind="captions"> and a WebVTT file; check automatic captions for accuracy.
• Provide transcripts, especially for audio-only content.
• Use preload="metadata" or none, and only autoplay muted media that can be paused.