Skip Navigation

Accesskeys

 
Accesskeys (also known as "Accelerator Keys", "Shortcut Keys" or "Access Keys") can be used in most browsers, and work as shortcuts to enable people to navigate a site using a keyboard. Every browser treats these differently, some shifting focus to the link specified, and some activating the link as though it were clicked on.

Using Accesskeys
Note that in the case of form elements, the accesskeys will always move focus rather than activate the element.
  • Internet Explorer
    Press ALT-X, where X is the Accesskey letter. For example, ALT-1 on this site will shift focus to the link to the homepage.

  • Mozilla, Netscape and derivatives
    Press ALT-X, where X is the Accesskey letter. For example, ALT-1 on this site will activate to the link to the homepage.

  • Opera
    Press SHIFT-ESC then the Accesskey, and this will activate the link.

Why use Accesskeys?

Accesskeys are commonly listed as an accessibility item by many people, but more and more web users are discovering and using accesskeys, as they make navigation around the sites you use the most a little quicker and easier. They should be used, where possible for the simple reason they make a site easier to use for a wider range of people. If you aren't convinced, try not using your mouse for a day and seeing how easy you find using the web. With accesskeys you will find it much easier.

At the very least, they should be used for the major links within your site, such as the search box and home button. Though there is no standard set yet for accesskeys, the following is a list of the common numbers used for a few of the more common links:
  • 1 - Home
  • 2 - Skip Navigation
  • 4 - Search Input
  • 9 - Contact / Feedback
  • 0 - Accessibility Statement (if there is one)

Adding Accesskeys

There is a short list of tags that support the "accesskey" attribute: <a>, <area>, <button>, <input>, <label>, <legend>, and <textarea>. It is added simply as a normal attribute, for example:

<a href="foo.htm" accesskey="F">
It is wise to also a visual indication of which letter is to be used as an accesskey on any one link, for example by underlining that letter within the link. Adding it to the title doesn't hurt either, for example:

<a href="index.htm" accesskey="h" title="Accesskey: H. Link to home page."><u>H</u>ome<a>
It is also wise to avoid picking accesskeys that conflict with special keys already in use in an application. Internet Explorer and Mozilla both use ALT then a letter for accesskeys and this can often create a conflict. It is wise to avoid all of the following letters, as these are all already in use within common browsers: a, b, d, e, f, g, h, t, v, w.

Try and keep your accesskeys consistent, too. If a user spots an accesskey on one page, they may not check on the next page to see if they can still use it on this page. For that reason, it is very important that, which ever accesskeys you do use, you use the same accesskeys on every single page, without fail.

Last, do not be afraid to advertise the fact you are using accesskeys. People will want to know about it, and will use them if they know they are there, so add a list of the ones you are using on your site to your help pages or your accessibility statement!
 

Syndication

If you like this post, subscribe to my full feed or partial feed.

 

3 comments (Add Yours)

You can keep up to date with this discussion by subscribing to the RSS or Atom feed.
 
Jonic
United Kingdom #1: June 30, 2005
In Internet Explorer you can activate an accesskey link by pressing Alt+X (where X is your accesskey) and then hitting Enter. This is the same as tabbing through the links and hitting Enter but is worth remembering for IE. You know, in case you ever use it for anything other then testing websites.
In Safari you can use CTRL+X where X is the access key letter
Leonhard Moehring
Germany #3: April 2, 2007
Mozilla Firefox 2 has configuration entries to determine which meta-keys are used for access keys. In about:config the main entry should be ui.key.contentAccess with possible values:
0 Disable
1 Shift
2 Ctrl (default in Mac OS X)
4 Alt
8 Meta or Cmd
Other: Add the above for keychords. E.g. 5 = Alt+Shift (default in Windows and Linux)
Note that "Alt+Shift" is the default in Windows & Linux for Firefox 2.0. More on configuration on http://kb.mozillazine.org/Ui.key.contentAccess

 

Post Your Comment

 
Only the name and comment fields are required.
 

Live Comment Preview

 United States #4: 1 minute ago

Web Design, Development and Marketing