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

@silviapfeiffer

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">
</video>
      

YouTube with custom controls

Safari and VoiceOver

Native HTML5 Video Controls

Simple to add with the @controls attribute.

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

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

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

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">

</video>

      

Associate caption files with a video through markup.

HTML5 introduces WebVTT for caption authoring

New caption file format

Example: video_cc_en.vtt

WEBVTT

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

2
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>!'
      

WebVTT in HTML5

HTML5 introduces markup for descriptions in text

<video controls src="video.webm">

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

</video>

      

Using WebVTT for description authoring

video_audesc_en.vtt

WEBVTT

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

2
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.

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

HTML5 introduces markup for "chapters"

<video controls src="video.webm">

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

</video>

      

Using WebVTT for chapter authoring

video_chapters_en.vtt

WEBVTT

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

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

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

WebVTT chapters in HTML5

Sign Language Video using a Media Controller

Uses https://github.com/rwldrn/mediagroup.js

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