I would like to add hot keys / access keys to my application though I’m not sure what the best method is or more importantly what my users will expect.
I know with HTML its possible to add a hot key using accesskey=”key” which will go to/focus an element when that key is pressed. I also know its possible to add an event listener via Javascript that will listen for when a key is pressed and then activate the related element. For example, GMail uses Javascript to allow hot key combinations such as “g + i” to go to your Inbox. But which method is “better”, accesskey or javascript?
accesskey use as an attribute in an HTML tag to define an access key. It must be set to an alpha-numeric character
note: to activate an accesskey in: OSX use “CTRL + accesskey”, Windows use “ALT + accesskey”
Generally you attach a keyboard listener(s) to either your document head or individual containers which allow more context sensitive keys. Its important to know the difference between the different key states: keypressed, keydown, and keyup. Browser differences are also important as well as the difference between a meta and ascii key.
One plus when using accesskeys is users that know about them can use them reliably, and the developer can relax about the possibility of an AT overriding any set accesskeys. Though predictable accesskeys are tricky since no best practice exists as to how to map accesskeys to a Web document or application. Generally the best practice seams to be: h=home, s=skip to content, and 1 to 10=jump to main nav elements. The W3C web site for example uses numbered accesskeys for site navigation. But no W3C specification outlines this, and a help link with accesskeys is the only way to predictably inform my users about what accesskey maps to what.
With that said the one big advantage of an accesskey (not overriding AT behavior or vice versa) can easily be accomplished via Javascript when defining a Web application with a role=”document” attribute (see my post document role for more info). Also, as mentioned, nifty key combinations can be used like Google Mail’s “g + i” to jump to the Mail Inbox. Similarly though, users will need a help page mapping these nifty hot keys.
Given my options, Javascript seams the best solution. With Javascript I can create really powerful keyboard combinations which can really enhance navigation etc. without worry of an AT overriding my defined keys (via adding a role=”application” to my application). Defining Javscript keys takes work and time to perfect, while accesskeys take almost no work at all. But with that said, I’d like as much flexibility as possible for my application and I’m going to go with Javascript. Though, if I were working with a Web document, like a standard Web site, the accesskey option would make a lot of sense and be much simpler.
To add keyboard navigation to a Web application, its important to understand a roving tab index and I recommend taking a look at Code Talks Keynav reference. For more information on accesskeys check out A List Apart’s Accesskeys article.
Javascript hot keys seam the better choice for a Web application. By implementing Javscript hot keys I have uber power and control over what key comibnations exist. Just think about emacs and its crazy key combinations but now in a Web application! Also, ARIA saves the day and avoids a pesky AT from overriding my carefully defined hot keys via the role=”application” attribute.