Using Accesskeys is Easy

June 20, 2004

Quite a few Web developers still get a glint of terror in their eyes when someone suggests they add accesskeys to their sites. Well, don’t be scared. This article is very short for a very good reason. If you want to use them, accesskeys are so easy to add, you’ll wonder why you never did before.

Accesskeys Defined

So, what are accesskeys? For the uninitiated, they are a means for people to jump immediately to a specific part of an HTML page by pressing ALT (PC) or CTRL (Mac), followed by the appropriate key on the keyboard, as defined by you via an accesskey parameter.

They’re particularly useful for people with mobility issues who don’t use a mouse and have a keyboard for their every movement on a computer. Accesskeys allow them quickly and easily to hop around the content of your Web pages. Able-bodied users can find them equally useful as shortcuts, too.

We’ll get on to the HTML in a minute, but, before we do, it’s worth noting the extra content accesskeys require you to add. It’s no good having accesskeys if people don’t know what they are — you need to provide a page that lists your accesskeys.

With that in mind, let’s take a really simple example. The Website www.buyfoos.com sells "Foos" to Web developers. It has a navigation area and a content area. The navigation consists of Home, About Foos, Buy Foos, a Site Map and a Feedback Form. What’s missing from that navigation?

An Accesskey Details page!

So, here’s the code for the home page. I’ve bolded the bits that matter to us:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"https://www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 

<title>BuyFoos.com</title> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 

<link href="css/mainstyle.css" rel="stylesheet" type="text/css"> 

</head> 

<body> 

<div id="navigation"> 

<a href="index.html">Home</a> |  

<a href="about.html">About Foos</a> |  

<a href="buy.html">Buy Foos</a> |  

<a href="sitemap.html">Site Map</a> |  

<a href="feedback.html">Feedback</a> |  

<a href="access.html">Accesskey Details</a> 

</div> 

<div id="content"> 

Welcome to buyfoos.com. Etc. Etc. 

</div> 

</body> 

</html>

Now, let’s add an accesskey:

<div id="navigation"> 

<a href="index.html" accesskey="q">Home</a> |  

<a href="about.html">About Foos</a> |  

<a href="buy.html">Buy Foos</a> |  

<a href="sitemap.html">Site Map</a> |  

<a href="feedback.html">Feedback</a> |  

<a href="access.html">Accesskey Details</a> 

</div> 

<div id="content"> 

Welcome to buyfoos.com. Etc. Etc. 

</div>

And that’s it. ALT+Q on a PC, or CTRL+Q on a Mac, will now take users to the home page. Nice, huh?

But something’s not quite right. Accesskeys can be anything you like, but they really ought to make some sense. Standards would be nice at this point, but, alas, as yet there don’t appear to be any. However, I’ve had a look around at a number of government sites, as well as the W3C itself, to see what these organisations do on their Websites. This advice is by no means set in stone, and, if you think there’s a better way then by all means ignore it, but fairly solid "best practice" standards appear to be:

H = Go Home.
S = Skip past the navigation and go straight to the content.
K = Go to the accesskey definitions page.
1 to 0 (e.g. 1, 2, 3… 8, 9, 0) = The main navigation items, in our case:
1 = About Foos
2 = Buy Foos
3 = Site Map
4 = Feedback

So, if we revisit our HTML, it might now look like this:

<div id="navigation"> 

<a href="index.html" accesskey="h">Home</a> |  

<a href="about.html" accesskey="1">About Foos</a> |  

<a href="buy.html" accesskey="2">Buy Foos</a> |  

<a href="sitemap.html" accesskey="3">Site Map</a> |  

<a href="feedback.html" accesskey="4">Feedback</a> |  

<a href="access.html" accesskey="k">Accesskey Details</a> 

</div> 

<div id="content"> 

<a href="#skip" accesskey="s"></a> 

<a name="skip"></a> 

Welcome to buyfoos.com. Etc. Etc. 

</div>

And, there you go. Note that, to go to a specific area of a page, I’ve simply inserted a textless link next to the named anchor that it targets.

Lastly, for further reading, check out this article, which takes accesskeys to the next level with CSS.