What’s the Best Browser for Accessible HTML5 Video?
Updated: June 3, 2019
Since it was finalized in October 2014, HTML5 has transformed how the web serves up rich media. The new tag lets web developers add video to websites without using plugins. Flash, which was the dominant video plugin on the early web, is quickly fading in popularity, largely due to its drain on resources, poor user experience, and lack of accessibility features.
Some web browsers are playing catch-up on HTML5 support. According to HTML5test.com, Chrome and Opera are ahead of the pack in overall HTML5 compatibility. Firefox comes in a distance second, and IE and Safari trail in third. Of course, these standings can change at any time as browsers release bug fixes, patches, and new versions.
Proper HTML5 compatibility is essential for browsers to correctly render accessibility features. Browsers will differ in exactly which accessibility features they support, how well they work, and how user-friendly they are for people with disabilities.
What Features Are Needed to Make HTML5 Videos Accessible?
Features that make HTML5 videos more accessible to people with limited-to-no hearing, sight, or dexterity include:
- Keyboard controls to navigate the video without a mouse
- Clear labeling of elements and controls, to be read by screen reader
- Strong color contrast of text on backgrounds for legibility by low-vision or color-blind viewers
- Closed captions, which reflect the speech and key sound effects for users who cannot hear the audio
- Audio description as a text track that describes key visuals in the video and can be read aloud by a screen reader
Note: no web browser currently supports audio description as an audio track in HTML5. However, the framework is available for that to be supported in future versions.
Which internet browser offers the best support for HTML5 video players?
Here’s a breakdown, thanks in large part to UW Tech Accessibility Specialist Terrill Thompson for his detailed blog post on the topic.
The strongest browser for HTML5 accessibility support is Internet Explorer (IE) version 10. IE supports closed captioning, accepting WebVTT or TTML caption formats.
The browser offers tab navigation of player controls, even in full-screen mode, and has clear, descriptive labels.
The really fun part?
IE allows for playback speed adjustment, so you can play the video faster or slower than real-time. Just right-click on the video and choose your Play Speed. This perk is great for the average viewer, and especially helpful for people with learning disabilities, cognitive disabilities, or who simply aren’t a native speaker of the language in the video.
Chrome has made a lot of progress, but still has some accessibility issues:
Some features are cumbersome to access with a keyboard.
Requires a plugin (ChromeVox) to access with a screen reader.
Chrome has responded to user complaints of bugs for closed captioning. For example, the “CC” symbol wouldn’t display in the control panel unless you included “default” in your caption track. Chrome has since fixed this bug.
Firefox has some perks and some drawbacks for media player accessibility. Nearly all player controls on Firefox are keyboard accessible (the exception: full screen). Controls have labels but not descriptions.
Closed captions work on Firefox, with some bugs. One known bug on audio files in the video tag obscures caption display. Firefox also suffers from Chrome’s former bug that requires “default” in the track in order to display the caption option.
The biggest accessibility issue users have pointed out is poor color contrast for controls. The image below shows a screen shot of the control display when you hover over the media player in Chrome, Firefox, and Internet Explorer. Note that Firefox small, thin font that’s gray test on a gray background.
Safari version 5 does not support closed captions, nor Windows Screen readers. Safari 6 lacks keyboard controls and suffers some of the same caption bugs as Chrome.
The HTML5 media player on Opera is not compatible with screen readers. WebVTT captions are supported, but buggy.
Its greatest asset? Keyboard controls.
That’s the state of browser accessibility for HTML5 video as of yet. The clear winner at the moment appears to be Internet Explorer.
To learn more about HTML5 captioning, check out our how-to guide.
Video Translation in a Hybrid World
After an unprecedented global pandemic that led to relying solely on digital communications, many people are slowly making their way back to in-person settings. Even as physical gatherings become more commonplace, however, we’re seeing many virtual components stick around in the form…
How to Handle Live Closed Captioning – and the Challenges
Technological innovation has paved a new way to conduct business, education, and life in general – particularly in a world forced to adapt to virtual substitutes during the pandemic. Most of the time, the technology we use is very helpful. For example,…
Transcribing Oral Histories with 3Play Media
History can be told in many ways, but one of the most impactful methods is through oral history. Oral history is a technique for preserving historical information through recorded interviews. In a typical oral history, an interviewer questions an interviewee and records…