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:
|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.
|S||Focus cursor in search input|
|. (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.
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.