demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter.

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

You must be signed up in order to leave comments.

web developer guide

featured comment

by Aisling Brock in New Business Card Design

what i'm reading

A Feast for Crows: A Song of Ice and Fire: Book Four
A Feast for Crows: A Song of Ice and Fire: Book Four

what i'm watching

Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]
Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]

what i'm playing

Borderlands
Borderlands

what i'm hearing

Planets
Planets

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.