Lunatech Research - IT consulting, product research and software development

Français
 
Peter Hilton's picture

Displaying access key assignments

Submitted by Peter Hilton on Wed, 2005-10-19 14:37

It goes without saying that a desktop software application has keyboard shortcuts. Notwithstanding some old evidence that it is faster to use the mouse, it is surprisingly frustrating to use an application with no accelerator keys. That is why it is odd how long it has taken web applications to start using keyboard shortcuts, which have been available in HTML since 1997.

The following HTML elements may have keyboard shortcuts specified by an accesskey attribute: A AREA BUTTON INPUT LABEL LEGEND TEXTAREA.

However, most browsers do not display the access key assignments. There are many suggestions out here for which keys to use and how to indicate the assignments visually, such as on A List Apart, but no conventions.

My favourite idea so far is to copy the visual style of keyboard shortcuts to the right of menu items in a GUI, as shown in the form, below, and the page footer, bottom. I prefer this to the more popular approach of underlining a letter in the label because it is more explicit, which hopefully makes sense to more people. The other popular style, putting the letter in square brackets after the link is better, but still lacks the analogy with desktop GUIs, and so is better suited to less mainstream expert applications. These considerations are particularly relevant for as long as using keyboard shortcuts is not standard; only then will a more concise style be more appropriate.

Example form

One:
Two:
Alt+W
Three:
Alt+T
Four:
Alt+F

Alt+A

Note that access keys have shortcomings. For example, a SELECT element cannot have an access key, so forms should specify a tab order like this one does to allow keyboard navigation. Also, the access key assignments override the browser's keyboard shortcuts: for example, in Firefox Alt+A normally does Select All, and Alt+1 normally selects the first tab, but not on this page.

Access keys are not only useful for forms; in fact, they are probably more useful for global site navigation - a more frequently used and smaller set of options. For example, on any WikiPedia page, you can use Alt-Z to navigate to the home page, or Alt-X to navigate to a random page. The following example is global navigation for this web site, with keyboard shortcuts.

Global short-cuts: Home Alt+H Top of page Alt+Z

Peter Hilton is a senior software developer at Lunatech Research.

Please send comments on this article to editorial@lunatech.com.

About Lunatech

Lunatech Research was founded in 1993 as an IT consulting, product research and development team. Lunatech is a team of adept self-managing architects and programmers, working with a very experienced commercial team.

Contact us

Lunatech Research B.V.
Heemraadssingel 70
3021 DD Rotterdam, The Netherlands

Phone and email

Tel: +31 10 750 2600
Fax: +31 10 243 9902
Email: contact@lunatech.com