Silvia Pfeiffer
OZeWAI 2011

HTML5 Video Accessibility

Slides available at http://www.html5videoguide.net/presentations/OZeWAI2011/

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
definitive guide to html5 video book

Why you should care
about
video on the Web

Financial Software Online

Xero.com website with video on homepage myob.com.au traditional website

Logo Design Businesses

99design.com website with video on homepage aurora.com.au traditional website

Dress Shopping Online

99dresses.com website with video on homepage myers.com.au traditional website

What do Websites use video for?

Reason #1: Education

person reading a book

Photo by Gael Martin on Flickr

A picture says more than 1000 words, and a video says more than 1000 pictures.

Reason #2: User attention

car with many bumper stickers

Photo by Richard Masoner on Flickr

Dealer.com did a study in 2010 for inventory videos:
67.5% higher Time on site, 20% higher conversion rates.

Reason #3: Findability / SEO

google search results for candles search

A Forrester study from Jan 2010 suggests that a product page with a video on it is 53 times more likely to achieve a page one listing on Google.

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

Join http://www.youtube.com/html5


Did you notice what else YouTube provides for Accessibility?

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

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


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

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

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

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

    00:00/00:00

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

<audio src="audio.ogg" mediagroup="a11y">
</audio>

    Sign Language Video File

    Two videos get controlled together

    through controls on first video

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

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

    Status of Implementation

    In summary...

    HTML5 video is good news for Accessibility

    Have patience with the browser implementers

    Or help with

    Thank you

    silviapfeiffer1@gmail.com @silviapfeiffer http://blog.gingertech.net/