Video

Accessibility matters

Accessibility isn't a feature. Users who can't hear or see won't be able to experience a video at all without captions or descriptions. The time it takes to add these to your video is much less than the bad experience you are delivering to users. Provide at least a base experience for all users.

In this guide

Include captions to improve accessibility

To make media more accessible on mobile, include captions or descriptions using the track element.

Remember

The track element is supported on Chrome for Android, iOS Safari, and all current browsers on desktop except Firefox (see caniuse.com/track ). There are several polyfills available too. We recommend Playr or Captionator .

Using the track element, captions appear like this:

Screenshot showing captions displayed using the track element in Chrome on Android

Add track element

It’s very easy to add captions to your video – simply add a track element as a child of the video element:

                              
                                    <video controls>
        <source src="chrome.webm" type="video/webm" />
        <source src="chrome.mp4" type="video/mp4" />
      <track src="chrome-subtitles-en.vtt" label="English captions"
             kind="captions" srclang="en" default>
      <p>This browser does not support the video element.</p>
    </video>
    
                               View full sample

The track element src attribute gives the location of the track file.

Define captions in track file

A track file consists of timed ‘cues’ in WebVTT format:

WEBVTT

00:00.000 --> 00:04.000
Man sitting on a tree branch, using a laptop.

00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.

...