About Key Drive for JW Player

The aim of Key Drive for JW Player is to provide full keyboard navigation and control of JW Player media in a bid to make online video/audio more accessible.

Inclusive design features of Key Drive include:

  • Quick interaction through either Tab/Enter key navigation or through common Short-cut keys.
  • Skip links included at the top of the page to quickly enable and access Key Drive.
  • Skip links included to wrap the original video player – allowing Flash or poorly labelled players to be jumped over.
  • Reasonable screen reader support.

Screen reader support

The following screen readers have been used to assist with the development of Key Drive, with mixed results:

  • NVDA – Good results on Firefox and IE. The latest update to Google Chrome [Version 32.0.1700.76 m] has caused NVDA to stop working with it.
  • VoiceOver – Good results – on OS X.
  • ChromeVox – Good results – on Chrome only.
  • Window Eyes – Good results on Firefox and IE. There was an issue with it only announcing the first part of a link in Google Chrome. The latest update to Google Chrome [Version 32.0.1700.76 m] has caused Window Eyes to stop working with it completely.
  • JAWS – Good results on Firefox and IE. Doesn’t work at all with Google Chrome.

It appears that NVDA and Window Eyes will actually work with Chrome – provided ChromeVox has been installed, enabled and then disabled first!


Implementing Key Drive

Key Drive for JW Player is a simple JavaScript library which can be loaded as part of the web page design – and hence would be available to all visitors to the page, or can be applied dynamically to the page on a user needs basis – by creating a bookmarklet.

Because Key Drive is a 3rd party library which makes use of the JW Player Application Programming Interface (API), it is compatible across all versions retrospectively and going forward (provided the API supports the functionality).

This means you will not be limited to a particular version of JW Player or the JW Team’s “interpretation” of how accessibility should be implemented (when they get round to addressing it).

Looking forward

Although the specific implementations of rich media support varies quite a bit across browsers and devices, JavaScript support is universally pretty consistent.

Using a similar approach to that taken in developing Key Drive for JW Player, I aim to produce a toolkit of accessibility “aids” which can easily be applied to any web page – with consistency, and independently of the original design or functionality.

Any comments or thoughts regarding this approach would be welcome. You can contact me @jherrieven on twitter.

Try it yourself

You can use Key Drive for JW Player to manage any video on this site by either typing ?jw or by accessing the link via the tab key.

Add it to your site

Adding Key Drive to your site is as simple as including a link to the Key Drive library in your page <HEAD> after the jwplayer.js library, for example:

<!-- JW Player Library -->
<script src="[/path/to/jwplayer]/jwplayer.js"></script>
<!-- Key Drive for JW Player -->
<script src="//www.dev.powered-by-haiku.co.uk/jw-html-config/keydrive/keydrive.min.js?no-splash"></script>

By including the ?no-splash query string as part of the loading URL you can make Key Drive load without displaying the initial dialog.

Load it as a Bookmarklet

A bookmarklet is simply a bookmark stored on your web browser favourites bar (or in the bookmarks folder) that contains JavaScript to dynamically extend the currently loaded page. You can load Key Drive this way by visiting any page with a JW Player on it, and after the page has loaded, copy and paste the following code into your browser URL bar and press return:

javascript:(function(){h=document.getElementsByTagName('head')[0];s=document.createElement('script');s.src='//www.dev.powered-by-haiku.co.uk/jw-html-config/keydrive/keydrive.min.js';h.appendChild(s);void 0;})();

NOTE: Ensure the javascript: part is included – Chrome tends to remove it after you paste into the URL bar.

Comments are closed.