Video.js’s Approach to Video Player Accessibility

April 30, 2015 BY EMILY GRIFFIN
Updated: June 3, 2019

The original author of Video.js, Steve Heffernan, joined the expert panel at 3Play’s webinar on the future of video player accessibility. Play the video below to watch Steve’s presentation, or read on for highlights.

What is Video.js?

Steve Heffernan is the original author of Video.js and continues to lead the project at Brightcove. He tells the origin story of the platform:
Video.js logo

Video.js was originally created just to add controls to the HTML5 video element. But from then, it’s grown a lot, including adding support for Flash video, other players like YouTube and Vimeo, and then a lot of great features on top of that, like playlists, analytics, and even virtual reality.

As a free, open-source project, Video.js is entirely built and maintained by over 150 contributors.

“All of the features,” says Steve, “including accessibility features, have been added by contributors who have stepped up and said, ‘I want to improve the player in this way.'”

He encourages anyone who wants to contribute to Video.js development to do so on Github.

Video.js & Mozilla Build VTT.js

Since it was built with HTML5 in mind, Video.js has supported WebVTT captions for a long time — longer even than most web browsers.

To take caption support to the next level, Video.js partnered with Mozilla, the company behind the Firefox web browser, to build VTT.js. Now both Video.js and Firefox share the same code base for displaying captions, which allows for complex maneuvers like displaying vertical language captions or multiple caption tracks at once.

Challenge: Extensibility vs. Accessibility

Steve laments one of Video.js’s greatest design challenges:

“When we tried to make the player more customizable, it resulted in poor accessibility.”

He gives a few examples.

Divs vs. Buttons

For his first example, Steve compares the use of a button tag with a div that has a customized role of button. Defining a custom role of button within a div protects your UI from adopting style formatting from other frameworks.

The image below shows an example of a video in Foundation framework that uses the button tag instead of a div . You can see how the button display is affected by Foundation’s style defaults for that tag. Using div prevents this.

However, button tags are useful for screen readers to identify buttons on a video player and are a much better option for making your video accessible to blind users. Video.js will move to adopt the button tag for this reason.

Video.js player with formatting issues on buttons

Tab Order

Video.js ran into other issues when updating the video player control bar. Steve explains:

We tried to make our control bar extremely flexible, so anyone can just add a button to it and it would just automatically flow into place. However, when adding that flexibility, we also kind of messed up the tab order. So when you tab into the player, you hit the Play button. Then from there, it goes all the way over to the right-hand side of the player to the Full screen button, and then starts going to the left– to the volume, to the Closed Caption button. So it’s just generally messed up. In the next version of Video.js, 5.0, we’re going to be using a newer browser technology that will allow us to keep the flexibility but also maintain the correct tab order.

Video.js player tab order going right to left

Future Plans for Video.js Accessibility

In addition to switching to button tags and fixing the tab order, Video.js has a few other plans for better video player accessibility. Improvements on the horizon include:

  • Improve focus styles
  • Possibly adding audio descriptions with
  • Aiming for WCAG 2.0 compliance

Hear what else Steve has to say about the future of video accessibility in the post-webinar Q&A.

3play media logo in blue

Subscribe to the Blog Digest

Sign up to receive our blog digest and other information on this topic. You can unsubscribe anytime.

By subscribing you agree to our privacy policy.