Last week I attended the HTML5 Video Accessibility: Updates, Features & Guidelines webinar from 3Play Media.
Guest speaker John Foliot, W3C contributor and accessibility expert at Deque Systems, discussed guidelines for making videos accessible and shared his tips and insights on HTML5 video.
Check out the recording of the webinar on the 3PlayMedia website (~ one hour). Or, if you prefer, read my key takeaways.
Key Takeaways
- For multimedia, there are two types of requirements: alternative technologies (examples: captioning, described video, transcripts) and system requirements (examples: access to interactive controls and menus, use of viewport, secondary screens)
- Authoring requirements for video to be Web Content Accessibility Guidelines (WCAG) 2.0 AA compliant: captions, video descriptions, and transcripts
- Captions include not only the spoken words, but speaker identification, sound effects, and where present, music descriptions
- Captions should appear about at the same time as the video onscreen.
- Closed captions are the captions many people are familiar with: there’s a button or CC icon that you can enable/disable. Open captions are burned into the video, and can’t be turned off.
- Some captions are starting to be positioned on different parts of the screen, side-by-side panes with the video in left pane and captions in the right pane
- Best known caption format is Web Video Text Tracks Format (WebVTT), which has the best browser support for HTML5 video captions
- Though audio descriptions for video are a WCAG 2.0 AA recommendation, it’s one of the video features most forgotten
- Transcripts is similar to a screenplay, describing the action and the audio. Keep in mind deaf-blind and others consume the transcripts separate from the video.
- Create your transcripts using headings and labels
- Clean audio, where background noise is removed, is helpful to people with reduced hearing
- With HTML5, there’s no longer a need to have embedded or plug-in video player
- Most HTML5 players today are adding controls to meet organization design and branding requirements
- Ensure controls and menus are device independent and available to all users; not everyone uses a mouse
- Easiest way to connect to the accessibility API is by using ARIA
- Three things to keep in mind when you’re creating and hosting accessible video: production of the video, streaming your accessible video and components, and managing the video library
- Caption providers include 3Play Media, Automatic Sync, CaptionMax, and National Captioning Institute
Resources
- Web Content Accessibility Guidelines
- Captioning Key: guide for providing captions for the Described and Captioned Media Program (DCMP)
- Media Accessibility Checklist from the World Wide Web Consortium (W3C), hope to have it published as a note later this year
- MAGPie: video captioning software
- Subtitle Workshop: complete, efficient and convenient freeware subtitle editing tool, available for Windows and Mac
- Popcorn.js: allows video, audio and other media to control elements of a webpage. You can pause the video, offer on-screen text description, definitions for acronyms, and more.
