Integrating Videos in an accessible way in a website

Sébastien Delorme – Atalan

Wednesday, July 07th 2010

Sébastien Delorme

Accessibility expert & consultant

Atalan – www.atalan.fr

Member of Paris Webwww.paris-web.fr

Member of AccessiWeb working group www.accessiweb.org

Author of Tentatives Accessibles

www.tentatives-accessibles.eu

So what exactly constitutes an accessible video ?

So what exactly constitutes an accessible video ?

text transcription

Justin Eckhouse, CNET, 2009Source : http://www.w3.org/WAI/bcase/resources.html

30% increase in traffic from Google after CNET started providing transcripts

“We saw a significant increase in SEO referrals when we launched an HTML version of our site, the major component of which was our transcripts.”

How to write a transcription ?

Voice recognition

How to write a transcription ?

Using speech recognition

List of speech recognition softwarehttp://en.wikipedia.org/wiki/

List_of_speech_recognition_software

How to write a transcription ?

Typing techniques

Shorthand, stenography(220 words / minutes)

Word prediction

…

Which format ?

HTML, PDF…

So what exactly constitutes an accessible video ?

So what exactly constitutes an accessible video ?

captions but…

So what exactly constitutes an accessible video ?

…readable captions

So what exactly constitutes an accessible video ?

…synchronised readable captions

So what exactly constitutes an accessible video ?

…synchronised readable closed captions

So what exactly constitutes an accessible video ?

Synchronised closed captions

To enable to people who are deaf or hard of hearing

to watch videos

In France, 4 million of people who are hard of hearing including 450,000

with severe disabilities.

INSEE – HID survey 1999 (update scheduled for July 2010)

captions convey not only the content of spoken dialogue

but also equivalents for non-dialogue audio information needed to understand

the content, including sound effects, music, laughter, speaker identification

and location

scary music ♪

captions convey not only the content of spoken dialogue

but also equivalents for non-dialogue audio information needed to understand

the content, including sound effects, music, laughter, speaker identification

and location

creaking door…

That is why it is important to have closed captions that can be turned on and off

Example of color codesSource : http://relations.france3.fr/soustitre_main.htm

White speaker at screen

Yellow speaker outside the screen

* Yellow phone, radio, television

Red sound effects

Green foreign language

Magenta music

Cyan narrator

Low quality audio

Other benefits of captioning

Langues étrangères (foreign languages)

Other benefits of captioning

How to create a caption file ?

Dailymotion

.srt filemulti-language

Videos platforms

Youtube - CaptionTube

.srt, .sub, DFXP filesmulti-language

English speech recognition

How to create a caption file ?

Communities

Example : dotSUB.com

Projects

ACAV(Accessibilité Collaborative pour l’Accessibilité Vidéo)

DailyMotion, LIRIS, Université Lyon 3, Eurecom

How to create a caption file ?

Softwares

http://www.captions.org/softlinks.cfm

https://wiki.mozilla.org/Accessibility/Video_a11y_resources#Example_data_files

Examples of formats

.srtDFXP (.xml)

…

For a high accessibility level provide sign language interpretation

Sign languages are independent languages and are different in each country

So what exactly constitutes an accessible video ?

So what exactly constitutes an accessible video ?

synchronised audio description

Audio description : narration added to the soundtrack to describe

important visual details that cannot be understood from the main

soundtrack alone

Mr. Tek – software architect

« On screen, Mr. Tek, software architect »

« Man talking on a public phone »

How to record an audio description ?

Voice

Example : audacity

Speech synthesizer

Festival, eSpeak, FreeTTS…http://fr.wikipedia.org/wiki/Synthèse_vocale

(french link)

How to synchronize audio description ?

Example :

SMIL (W3C)Synchronized Multimedia Integration Language

<?xml version="1.0" encoding="ISO-8859-1"?><!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" "http://www.w3.org/2001/SMIL20/SMIL20.dtd"><smil xmlns="http://www.w3.org/2001/SMIL20/Language">

<head>…<layout type="text/smil-basic-layout"><root-layout height="320" width="320" background-color="black"/><region height="240" width="320" background-color="black" left="0" top="0" id="videoregion"/><region height="80" width="320" background-color="black" left="0" top="240"

id="textregion"/> </layout></head>

<body><par dur="0:01:03.28"><video dur="0:01:03.28" region="videoregion" src="clip.rm" /><textstream dur="0:01:03.28" region="textregion" src="clip.rt" system-captions="on" /> </par>

</body></smil>

So what exactly constitutes an accessible video ?

Accessible player

What is an accessible player ?

Can be controlled by the keyboard and by the mouse

Control features : play, pause, stop, control volume

Allows synchronized closed captions and audio description

Some examples

Flash players

ccPlayer (NCAM)closed captions only

JW FLV Player (LongTail Video)closed captions and audio description

but not free softwares

HTML 5 & Javascript

http://dev.opera.com/articles/view/introduction-html5-video/

Others benefits for users

indexing of video content

Example : http://france24.demos.voxalead.labs.exalead.com

Questions ?

Sébastien DelormeAccessibility expert & consultant, Atalan

sdelorme@atalan.fr

CreditsAll photos used in this presentation are licensed under Creative Commons and posted on Flickr.

Thank you to : big-film, Biblioteca de Arte-Fundação Calouste Gulbenkian, barb_ar, Troy Holden, Lord Jerome, Nej!B, agat_a, Ezu, jcoterhals, Caro Wallis, visual.dichotomy, Olivander.

The font used on theses slides is Ingleby (available on Dafont).