Integrating Videos in an accessible way in a website

Integrating Videosin an accessible way in a website Sébastien Delorme – Atalan Wednesday, July 07th 2010

Sébastien DelormeAccessibility expert & consultantAtalan – www.atalan.frMember of Paris Webwww.paris-web.frMember of AccessiWeb working groupwww.accessiweb.orgAuthor of Tentatives Accessibleswww.tentatives-accessibles.eu

So what exactlyconstitutes an accessible video ?

So what exactlyconstitutes an accessible video ? text transcription

Justin Eckhouse, CNET, 2009Source : http://www.w3.org/WAI/bcase/resources.html30% increase in traffic from Google after CNETstarted providing transcripts“We saw a significant increase in SEO referrals when welaunched an HTML version of our site, the major componentof which was our transcripts.”

How to write a transcription ?Voice recognition

How to write a transcription ? Using speech recognitionList of speech recognition software http://en.wikipedia.org/wiki/ List_of_speech_recognition_software

How to write a transcription ? Typing techniquesShorthand, stenography (220 words / minutes) Word prediction …

Which format ?HTML, PDF…

So what exactlyconstitutes an accessible video ? captions but…

So what exactlyconstitutes an accessible video ? …readable captions

So what exactlyconstitutes an accessible video ? …synchronised readable captions

So what exactly constitutes an accessible video ?…synchronised readable closed captions

Synchronised closed captions To enable to people who are deaf or hard of hearing to watch videos In France, 4 million of people whoare 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 locationscary 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 locationThat is why it is important to have closed captions that can be turned on and off creaking door…

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

Other benefits of captioning Low quality audio

Other benefits of captioning Langues étrangères (foreign languages)

How to create a caption file ? Videos platforms Dailymotion Youtube - CaptionTube .srt, .sub, DFXP files .srt file multi-languagemulti-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_re sources#Example_data_files Examples of formats .srt DFXP (.xml) …

For a high accessibility levelprovide sign language interpretation Sign languages are independent languages and are different in each country

So what exactly constitutes an accessible video ?Audio description : narration added to the soundtrack to describeimportant visual details that cannot be understood from the main soundtrack alone synchronised audio description

« On screen, Mr. Tek,software architect » 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 exactlyconstitutes an accessible video ? Accessible player

What is an accessible player ?Can be controlled by the keyboard Control features : and by the mouse play, pause, stop, control volume Allows synchronized closed captions and audio description

Some examples Flash players ccPlayer (NCAM) HTML 5 & Javascript closed captions only http://dev.opera.com/articles/view/introduction-JW FLV Player (LongTail Video) html5-video/ closed captions and audio description but not free softwares

Others benefits for users indexing of video contentExample :http://france24.demos.voxalead.labs.exalead.com

Questions ?Sébastien DelormeAccessibility expert & consultant, Atalansdelorme@atalan.frCreditsAll photos used in this presentation are licensed under CreativeCommons and posted on Flickr.Thank you to : big-film, Biblioteca de Arte-Fundação CalousteGulbenkian, 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).

http://ideance.net	64
http://www.ideance.net	5
http://technic-guide.ideance.net	1
http://www.ideance.net.	1

Integrating Videos in an accessible way in a website

by Sébastien Delorme on Jul 09, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 71

Statistics

Integrating Videos in an accessible way in a website — Presentation Transcript