Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5 Video Accessibility: Updates,
Features, & Guidelines
Lily Bond (Moderator)
Marketing Manager
3Play Media
lily@3playm...
HTML5 Video
Accessibility
UPDATES, FEATURES, AND GUIDELINES
WCAG Requirements
 Perceivable
 Operable
 Understandable
 Robust
Media is multi-modal (sight, sound, interactive)
Media Accessibility Checklist
(http://www.w3.org/WAI/PF/media-a11y-reqs/)
Accessible Media Requirements by Type of Disabil...
Production and Delivery
Requirements
Alternative Content Technologies
 Captioning
 Described video
 Text video descript...
Alternative Content Technologies
Alternative Content Technologies:
Captions
“Captioning is the process of converting the audio
content of a television broa...
Alternative Content Technologies:
Captions
It is important that the captions are:
 synchronized and appear at approximate...
Alternative Content Technologies:
Captions
 WCAG Success Criteria
 S.C. 1.2.2 Captions (Prerecorded) (A)
 S.C. 1.2.4 Ca...
Alternative Content Technologies:
Captions (Timing and Display)
Formats for captions, subtitles or foreign-language subtit...
Alternative Content Technologies:
Captions
 Formats
 WebVTT (dev.w3.org/html5/webvtt/)
 TTML/SMPTE (http://www.w3.org/T...
Alternative Content Technologies:
Descriptions
Described video contains descriptive narration of key visual
elements desig...
Alternative Content Technologies:
Descriptions
 WCAG Success Criteria
 S.C. 2.4.6 Headings and Labels (AA)
 S.C. 1.2.5 ...
Alternative Content Technologies:
Transcripts
A full transcript supports different user needs and is
not a replacement for...
Alternative Content Technologies:
Transcripts
 WCAG Success Criteria
 S.C. 1.2.1 Audio-only and Video-only (Prerecorded)...
Alternative Content Technologies:
Extended and Enhanced
Extended descriptions work by pausing the video and program audio
...
Alternative Content Technologies:
“Above and Beyond”
 Clean audio
 Content navigation by content structure
 Sign transl...
Summary of Authoring
Requirements
To be fully conformant to WCAG 2.0 (AA),
you will require the following:
 Captions
 Vi...
System Requirements
What is an HTML5 Media Player?
<video width=“800" height=“600" controls>
<source src=“MyVideo.mp4" type="video/mp4" />
<so...
System Requirements
Access to interactive controls / menus
Interactive controls and menus must be
available to all users f...
System Requirements
Discovery and activation/deactivation of
available alternative content by the user
Alternative content...
System Requirements
Discovery & activation/deactivation of available alternative
content
 In cases where the alternative ...
System Requirements
Granularity level control for structural
navigation
A real-time control mechanism must be
provided for...
System Requirements
Time-scale modification
While all devices may not support the
capability, a standard control API must
...
System Requirements
Making properties available to the
accessibility interface (AAPI)
For user agents supporting accessibi...
System Requirements
Requirements on the use of the viewport
 The video viewport traditionally provides a
bounding box for...
Summary of System Requirements
 Controls must be accessible, via platform AAPIs
 Alternate content must be discoverable,...
Infrastructure & Production
Requirements
Let’s Do Video!
 Producing Accessible videos
 Streaming your Accessible videos
 Managing your Accessible video library
Caption & Description Resources
Outsourcing
 Captions
 3PlayMedia (http://3playmedia.com)
 Automatic Sync (http://www.a...
Producing Accessible videos
Video Captioning Software
MAGpie (http://ncam.wgbh.org/invent_build/web_multimedia/tools-
guid...
Producing Accessible videos
Video Description Software
YouDescribe (http://www.youdescribe.org/)
 Free web-based tool tha...
Producing Accessible videos
HTML5
Out of band
<video controls>
<source src=movie.webm>
<source src=movie.mp4>
<track src=e...
Producing Accessible videos
HTML5
In Band
Producing Accessible videos
HTML5
In Band - Tools
Handbrake (Captions)
CyberLink Power Director
Sony Movie Studio Pro
iMov...
Streaming your Accessible videos
Adaptive Streaming
Media Server
Adaptive Streaming - HTTP
(http://en.wikipedia.org/wiki/A...
Managing your Accessible video
library
Not all Media CMS solutions are equal.
An accessible Media CMS supports the followi...
Thanks!
Questions?
 John Foliot
 john.foliot@Deque.com
 @johnfoliot
440
John Foliot
W3C Co-Facilitator
HTML5 Accessibility Task
Force
john.foliot@deque.com
Lily Bond
Marketing Manager
3Play ...
Upcoming SlideShare
Loading in …5
×

HTML5 Video Accessibility: Updates, Features, & Guidelines

2,075 views

Published on

What are the best practices for making web-based video and audio accessible? In this webinar, John Foliot, a video accessibility expert and contributor to the W3C's new Media Accessibility User Requirements (MAUR), will go over the latest updates to HTML5 video as well as new guidelines for making media accessible on the web.

This webinar will cover:

HTML5 video updates
Accessibility features of HTML5
Vetted, best practices information from the W3C
The new Media Accessibility User Requirements (MAUR), and what that means for you
Best practices for online video accessibility
Closed captioning guidelines according to MAUR and the W3C
Resources for making your web-based media accessible

Published in: Technology
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/rX2tJ ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

HTML5 Video Accessibility: Updates, Features, & Guidelines

  1. 1. HTML5 Video Accessibility: Updates, Features, & Guidelines Lily Bond (Moderator) Marketing Manager 3Play Media lily@3playmedia.com www.3playmedia.com twitter: @3playmedia live tweet: #HTML5 #a11y  Type questions in the control panel during the presentation  This presentation is being recorded and will be available for replay  To view live captions, please follow the link in the chat window John Foliot W3C Co-Facilitator HTML5 Accessibility Task Force
  2. 2. HTML5 Video Accessibility UPDATES, FEATURES, AND GUIDELINES
  3. 3. WCAG Requirements  Perceivable  Operable  Understandable  Robust Media is multi-modal (sight, sound, interactive)
  4. 4. Media Accessibility Checklist (http://www.w3.org/WAI/PF/media-a11y-reqs/) Accessible Media Requirements by Type of Disability  Blindness  Low vision  Atypical color perception (color blind)  Deafness  Hard of hearing  Deaf-blind  Physical impairment  Cognitive and neurological disabilities
  5. 5. Production and Delivery Requirements Alternative Content Technologies  Captioning  Described video  Text video description  Transcripts  Extended video descriptions  Enhanced captions/subtitles  Sign translation  Clean audio  Content navigation by content structure System Requirements  Access to interactive controls / menus  Discovery and activation/deactivation of available alternative content by the user  Granularity level control for structural navigation  Time-scale modification  Requirements on making properties available to the accessibility interface  Requirements on the use of the viewport  Requirements on secondary screens and other devices
  6. 6. Alternative Content Technologies
  7. 7. Alternative Content Technologies: Captions “Captioning is the process of converting the audio content of a television broadcast, webcast, film, video, live event, or other productions into text and displaying the text on a screen or monitor. Captions not only display words as the textual equivalent of spoken dialogue or narration, but they also include speaker identification, sound effects, and music description.” (http://www.dcmp.org/captioningkey/)
  8. 8. Alternative Content Technologies: Captions It is important that the captions are:  synchronized and appear at approximately the same time as the audio is delivered  equivalent and equal in content to that of the audio, including speaker identification and sound effects  accessible and readily available to those who need or want them  Captions can be either Open or Closed While similar in construction, Captions and Sub-Titles are not the same thing.
  9. 9. Alternative Content Technologies: Captions  WCAG Success Criteria  S.C. 1.2.2 Captions (Prerecorded) (A)  S.C. 1.2.4 Captions (Live) (AA)  S.C. 3.1.2 Language of Parts (AA)  S.C. 1.4.8 Visual Presentation (AAA)  UAAG Success Criteria  S.C. 1.1.1 Render Alternative Content (A)  S.C. 1.1.3 Replace Non-Text Content (A)  S.C. 3.1.3 Retrieval Progress (A)  S.C. 2.11.8 Video Contrast and Brightness (AAA)
  10. 10. Alternative Content Technologies: Captions (Timing and Display) Formats for captions, subtitles or foreign-language subtitles must:  Render text in a time-synchronized manner, using the media resource as the time-base master.  Be available in a text encoding. (e.g. UTF-8)  Support positioning in all parts of the screen - either inside the media viewport but also possibly in a determined space next to the media viewport.  Permit a range of font faces and sizes. Permit rendered text and backgrounds in a range of colors, supporting a full range of opacities.  Additional requirements supporting internationalization and visual display properties
  11. 11. Alternative Content Technologies: Captions  Formats  WebVTT (dev.w3.org/html5/webvtt/)  TTML/SMPTE (http://www.w3.org/TR/ttaf1-dfxp / https://www.smpte.org/sites/default/files/st2052-1-2010.pdf)  Other formats exist:  Scenarist Closed Caption (.scc)  SAMI/SMIL (.smi)  RealText (.rt)  SubRip/SubViewer (.srt/.sbv)
  12. 12. Alternative Content Technologies: Descriptions Described video contains descriptive narration of key visual elements designed to make visual media accessible to people who are blind or visually impaired. The descriptions include actions, costumes, gestures, scene changes or any other important visual information that someone who cannot see the screen might ordinarily miss.
  13. 13. Alternative Content Technologies: Descriptions  WCAG Success Criteria  S.C. 2.4.6 Headings and Labels (AA)  S.C. 1.2.5 Audio Description (Prerecorded) (AA)  S.C. 1.4.7 Low or No Background Audio(AAA)  UAAG Success Criteria  S.C. 1.1.1 Render Alternative Content (A)  S.C. 1.1.3 Replace Non-Text Content (A)  S.C. 3.1.3 Retrieval Progress (A)  S.C. 2.11.8 Video Contrast and Brightness (AAA)
  14. 14. Alternative Content Technologies: Transcripts A full transcript supports different user needs and is not a replacement for captioning. A transcript can either be presented simultaneously with the media material, which can assist slower readers or those who need more time to reference context, but it should also be made available independently of the media.
  15. 15. Alternative Content Technologies: Transcripts  WCAG Success Criteria  S.C. 1.2.1 Audio-only and Video-only (Prerecorded) (AA)  S.C. 2.4.6 Headings and Labels (AA)  S.C. 3.1.1 Language of Page (A)  UAAG Success Criteria  S.C. 1.1.1 Render Alternative Content (A)  S.C. 1.1.3 Replace Non-Text Content (A)  S.C. 3.1.3 Retrieval Progress (A)  S.C. 2.11.8 Video Contrast and Brightness (AAA)
  16. 16. Alternative Content Technologies: Extended and Enhanced Extended descriptions work by pausing the video and program audio at key moments, playing a longer description than would normally be permitted, and then resuming playback when the description is finished playing. This will naturally extend the timeline of the entire presentation Enhanced captions are timed text cues that have been enriched with further information - examples are glossary definitions for acronyms and other intialisms, foreign terms (for example, Latin), jargon or descriptions for other difficult language. They may be age-graded, so that multiple caption tracks are supplied, or the glossary function may be added dynamically through machine lookup.
  17. 17. Alternative Content Technologies: “Above and Beyond”  Clean audio  Content navigation by content structure  Sign translation
  18. 18. Summary of Authoring Requirements To be fully conformant to WCAG 2.0 (AA), you will require the following:  Captions  Video Descriptions  Transcripts
  19. 19. System Requirements
  20. 20. What is an HTML5 Media Player? <video width=“800" height=“600" controls> <source src=“MyVideo.mp4" type="video/mp4" /> <source src=“MyVideo.webm" type="video/webm" /> <track src=“MyCaptions.vtt" kind=“Captions" srclang="en" label="English" /> <!-- fallback for legacy browsers --> </video>  The browser is the video player – the video player is the browser!  HTML5 anticipates author scripted & customized controls  Many HTML5 video players today use Flash players as a fallback
  21. 21. System Requirements Access to interactive controls / menus Interactive controls and menus must be available to all users for all means in which the controls are exposed - no matter whether they are exposed by the user agent, or are scripted. Controls must be device independent, so that control may be achieved by keyboard, pointing device, speech, etc.
  22. 22. System Requirements Discovery and activation/deactivation of available alternative content by the user Alternative content must be both discoverable by the user, and accessible in device agnostic ways. The development of APIs and user-agent controls should adhere to UAAG guidance.
  23. 23. System Requirements Discovery & activation/deactivation of available alternative content  In cases where the alternative content has different dimensions than the original content, the user has the option to specify how the layout/reflow of the document should be handled.  The user can browse the alternatives and switch between them.  Synchronized alternatives for time-based media can be rendered at the same time as their associated audio tracks and visual tracks  Non-synchronized alternatives can be rendered as replacements for the original rendered content.  Provide the user with the option to load time-based media content such that the first frame is displayed (if video), but the content is not played until explicit user request.
  24. 24. System Requirements Granularity level control for structural navigation A real-time control mechanism must be provided for adjusting the granularity of the specific structural navigation point next and previous. Users must be able to set the range/scope of next and previous in real time.
  25. 25. System Requirements Time-scale modification While all devices may not support the capability, a standard control API must support the ability to speed up or slow down content presentation without altering audio pitch. (This feature has been present on many devices, especially audiobook players, for years. )
  26. 26. System Requirements Making properties available to the accessibility interface (AAPI) For user agents supporting accessibility APIs implemented for a platform, any media controls need to be connected to that API.
  27. 27. System Requirements Requirements on the use of the viewport  The video viewport traditionally provides a bounding box for many of the visually represented alternative-content technologies, although some alternative content does not rely on a viewport. Remember when designing player ‘skins’ is that the lower-third of the video may be needed for caption text.
  28. 28. Summary of System Requirements  Controls must be accessible, via platform AAPIs  Alternate content must be discoverable, and able to be modified by the end user  Content navigation and content display should allow for personalization
  29. 29. Infrastructure & Production Requirements
  30. 30. Let’s Do Video!  Producing Accessible videos  Streaming your Accessible videos  Managing your Accessible video library
  31. 31. Caption & Description Resources Outsourcing  Captions  3PlayMedia (http://3playmedia.com)  Automatic Sync (http://www.automaticsync.com/caption)  CaptionMax (http://captionmax.com/)  National Captioning Institute (http://www.ncicap.org)  Described Video  Bridge Multimedia (http://www.bridgemultimedia.com/audiodescription/ )  Dicapta (http://www.dicapta.com/)  CaptionMax (http://captionmax.com/)  More resources (http://www.acb.org/adp/services.html)
  32. 32. Producing Accessible videos Video Captioning Software MAGpie (http://ncam.wgbh.org/invent_build/web_multimedia/tools- guidelines/magpie)  Media Access Generator is the original free caption and audio- description authoring tool for making multimedia accessible to persons with sensory disabilities. Subtitle Workshop (http://www.urusoft.net/products.php?amp;cat=sw&lang=1)  The most complete, efficient and convenient freeware subtitle editing tool. It supports all the subtitle formats you need and has all the features you would want from a subtitle editing program. Caption Generator (http://www.vttcaptions.com/)  Caption Generator lets you create, synchronize and edit .vtt captions.
  33. 33. Producing Accessible videos Video Description Software YouDescribe (http://www.youdescribe.org/)  Free web-based tool that allows anyone to record descriptions of YouTube videos and/or play previously described YouTube videos. CapScribe Open (http://www.inclusivemedia.ca/captionme/)  Free Mac-based video editor for captioning and description MAGpie (http://ncam.wgbh.org/invent_build/web_multimedia/tools- guidelines/magpie)  Media Access Generator is the original free caption and audio- description authoring tool for making multimedia accessible to persons with sensory disabilities. Livedescribe (http://www.livedescribe.com/)  Video description software designed, prototyped and developed at The Center for Learning Technology.
  34. 34. Producing Accessible videos HTML5 Out of band <video controls> <source src=movie.webm> <source src=movie.mp4> <track src=english.vtt kind=captions srclang=en> <track src=french.vtt kind=captions srclang=fr> <p>Fallback content here with links to download video files</p> </video>
  35. 35. Producing Accessible videos HTML5 In Band
  36. 36. Producing Accessible videos HTML5 In Band - Tools Handbrake (Captions) CyberLink Power Director Sony Movie Studio Pro iMovie Adobe Premiere Pro
  37. 37. Streaming your Accessible videos Adaptive Streaming Media Server Adaptive Streaming - HTTP (http://en.wikipedia.org/wiki/Adaptive_ bitrate_streaming)  MPEG-DASH  Apple HTTP Adaptive Streaming  Microsoft Smooth Streaming  Adobe Dynamic Streaming for Flash http://www.streamingmedia.com/Articles/Editorial/Featured-Articles/How-to-Produce- for-Adaptive-Streaming-81020.aspx
  38. 38. Managing your Accessible video library Not all Media CMS solutions are equal. An accessible Media CMS supports the following:  Integrated upload and tracking of Captions, Video Descriptions, Transcripts and of course Videos  Integrated Adaptive Streaming  Supports/converts multiple codecs (.mp4, WebM)
  39. 39. Thanks! Questions?  John Foliot  john.foliot@Deque.com  @johnfoliot
  40. 40. 440 John Foliot W3C Co-Facilitator HTML5 Accessibility Task Force john.foliot@deque.com Lily Bond Marketing Manager 3Play Media lily@3playmedia.com Q&A Upcoming Webinars:  September 16: Online Video and the ADA: How a Landmark Case Changed the Legal Landscape of Closed Captioning  Presented by Arlene B. Mayerson, who led the legal team that secured a historic settlement in the case of NAD v. Netflix You can register for our free webinars at: www.3playmedia.com/webinars/ A recording of this webinar will be available for replay

×