Problems with Dynamically Assigned Accesskeys

In HTML, the accesskey attribute serves as a hotkey for triggering or giving focus to an element on a web page. Typically it's used in combination with one or more additional keys, and each browser defines those differently (there's a list on the Wikipedia Accesskey page).

Its use is somewhat controversial, since it's impossible to avoid key combinations that don't conflict with other key combinations already claimed by browsers, plug-ins, assistive technologies, etc. Nevertheless, it's still in the HTML5 spec, and I find it quite useful for applications such as media players, where users may want to play, pause, mute, etc. from anywhere on the page, without having to mouse or tab back to the player.

In fact, I'm working on such a project now, creating an HTML5 media player with a full set of accessible controls. Since not all browsers support HTML5 media elements, these custom buttons need to be created dynamically using Javascript, which has led to this discovery: Not all browsers support accesskeys that are set dynamically.

To explore this further I created an Accesskey Test Page, which contained three buttons. Each button was assigned a unique accesskey attribute, as follows:

1. Button X and its accesskey were created using HTML


2. Button Y was created using HTML, but its accesskey was set using Javascript following the onload event.


3. Button Z and its accesskey were created entirely using Javascript following the onload event.

All three buttons worked fine in Safari and Chrome in both Windows and Mac, and in Internet Explorer 8. However...

• Firefox does not recognize an accesskey that is assigned dynamically to an already existing element (Button Y). Interestingly, it does fine if the element is created entirely using Javascript (Button Z). (I tested Firefox 3.6.8 in both Windows and Mac).


• Opera (in Windows) has the exact opposite problem of Firefox. It recognizes the accesskey that is set dynamically on an existing element (Button Y), but not if that element is created dynamically (Button Z). (I haven't figured out how to trigger accesskeys in Opera on Mac).

This isn't an earth-shattering problem. The application will still work without accesskeys, it will just be missing a convenient enhancement. If I really wanted to, I could address the Firefox problem by removing the target element from the DOM, then rebuild it with an accesskey and add it back. Seems like a lot of extra work though, and that wouldn't solve the Opera problem. Ultimately, it may just come down to my accepting the unfortunate reality that users of some browsers are going to get a full-featured application, and others will get Accessible Media Player Lite.

Stay tuned to this blog to see how the story ends...