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 Acces...
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 CN...
How to write a transcription ?Voice recognition
How to write a transcription ?    Using speech recognitionList of speech recognition software         http://en.wikipedia....
How to write a transcription ?  Typing techniquesShorthand, stenography  (220 words / minutes)   Word prediction           …
Which format ?HTML, PDF…
So what exactlyconstitutes an accessible video ?
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
So what exactlyconstitutes an accessible video ?
Synchronised closed captions                   To enable to people              who are deaf or hard of hearing           ...
captions convey not only the content of                    spoken dialogue          but also equivalents for non-dialogue ...
captions convey not only the content of                                                        spoken dialogue            ...
Example of color codesSource : http://relations.france3.fr/soustitre_main.htm White                  speaker at screen Yel...
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  ...
How to create a caption file ?                      Communities              Example : dotSUB.com                         ...
How to create a caption file ?                      Softwares          http://www.captions.org/softlinks.cfm    https://wi...
For a high accessibility levelprovide sign language interpretation                                       Sign languages ar...
So what exactlyconstitutes an accessible video ?
So what exactly          constitutes an accessible video ?Audio description : narration added  to the soundtrack to descri...
« 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                 Sp...
How to synchronize audio description ?                                                    Example :                       ...
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 ...
Some examples           Flash players        ccPlayer (NCAM)                             HTML 5 & Javascript          clos...
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 pres...
Upcoming SlideShare
Loading in …5
×

Integrating Videos in an accessible way in a website

1,256 views
1,198 views

Published on

Published in: Technology, Design
1 Comment
1 Like
Statistics
Notes
  • Great info, Sébastien. For an easy-to-use desktop solution, please try MovieCaptioner (Mac/Win). We offer a free ebook 'Get Started with Video Captioning' (in PDF or iBooks format) that is a good guide for people new to video captioning. It's really very easy with the right tools! Here is the link: http://www.synchrimedia.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,256
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
15
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Integrating Videos in an accessible way in a website

  1. 1. Integrating Videosin an accessible way in a website Sébastien Delorme – Atalan Wednesday, July 07th 2010
  2. 2. 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
  3. 3. So what exactlyconstitutes an accessible video ?
  4. 4. So what exactlyconstitutes an accessible video ? text transcription
  5. 5. 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.”
  6. 6. How to write a transcription ?Voice recognition
  7. 7. How to write a transcription ? Using speech recognitionList of speech recognition software http://en.wikipedia.org/wiki/ List_of_speech_recognition_software
  8. 8. How to write a transcription ? Typing techniquesShorthand, stenography (220 words / minutes) Word prediction …
  9. 9. Which format ?HTML, PDF…
  10. 10. So what exactlyconstitutes an accessible video ?
  11. 11. So what exactlyconstitutes an accessible video ? captions but…
  12. 12. So what exactlyconstitutes an accessible video ? …readable captions
  13. 13. So what exactlyconstitutes an accessible video ? …synchronised readable captions
  14. 14. So what exactly constitutes an accessible video ?…synchronised readable closed captions
  15. 15. So what exactlyconstitutes an accessible video ?
  16. 16. 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)
  17. 17. 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 ♪
  18. 18. 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…
  19. 19. 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
  20. 20. Other benefits of captioning Low quality audio
  21. 21. Other benefits of captioning Langues étrangères (foreign languages)
  22. 22. How to create a caption file ? Videos platforms Dailymotion Youtube - CaptionTube .srt, .sub, DFXP files .srt file multi-languagemulti-language English speech recognition
  23. 23. 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
  24. 24. 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) …
  25. 25. For a high accessibility levelprovide sign language interpretation Sign languages are independent languages and are different in each country
  26. 26. So what exactlyconstitutes an accessible video ?
  27. 27. 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
  28. 28. « On screen, Mr. Tek,software architect » Mr. Tek – software architect
  29. 29. « Man talking on a public phone »
  30. 30. How to record an audio description ? Voice Example : audacity Speech synthesizer Festival, eSpeak, FreeTTS… http://fr.wikipedia.org/wiki/Synthèse_vocale (french link)
  31. 31. 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>
  32. 32. So what exactlyconstitutes an accessible video ? Accessible player
  33. 33. 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
  34. 34. 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
  35. 35. Others benefits for users indexing of video contentExample :http://france24.demos.voxalead.labs.exalead.com
  36. 36. 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).

×