Showing html site Access Keys

Question

I am trying to come up with a good way of displaying Access Key shortcuts on my html5 page.

Some places recommend using the first letter of a link/tab/heading/whatever as the access key, so as to be intuitive. Those places generally recommend that you "subtly" hint to the user that it is an access key by styling it differently to the rest of the heading--that is, to make it underlined, or italic, or bold. This sounds like it would be very ugly, and make people think that it is a bug!

Other places recommend using numbers as access keys, so as not to conflict with browser or device built-in access keys. Those places generally recommend showing access keys after the heading in brackets. This sounds even uglier, and less clear!

Is there a better way of choosing access keys, and how to display them?

Edit: I really liked @Luke2012's recommendation of using both a letter and a number like:

<input type="search" name="q" accesskey="s 0">

BUT while this works beautifully in IE, it disables ALL of the access keys for the element in firefox or chrome.

Answer 1

You can use both letters and numbers as access keys which make it easier over a range of devices. For example:

<form action="/search">
  <label>Search: <input type="search" name="q" accesskey="s 0"></label>
  <input type="submit">
</form>

Both s and 0 will trigger the shortcut key.

As far as displaying the shortcuts to a user, what about an information icon that can be hovered (like a tooltip) to explain the shortcut keys. Or a subtle dotted line under the element that will trigger a tooltip when hovered.

Answer 2

There are two options that came to my mind:

A) Some programs, for example the CMS Plone, provide short, automated overviews with a list of the used shortcuts. You could display a link to your users to some "help" page where those are explained.

B) It is very common that accesskeys are underlined when pressing the Alt key. You could mimic such a behavior using JavaScript. You could even read the given accesskey from the the HTML attribute and enclose the first matching character with a span.accesskey or something alike to automate the task of highlighting the the accesskey characters.

If you choose a letter, it seems to me they can be memorized more easily.

Answer 3

How to show them: Use the kbd element.

Where to show them: This depends on your site. Typically, access keys are useful for regular visitors, not for new users. So it might not be necessary to show the keys on every page, as regular users will likely memorize them anyway. Instead, document this feature on a separate page (or as part of a relevant existing page).

If you should use them at all, and in which way you should communicate existing access keys to your users, is probably best discussed at https://ux.stackexchange.com/.