Video Accessibility on the Web

Jason Ronallo
NCSU Libraries
Interim Head of Digital Library Initiatives
@ronallo

I Want to Trick You into Using an Accessibility Technology

Timed Text Tracks

Captions

Subtitles

"It's hot in here." translated to "Il fait chaud ici." "It's not the heat it's the humanity." translated to "La chaleur humaine!"

From Brigadoon (1954)

Chapters

• No browser currently supports chapter tracks natively.
• Some players do provide this functionality
  • MediaElement.js
  • Video.js
  • JWPlayer

Audio Description

Audio description is narration of the visual content of a video.

Audio description is an art. How do you fit the description into the pauses in the regular audio content?

Works now with Text to Speech with a Chrome browser plugin

Text Tracks in HTML

Minimal Video Markup With The Track Element

<video>
  <source src="video.webm">
  <track src="track.vtt">
</video>

WebVTT File Format

WebVTT is...

• A W3C Community Group Draft Report.
• A timed text file format specified for use as HTML tracks.
• A plain text file with some special formatting rules.
• Intended to fit the needs of every track kind.
• Inspired by SubRip but expanded and standardized.

WebVTT is a Plain Old Text File

WEBVTT

00:00.000 --> 00:03.000
This is the first cue.

00:03.000 --> 00:07.000
This is the second cue and
breaks over two lines.

00:07.000 --> 00:10.000
Line breaks are kept though 
additional line breaks 
may be added to make the text fit 
the available space for the cue.

WebVTT Features

• Comments/Notes
• Voices
• Cue Settings
• Regions
• CSS styling
• Metadata Header

This Is A Test