One of the principles of accessibility is that making websites accessible benefits everyone, not only people with differing abilities. In the past, I’ve used the accesskey attribute to enhance forms, but relatively few web developers appreciate that accesskey 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 accesskey 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:
<nav role="navigation">
<a href="index.html" accesskey="1">Home</a>
<a href="about.html" accesskey="2">About</a>
<a href="map.html" accesskey="3">Site Map</a>
<a href="search.html" accesskey="4">Search</a>
<a href="help.html" accesskey="0">Help</a>
</nav>The keyboard combos for accesskey shortcuts differ slightly across browsers and platforms:
| Browser | Operating System | Modifier | Example |
|---|---|---|---|
| Internet Explorer / Chrome / Safari | Windows | Alt | Alt + 0 |
| Firefox | Windows | Alt + SHIFT | Alt + SHIFT + 0 |
| Firefox / Safari | Mac | Ctrl | Ctrl + 0 |
| Chrome | Mac | Ctrl + Opt | Ctrl + Opt + 0 |
I’ve added access keys on the site you’re reading now; feel free to try them out.
| Key | Function |
|---|---|
| 1 | Home page |
| S | Focus cursor in search input |
| 4 | Initiate search |
| 0 | About |
| . (period) | Go to next page |
| , (comma) | Go to previous page |
Two final points of note:
accesskey 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 accesskey values are available for form elements.
Ideally accesskey values should be visually indicated in the navigation, using the same CSS techniques you would use for form labels.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
