Accessible Video.js Player Available on Global Accessibility Awareness Day

Video.js is an HTML5 video player that makes embedding video in HTML5 pages very easy and gives you a consistent look-and-feel across browsers. Video.js will use the browser’s built-in ability to play video in the format the browser prefers, but it uses a standard set of user interface (UI) controls that work across browsers. It will also work on mobile devices.

One of the strengths of Video.js is how it solves one of the big problems with HTML5 video – browser support of codecs. If you’ve ever worked with HTML5 video you know you usually have to provide your video in at least two formats to ensure that it will work in all browsers – MP4 and WebM. With Video.js, you can still provide the video in multiple formats and it will use the browser’s built-in ability to play that video in the preferred format, however, if a browser does not support one of the formats you have provided, Video.js will use a Flash fall-back player to play the video while still using its standard set of UI controls.

Now one of the other great strengths of Video.js is the player controls are accessible. Video.js is an open source project and I’ve been working with the community to make the player more accessible. With this new version of Video.js released today, which is coincidentally Global Accessibility Awareness Day, the player is now accessible to keyboard-only users, screen reader users, and voice-interface users. The specific accessibility improvements are:

  • The UI controls are keyboard accessible, including seeing the visual focus on the controls.
  • The UI controls are named properly and the status of each is updated by the appropriate ARIA attributes, so screen reader users can fully interact with the player. It works with JAWS, NVDA, and VoiceOver. The accessible controls include the following:
    • Play/Pause Button
    • Progress Bar
    • Time Elapsed
    • Time Remaining
    • Fullscreen Toggle
    • Volume Slider
    • Mute Button
    • Caption Button
  • The tab order for the UI elements has been altered to make the flow more logical.
  • The font size of the caption track is now enlarged when viewing the video in full screen mode.

Making Video.js accessible is a work in progress and there are still a few things that need to be done.

  1. The tab order probably needs to be adjusted some more to make it more logical. To alter it any more that what it is right now will take some significant modifications to the CSS and markup.
  2. Full keyboard accessibility needs to be more robust. Because the player controls show and hide themselves based on if the mouse is hovering over the player or not, this causes problems for keyboard users. The solution isn’t as simple as just adding in the appropriate onfocus and onblur events, because the video player is made up of multiple UI elements, and bubbling up the focus through multiple elements takes some extra testing to make sure it works in all browsers. However, currently there is a little of what I call “accessibility by accident.” If you start playing the video by using the keyboard, the mouse never enters or exits the video area, thus never triggering the show/hide event. That makes the player controls stay visible all the time. The downside is that the controls cover the bottom portion of the video, albeit in a semi-transparent manner. There are, however, a couple of edge cases where the controls do end up hiding themselves. Coming up with a more robust solution will solve this problem. Playing the video in full screen mode seems to also eliminate the problematic edge cases.
  3. Currently the caption button is acting as a menu with a sub-menu. To get it to truly act the way a submenu is supposed to will require some more significant modifications to the code.
  4. The time progress bar currently increments and decrements by 5 seconds when using the left and right arrow keys. This is better than what it was before, when it only changed by 1 second. I’m not sure what the ideal amount is and am open to suggestions.
  5. Support for technologies like Dragon Naturally Speaking need to be more robust. You can currently navigate the entire UI with Dragon, but it could be made more elegant.

If users, particularly keyboard-only users or screen reader users, have difficulty interacting with the player, viewing it in full screen mode might correct some of the problems.

There was no long term plan to release this today on Global Accessibility Awareness Day – it was just serendipitous.

2 thoughts on “Accessible Video.js Player Available on Global Accessibility Awareness Day

  1. Heck yah! Nice work and an excellent write-up. Far too little attention is paid to this issue, so it’s great to see this type of effort take place for an open source project that impacts a ton of sites!

  2. Pingback: TheAccessPond.com » Accessible Video Player: Video.js

Comments are closed.