I like using the accesskey attribute on my Web pages. They make your forms and links more accessible, but they also help you create Web applications that have features that are more like offline applications. But there are some issues with access keys that you should be aware of before you jump right in.
Accesskey Basics
The accesskey attribute can be added to the following HTML tags:
You add the attribute to the tag like you do any other attribute. The value is the single-character that you want to use to access that form or link element. For example:
<label accesskey="n" for="name"><input type="text" id="name"/></label>
Then, the Web browser will focus on that element when your customer clicks on Alt (Windows) or Ctrl (Macintosh) plus that key. In my example above, that would be Alt+N or Ctrl+N.
Accesskey Recommendations
In order for access keys to be useful as accessibility aids or in Web applications there are a few things you should keep in mind:
- Show your users what the access key is.
Most offline applications underline the access key in the form label. But you can also make the letter bold or simply state what it is explicitly in the text. Some sites put up a legend with the access keys they use all the time. - Access keys are not case sensitive.
Some Web browsers may see a difference between N and n, for example, but you shouldn't rely on this with your access keys, as most browsers do not distinguish. - Try to avoid keys that Web browsers already use.
While most browsers don't use Alt on Windows or Ctrl on Macintosh for hot keys, it's still a good idea to think about what hot keys the popular browsers to your site use. - Use only a-z and number characters.
While the implication in the specification is that access keys can accept any unicode character, the reality is that most Web browsers only support access keys that are the basic ASCII alphabet characters (a through z) and numbers. - Use the same access keys for standard links and options on all your Web pages.
If you use the same characters for typical functions on your entire site, you can have one legend for your entire site.
Some Recommended Standard Access Keys
Most Web pages have some standard navigation, and setting up standard access keys can make your site more navigable:
- S - skip navigation
- 1 - home page
- 2 - about this site
- 3 - what's new
- 4 - FAQ
- 5 - sitemap
- 6 - contact us
- 0 - help or support
- K - access keys
The UK government offers a list of suggested access keys you might want for accessibility. They are similar to the ones I list above.
How to Display Access Keys
With form fields, it can be relatively easy to indicate which letter is the access key - just underline it. But since links are already underlined, that can be a bit more difficult. Here are some suggestions for how to display your access keys.
Write out the key in your text.
<a href="#" accesskey="h">Home</a> (Hot key: H)
Highlight the key with bold or italics.
<a href="#" accesskey="h"><em>H</em>ome</a>
<a href="#" accesskey="h"><strong>H</strong>ome</a>
Underline Only the Key
For this you need to use style sheets.
<a href="#" style="text-decoration: none;" accesskey="h"><spanstyle="text-decoration: underline;">H</span>ome</a>
Double Underline the Key
<a href="#" accesskey="h"><spanstyle="border-bottom: double blue thin;">H</span>ome</a>
Once you start getting into the habit of including access keys on your website, you will find them very valuable.
