One of the principles of accessibility is that making websites accessible benefits everyone, not only people with differing abilities. In the past, we’ve used the
access key attribute to enhance forms. Relatively few web developers appreciate that
access key can also be used on tags other than
<label>, most especially links, in a way that benefits both experienced users and those requiring keyboard shortcuts.
There is a loose standard for
access key values for site site navigation;
1 is generally used for the Home page,
3 for Site map,
4 for search,
0 for help, etc. These can be added directly to
<a> tags in navigation:
- <ul id=nav>
- <li><a href=index.html accesskey=1>Home</a></li>
- <li><a href=about.html accesskey=2>About</a></li>
- <li><a href=map.html accesskey=3>Site Map</a></li>
- <li><a href=search.html accesskey=4>Search</a></li>
- <li><a href=help.html accesskey=0>Help</a></li>
The keyboard combinations to initiate access key shortcuts differ slightly from one browser to the next and across platforms:
|Internet Explorer / Chrome / Safari||Windows|
I’ve added access keys on the blog you’re reading now; feel free to try them out.
Two final points of note:
access key values must be unique on the page in which they are used; as navigation will still be present on a form page, this means greater restrictions on which access key values are available for form elements.
Ideally access keys should be visually indicated in the navigation, using the same CSS techniques you would use for form labels. (This is something I’ve yet to do on the blog – right now, marking takes precedence.)