Create accessible videos with HTML5

By Léonie Watson on December 11, 2012 | 1 comment

Knowledge needed: Basic HTML
Requires: Video content, captions file
Project time: Couple of hours

Léonie Watson of Nomensa examines developments pointing the way towards genuinely inclusive HTML5 video experiences

With HTML5 it’s been possible to add video content to a web page without a plug-in for a while now. HTML5 also makes it easier to provide alternative formats for your content.

The <video> element embeds multimedia content into the page. At its most simple, it uses the src attribute to point to the video source file.

<video src="movie.webm" controls></video>

When present, the controls attribute indicates that the browser should display its own set of UI controls for functions such as play/pause. If you script your own set of UI controls, the attribute provides a fallback when scripting is disabled in the browser. You can also provide fallback content for legacy browsers. This might be static text, a link to download the video file, or advice on how to upgrade to an HTML5 aware user agent.

<video src="movie.webm" controls>
Fall back content for legacy browsers.
</video>

The poster attribute can be used to display a static placeholding image. There is still some discussion about the way poster is handled within the HTML5 specification, but for now it’s an attribute of the <video> element itself.

<video src="movie.webm" poster="image.jpg" controls>
Fall back content for legacy browsers.
</video>

The <track> element is a child of the <video> element used to point to an external timed text file providing supplementary information for the video. It uses the kind attribute to specify which type of information to provide.

Subtitles (default): gives dialogue translation when sound is not understood.
Captions: full audio transcription when sound is unavailable or can’t be heard by the viewer.
Descriptions: transcription of visual content for conversion into synthetic speech.
Chapters: provides a navigation mechanism for browsing the video content through an interactive list in the UI.
Metadata: used to provide access to tracks for use with scripts.

<video src="movie.webm" poster="image.jpg" controls>
<track kind="captions" src="captions.vtt">
Fall back content for legacy browsers.
</video>

This example uses the Web Video Text Tracks (Web VTT) format to provide the captions file. Web VTT enables you to map a time cue to a piece of text (transcribed from the original sound dialogue). Tom Leadbetter explores Web VTT in more detail on the HTML5 Doctor website.

The <video> element is supported in all current browsers. Sadly, support for the <track> element and Web VTT lags behind. Browser vendors are working on both though, so it won’t be long until we’re closer to truly inclusive HTML5 video.

1 comment

Comment: 1

As one of millions of deaf and hard of hearing people around the world, I get frustrated with the lack of GOOD quality captions and transcripts for videos and podcasts. It's not enough to just have captions/transcripts, they also need to be of the acceptable quality - 100% error free, including proper punctuation, speaker identifications, sound descriptions, etc. - that can only be done by humans. Good quality captions are as important as good quality audio. While I applaud YouTube for adding auto captions, that tool is not the "final" product and needs to be either manually edited or replaced by professional human-made transcripts.