Displaying access key assignments

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 <em>keyboard shortcuts</em> 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.

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.