Archive for September, 2011

Accessible Media Player (Works with IE, FF, Safari, and Chrome)

Thursday, September 1st, 2011

Deque Systems has modified the JWPlayer to make it keyboard accessible which works not only in IE, but also FireFox, Chrome and Safari.

This player uses the SWFFocus update from Adobe.
The fix works in Firefox on both Windows and OSX, and in Google Chrome and Safari 5 on OSX only. The Windows versions of Chrome and Safari do not seem to shift focus to and from the plug-in correctly. Also, be aware that Safari 5 appears to contain a bug that disables keyboard input to the Debugger version of the FlashPlayer, so be sure to test with the regular released version of the FlashPlayer.

JWPlayer is free for non-commercial use, but has a small fee for commercial use and support.

    1. Uses tabindex=0 on the player’s
      to make the Flash Player tabbable.

    2. Uses SWFFocus to make the Flash Player receive keyboard focus and not trap it inside.
    3. The Flash keyboard trap is fixed when SWFFocus automatically creates two hidden links before and after the player. One has the id=”beforeswfanchor1″ and the other id=”afterswfanchor1″

Download files

Example 1:


Javascript API into the player:

JW Player Embed Method

Loading the player …


Code


<script type="text/javascript" src="http://www.donaldevans.com/deque/jwplayer/jwplayer.js"></script>
<div id="media_container" tabindex="0">Loading the player ...</div>
<script type="text/javascript">
  jwplayer("media_container").setup({
  flashplayer: "http://www.donaldevans.com/deque/jwplayer/jwplayer_deque.swf",
    wmode: 'window',
    file: "http://www.donaldevans.com/deque/jwplayer/corrie.flv",
    allowscriptaccess: "always",
    seamlesstabbing: "true",
    image: "http://www.donaldevans.com/deque/jwplayer/corrie.jpg",
    plugins: { 
      "audiodescription-2": {file: "http://www.donaldevans.com/deque/jwplayer/corrie.mp3", state: "true"},
      "captions": { file: "http://www.donaldevans.com/deque/jwplayer/corrie.xml", state: "true" }
    },
    height: "270",
    width: "480"
    });
</script>

Works With

Accessible Media Player
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 5 JAWS 12 Yes

Standards:

  • 1.2 Time-based Media: The purpose of this guideline is to provide access to time-based and synchronized media. (Level A) This includes media that is:
    • audio-only
    • video-only
    • audio-video
    • audio and/or video combined with interaction
  • 2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface… (Level A)

Posted in Accessibility | Comments Off