This is an update to my earlier Comparison of Browsers on HTML5 Video Accessibility, published two years ago. To test browsers, I used the Native HTML5 Media Player test that ships with Able Player. This test page includes an HTML5 <video> element with two <source> elements to ensure cross-browser support, one targeting an MP4 video file and the other targeting a WebM video file. It also includes four kinds of <track> elements: captions, subtitles, descriptions, and chapters.
Browsers tested
- Internet Explorer 11
- Firefox 37 (both Windows and Mac)
- Chrome 41 (both Windows and Mac)
- Opera 28 (Mac only)
- Safari 8 (Mac OS X Yosemite)
- Safari in iOS 8 (iPhone)
- Chrome on Android 4.3
Screen Readers tested
- JAWS 16 in IE
- JAWS 16 and NVDA 2015.1 in Firefox
- JAWS 16 and ChromeVox 43 in Chrome
- VoiceOver in Safari (both Mac OS X and iOS)
- TalkBack in Chrome on Android
Results
| Feature | IE | Firefox | Chrome | Opera | Safari (Mac) | Safari (iOS) | Chrome (Android) |
|---|---|---|---|---|---|---|---|
| Captions Support | Partial1 | Partial2,3 | Yes | Yes | Yes | Yes | Yes |
| Caption Toggle Button | Yes | No | Yes | Yes | Yes | Yes | Yes |
| Subtitle Menu | Yes | No | No | No | Yes4 | Yes4 | No |
| Descriptions Support | No | No | Maybe5 | No | Maybe4 | Maybe4 | No |
| Keyboard Shortcuts6 | Yes | Yes | Partial | No | No | n/a | n/a |
| Buttons accessible by tab key | Yes | No | No | No | No | No | No |
| Change playback speed7 | Yes | Yes | No | No | No | No | No |
| Buttons http://phentermine-med.com labeled for screen readers | Yes | Yes | Yes | No | Partial8 | Yes | Partial8 |
Footnotes
- IE11 supports captions in both VTT and TTML. However, it hasn’t kept up with the VTT spec. It chokes on at least two features in the sample VTT file: metadata headers in the header block and multi-line comment blocks, both of which are valid. If I remove these features it successfully handles the VTT files. No other browsers have this problem.
- Firefox supports captions, but positions them behind the player controller so they aren’t visible. Eventually the controller might disappear, in which case the captions will be revealed, but the controller doesn’t disappear if it has keyboard focus or if a mouse is hovering over it (a good thing).
- Firefox only show captions if the default attribute is present. No default attribute? No captions. Two years ago this was also a problem in Webkit browsers (Chrome, Safari, and Opera) but it seems to have been fixed in those browsers.
- Safari supports subtitles in both Mac OS X and iOS. Curiously, it also adds the descriptions track to the subtitle popup menu in both platforms. However, the descriptions do not seem to be exposed to the user. See my previous blog post for more about this.
- ChromeVox in Chrome claims to support WebVTT audio description. When the page loads, ChromeVox announces that video with audio description is available on the page, and it repeats that announcement when the video receives focus, along with details for how to turn description on and off. However, in my tests I couldn’t get it to announce the descriptions during playback.
- IE and Firefox both support intuitive keystrokes: space toggles play/pause; left-right arrows rewind and advance; and up-down arrows change volume. In Chrome space toggles play/pause but that seems to be the only function with a keyboard shortcut. All other desktop browsers have no keyboard support at all.
- IE and Firefox both support variable playback speed through the context menu (right click on the player).
- All browsers were tested with the screen readers that work best in those browsers (no screen reader works well in Opera). All players have well-labeled buttons. However, in all players the controls disappear after the video starts playing, and in some browsers (Safari on Mac and Chrome in Android) this renders them inaccessible to screen readers. So you can start playing the video, but you can’t stop.
The Bottom Line
There is still a need for custom HTML5 media players such as Able Player that provide a consistent, fully-accessible experience across all browsers.