Silvia Pfeiffer
LCA Multimedia Miniconf

HTML5 Video Accessibility Update

Slides available at

Who am I?

  • Video Technologist
  • W3C and WHATWG video standards
  • HTML5 accessibility Task Force
  • Google video accessibility contractor
  • Mozilla video accessibility contractor
  • Caption research at CSIRO
Silvia Pfeiffer photo @silviapfeiffer

Why Video in Adobe Flash is a problem

No universal accessibility support

Screenreader ignores Flash Video

Safari and VoiceOver

Screenreader trapped in Flash

Safari and VoiceOver

How is HTML5 video better

  • Native element on the HTML page.
  • Makes use of existing HTML features, including accessibility.
  • Develop your own custom, accessible controls.
<video src="video.webm">

YouTube with custom controls

Safari and VoiceOver

Native HTML5 Video Controls

Simple to add with the @controls attribute.

<video controls src="video.webm">

But: how accessible are they right now?

Accessibility requirements of
native transport controls

  • tab accessible play, transport bar and volume buttons
  • space bar for play/pause toggle
  • left/right arrow for navigation
  • up/down arrow for volume
player controls with play, transport bar, and volume button highlighted

Accessible HTML5 video controls

Opera rules the lot

More native HTML5 video controls

IE9 and Firefox

Keyboard control, but no tab access

Chrome and Safari are at the bottom of the class

  • No tab access
  • No keyboard access to controls

Further work: No browser exposes controls to Screenreaders yet

The aspiration: YouTube


HTML5 and Captioning

Video side-lines deaf and
hard-of-hearing users

two girls signing to each other

Photo by daveynin on Flickr

HTML5 introduces markup for captions and subtitles

<video controls src="video.webm">

  <track kind="captions"  srclang="en" src="video_cc_en.vtt">
  <track kind="subtitles" srclang="de" src="video_sub_de.vtt">



Associate caption files with a video through markup.

HTML5 introduces WebVTT for caption authoring

New caption file format

Example: video_cc_en.vtt


00:00:13.000 --> 00:00:16.100
I heard about this <>arduino</c> project,
and I saw it online - 

00:00:16.100 --> 00:00:20.100
- and I said '<b>Wow!</b> a lot of people are starting to talk about this.
I should <i>check it out</i>!'


Polyfill Captionator.JS by Christopher Giffard

WebVTT capabilities

More in WebVTT talk

Status of Implementation

W3C Text Tracks Community Group

HTML5 and Audio Descriptions

Video side-lines blind and
vision-impaired users

blind icehockey referee with stick

Photo by Ed Yourdon on Flickr

HTML5 introduces markup for descriptions in text

<video controls src="video.webm">

  <track kind="descriptions"  srclang="en" src="video_audesc_en.vtt">



Using WebVTT for description authoring



00:00:00.000 --> 00:00:05.000
The orange open movie project presents

00:00:05.010 --> 00:0:12.000
Introductory titles are showing on the background of a water pool with fishes
swimming and mechanical objects lying on a stone floor.

00:00:12.010 --> 00:00:14.800
title: elephants dream

WebVTT descriptions in HTML5

Status of Implementation

DAISY Style navigation

HTML5 introduces markup for "chapters"

<video controls src="video.webm">

  <track kind="chapters"  srclang="en" src="video_chapters_en.vtt">



Using WebVTT for chapter authoring



00:00:00.000 --> 00:00:18.000
Introductory Titles

00:00:18.001 --> 00:01:10.000
The Jack Plugs

00:01:10.001 --> 00:02:30.000
Robotic Birds

WebVTT chapters in HTML5


    Status of Implementation

    Synchronizing multiple media files

    Audio Description Audio File

    @mediagroup attribute creates a media controller

    Synchronizes different media elements together

    <video controls src="video.webm" mediagroup="a11y">
    <audio src="audio.ogg" mediagroup="a11y">

    Sign Language Video File

    Two videos get controlled together

    through controls on first video

    <video controls src="video.webm" mediagroup="a11y">
    <video src="sign.webm" mediagroup="a11y">

    Sign Language Video using a Media Controller


    Note: Bug in Google Chrome, so use Firefox to test.

    Status of Implementation

    In summary...

    HTML5 video is good news for Accessibility

    Have patience with the browser implementers

    Or help with

    Thank you @silviapfeiffer