One of the principles of 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 ; 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:

Accesskey Keyboard Modifiers For Different Browsers
BrowserOperating SystemExample
Internet Explorer / Chrome / SafariWindowsAlt + 0
FirefoxWindowsAlt + SHIFT + 0
Firefox / SafariMacCtrl + 0
ChromeMacCtrl + Opt + 0

I’ve added access keys on the site you’re reading now; feel free to try them out.

Accesskeys for The New Code
KeyFunction
1Home page
SFocus cursor in search input
4Initiate search
0About
. (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.