Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

9.5 Provide keyboard shortcuts to important links

Keyboard short cuts save time and effort for users who work in a busy environment and are also very helpful for screen reader users who rely on the keyboard as their main input device. Older people and users with arthritis or limited dexterity also find keyboard shortcuts very useful, as they are often easier to use than a mouse.

To create keyboard shortcuts, define them in HTML and bind them to a particular action, such as following a hyperlink or submitting a form. To assign a keyboard shortcut, you use the accesskey attribute. You can set this attribute for the following tags: <a>, <area>, <button>, <input>, <label>, <legend> and <textarea>.

This example shows a shortcut key for a link:

<a accesskey="H" href="index.html" title="Home page">Home page</a>

This example shows shortcut keys to submit and clear a form:

<form>
<input type="text" name="text3" tabindex="4"><br>
<input type="text" name="text4" tabindex="3"><br>
<input type="text" name="text5" tabindex="2"><br>
<input type="text" name="text6" tabindex="1"><br>
<i>To send this form, press alt+s. to clear it, press alt+c.</i>
<p>
<input type="submit" accesskey="s">
<input type="clear" accesskey="c">
</form>

You should:

  • Explain keyboard shortcuts where they are provided. Inform users that keyboard shortcuts are available, what the key combinations are and what they do. For example the shortcut for the link to the home page could be displayed as follows: Home (Alt+1). Alternatively, indicate a shortcut by an underline, bold text, or use a capital for the letter defined as the accesskey
  • Provide a list of all the shortcuts on a separate page
  • Choose the combinations for keyboard shortcuts with care. Browsers have their own keyboard shortcuts, for example Netscape assigns Alt H to Help, and keyboard shortcuts created with the accesskey attribute override application level shortcuts. If you assign CTRL + P to an action on a page, this would no longer activate the browser's print command. This can easily confuse users, so it is important to avoid using the mappings that are common to browsers. Considering the number of browsers (Netscape, Internet Explorer, Lynx, Opera), each with their own keyboard shortcuts, the list of shared, unassigned keyboard combinations is extremely limiting. The numbers 0-9 are probably the safest
  • Provide keyboard shortcuts but do not rely on them. Not all browsers support the accesskey feature