demosthenes.info

A blog by Dudley Storey on , , , , , , and anything else that strikes his fancy.

featured articles

popular favourites

Creating Accesskey Shortcuts For Site Navigation

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:

  1. <ul id=”nav”>
  2. <li><a href=”index.html” accesskey=”1”>Home</a></li>
  3. <li><a href=”about.html” accesskey=”2”>About</a></li>
  4. <li><a href=”map.html” accesskey=”3”>Site Map</a></li>
  5. <li><a href=”search.html” accesskey=”4”>Search</a></li>
  6. <li><a href=”help.html” accesskey=”0”>Help</a></li>
  7. </ul>

The keyboard combinations to initiate access key shortcuts differ slightly from one browser to the next and across platforms:

Accesskey Keyboard Modifiers For Different Browsers
Browser Operating System Modifier Example
Internet Explorer / Chrome / SafariWindowsAltAlt + 0
FirefoxWindowsAlt + SHIFTAlt + SHIFT + 0
Firefox / SafariMacCtrlCtrl + 0
ChromeMacCtrl + OptCtrl + Opt + 0

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

Accesskeys For demosthenes.info
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:

  • 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.)

web developer guide

featured comment

by JoelB in Goodbye, JQuery Validation: HTML5 Form Errors With CSS3

what i'm reading

A Storm of Swords: A Song of Ice and Fire: Book Three
A Storm of Swords: A Song of Ice and Fire: Book Three

what i'm watching

Californication: The Third Season
Californication: The Third Season

what i'm playing

Mass Effect 3 Collector's Edition
Mass Effect 3 Collector's Edition

what i'm hearing

Dub FX
Dub FX

blogs

podcasts

no ads ever

This blog is free of advertising, and always will be.

creative commons licensed

The content of this blog is free to use in whatever way you wish under the Creative Commons license.