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…

4 replies on “Problems with Dynamically Assigned Accesskeys”

I'm trying to use the Greasemonkey extension for Firefox to add accesskeys to buttons of pages. I've noticed nearly the same results as your "Button Y" case. One difference, though is that if I do a complete reload, ignoring the cache (Shift-Reload) the accesskey on the button works! I've also tried assigning the accesskey to other non-button elements and it works every time, so as you've deducted, I think this is button-specific.

Did you find any solutions other than rewriting the button element?

Hi Terrill, accesskeys should be triggered on Mac the same as on windows – shift-esc by default but you can change it in the keyboard shortcuts preferences (under the almost easy to find preferences – advanced – shortcuts – keyboard shortcuts).

BTW this is a known bug in Opera. But useful to find your tests.


Chaals (at opera…)

Well, I moved from Opera to Yandex. But I looked for this test again to figure out what had happened to iCab. And in the meantime the Opera bug was fixed, so it now recognises button z. Accesskeys on mac work with the same default shortcut as other versions to enable the accesskey menu – shift-esc (you can change that in preferences -> advanced -> shortcuts and then edit the keyboard shortcuts. That’s an extremely powerful tool, but if you want to play with it you should learn how it works…)

Comments are closed.