Skip to main content

30 steps to a more accessible website

Step 15: Defining keyboard shortcuts

One of the least known features of HTML is the accesskey attribute for links and forms, which allows the web designer to define keyboard shortcuts for frequently-used links or form fields. On Windows, you can press ALT + an access key; on Macintosh, you can press Control + an access key. If the access key is defined on a link, your browser will follow the link; if defined on a form field, your browser will set focus on that field. Internet Explorer has supported access keys since version 4, Netscape since version 6. Older browsers simply ignore them, with no harmful effect.

While there are no standards for which keys should be assigned to which features, here are some commonly-used keyboard shortcuts:

  • Access key 1 - Home page
  • Access key 2 - Skip to main content (the navigation bar skip link)
  • Access key 4 - Search
  • Access key 9 - Feedback
  • Access key 0 - Accessibility statement including a list of access keys

Who benefits?

  1. Jackie benefits. When JAWS reads a link that defines an accesskey, it announces the access key as well. For example, the link <a href="/" accesskey="1">Home page</a> would be read by JAWS as "link: Home page, ALT + 1". Jackie can focus on the link by pressing ALT+1, then follow it by pressing ENTER .
  2. Bill benefits. Since Bill can not use a mouse effectively since his stroke, he relies on keyboard navigation and keyboard shortcuts to move around the page. Access keys are an excellent way for him to jump to common or frequently-used links. Bill can type ALT+1, and Mozilla immediately follows the link that defines accesskey="1". (Note: Mozilla does not announce access keys, which raises the question of how Bill would discover what they are. We will discuss this in a future tip.)

How to do it: home page link

Radio example. If your <$BlogTitle$> is not enclosed in an <a> tag, enclose it in one like this (insert your own home page address):

<a href="http://address/of/your/home/page" style="color:black; text-decoration:none" accesskey="1"><$BlogTitle$></a>

How to do it: skip navigation link

Do you have a link to skip over your navigation bar? If so, give it an accesskey="2" .

<a class="skiplink" href="#startcontent" accesskey="2" >Skip over navigation</a>

How to do it: feedback link

Do you have a link to a feeback form, or a link to your email address? If so, give it an accesskey="9" .

<a href="" accesskey="9">Email me</a>

Be sure to include each accesskey on each page of your website; make these changes to all your relevant templates.

Further reading

« Step 14: Adding titles to links | Contents | Step 16: Not opening new windows »

This guide is adapted from Dive Into Accessibility by Mark Pilgrim and is shared with the GNU Free Documentation License v1.1