5 Questions About HTML5 Video Accessibility, Answered by an Expert
Updated: June 3, 2019
Video accessibility expert and W3C contributor John Foliot delivered a jam-packed presentation at the webinar HTML5 Video Accessibility: Updates, Features, & Guidelines.
After a brief overview of WCAG guidelines for accessible video, John explored how HTML5 media players support accessibility features like closed captioning and keyboard controls. After an hour of helpful tips about inclusive design, John opened the floor for questions from the audience.
You can watch the full recording below, or read on for the top 5 questions, answered.
1. Has the HTML5 track element gotten widespread browser adoption?
JOHN FOLIOT: The short answer is yes.
As far as I know, all of the modern browsers today are supporting the track element.
2. Do you have any suggestions for properly marking up timestamp lengths in transcripts? For example, I’m able to create links in HTML5 transcripts that will actually jump the user to that particular spot in the recording in an HTML5 player, but the time tag doesn’t feel appropriate, and there doesn’t appear to be any ARIA support for timestamps.
JOHN FOLIOT: Right now, the solutions that I’m seeing are really based on using the anchor tag. In the media requirements document that W3C created, we absolutely envisioned the ability to do that.
What Geoff Freed did at WGBH NCAM with Popcorn.js really does kind of meet the requirement of what you’re looking at, although it might be in reverse. But it certainly allows for hyperlinks inside of your transcript, the pausing of the video, and whatnot.
To navigate a video using its transcript, try 3Play Media’s playlist search plugin. It lets you search for a keyword within a video and jump to any instance where that word is spoken. It can also search for that word throughout your video archive. That’s really the best that you can achieve right now for video search and navigation.
3. Are search engines indexing captions referenced by the track element?
JOHN FOLIOT: As a matter of fact, that is my understanding. Google in particular is looking at that and are starting to index that. I think a lot of their focus also has been on caption files that are being uploaded to YouTube.
I didn’t really talk about YouTube too much on this webinar, but all of the WCAG requirements for accessibility that would be applied to self-hosted and self-published videos also apply to videos that you might be hosting, producing, and delivering via YouTube.
For default closed captioning, YouTube offers automatic speech-to-text video transcription, which is not very good, but it’s better than nothing. But YouTube also allows you to upload clean, accurate caption files. And so when you upload a caption file, Google is indexing that.
That means you can search for videos via their captions. If you do a Google search for a key term in a caption file, it return YouTube videos in the search results.
4. Is there one HTML5 media player that works best for LMS systems like Moodle or Blackboard?
JOHN FOLIOT: To be honest with you, no, because the HTML5 video player is basically the browser. So the functionality that you’re seeing is not in the actual video player itself but rather in the controls that are associated with the video player.
I know some of the commercial media player folks out there have done a really good job on really making the scripted controls really cross platform and cross browser active. They work in all of the basic browsers and platforms. And they’re all using some kind of fallback, usually Flash.
But it reaches a point where, if you’ll pardon the expression, it’s kind of a Coke and Pepsi world, right? I mean, they’re all basically doing the same thing.
5. How do you switch your video content over to an HTML5 player?
JOHN FOLIOT: First, make sure that your video is in a supported file format. Your H.264 encoding is probably the first thing you want to make sure happens. There are other encodings out there, but they’re not supported natively in the browser.
Google was working on Web 8 and WebM as the wrapper file format, but I think work on that has stalled. I’ve not heard any news in almost a year and a half, two years. The owners of the proprietary H.264 encoding technology basically relented and said that they weren’t going to force the patent protection on that particular encoding. You want to ensure your video is encoded in the H.264 and the MP4 wrapper so that it will be well supported in all the browsers.
I would recommend that if you have caption files in another file format and older caption formats—we often saw SRT as a common file format—I would recommend converting it to WebVTT, simply because it’s a more modern markup format.
Caption formats are all basically the same, just with different syntax. The nice thing about moving to WebVTT, however, is that you can style it using CSS.
In summary, I would look at my existing media library and make sure that it’s all encoded and that the caption files are in WebVTT format. Then I’d move my media files into a good content management system and get good scripted controls in my media player.
For a transcript, slide deck, and video recording from this webinar, visit our webinar archive page for HTML5 Video Accessibility: Updates, Features, & Guidelines.
Audio Description for Online Learning
What to look for in an audio description vendor ➡️ The COVID-19 pandemic and the speedy evolution of technology has resulted in a significant increase in the number of educational organizations providing online learning options for students instead of teaching in a…
Captioning for Broadcast TV: Who is Responsible?
Captioning Best Practices for Media & Entertainment [Free eBook] Since 2016, the Federal Communications Commission (FCC) has placed the responsibility of captioning for broadcast TV on both video programming distributors (VPDs) and video programmers. The aim of this closed captioning responsibility is…
How to Drive Revenue from Your eCommerce Product Videos
Accessibility in the eCommerce Era [Free eBook] Today’s consumers seek a retail experience that offers the best of both the on- and offline shopping worlds—combining personalization with competitive prices, choice with detail, and product tangibility with convenience. In this competitive marketplace, how…