Browsers and HTML5 video accessibility

Silvia Pfeiffer, LCA Multimedia Miniconf 2013

Captions and Subtitles

Example 1: Subtitles for a music video

Note:

Works in IE10, Opera, Chrome, Safari (Firefox: TBD)
Subtitles play in fullscreen
Issue: Overlap between subtitles and on-screen text - fix with cue settings "line".
Feature: Karaoke-style paint-on - use time stamps

Which markup can be used in cues:

<c> for class span
<b> for bold text
<i> for italics text
<u> for underline text
<ruby> <rt> for ruby text
<v> for voice span
<lang> for language span
<00:00:00.000> for timestamp
escapes: & < > &lrm; &rlm;

Note:

Works in Opera, Chrome, Safari
Cue text can be styled in CSS using ::cue pseudo-class
::cue(:future) and ::cue(:past) style paint-on captions

Which CSS features work on ::cue :

'color'
'opacity'
'visibility'
'text-decoration'
'text-outline'
'text-shadow'
'background' properties
'outline' properties
'font' properties
'line-height'
'white-space'

Example 2: Rich captions with cue settings

Note:

TV-style rollup captions are not in the spec yet (TBD)

Which cue settings are available:

vertical: rl/lr
line: number or percentage of video height as offset from video top
position: percentage of video width as offset from line start
size: percentage of video width as cue width
align: start/end/middle/left/right

Example 3: Selecting between many tracks

Note:

Safari Nightly is the only one with a selection menu
Chrome has a toggle button, but no menu yet (TBD)
Opera has no button
Tracks that don't work: Hebrew, Slovak, Bangla (TBD)

Video Descriptions

Example 4: Video Description traditionally using Audio

Note:

Need to author a second video
Why not author text and have browser synthesise sound...

Example 5: Video Description using Text Files

Note:

Only works with Chrome extension: "HTML5 Audio Description (via text to speech)"
Pauses video while text is being speech-synthesized

Example 6: Video Descriptions with less pausing

Contact:

Silvia Pfeiffer, @silviapfeiffer , silviapfeiffer1@gmail.com