Comparison of Browsers on HTML5 Video Accessibility: 2015 Update

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 labeled for screen readers Yes Yes Yes No Partial8 Yes Partial8

Footnotes

  1. 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.
  2. 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).
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. IE and Firefox both support variable playback speed through the context menu (right click on the player).
  8. 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.

Comments are closed.