Breadcrumbs

Accesskeys Demystified: Keyboard Navigation

Many web developers neglect to include accesskeys in their designs. The accesskey parameter allows a user to easily add more accessibility to their web pages. Don't be afraid to make your pages more accessible, take that extra step and add that little touch to your web page!

What is an Accesskey?

An accesskey allows a user to immediately jump to a specific part of a web page via the keyboard. The user does this by pressing ALT (PC) or CTRL (Mac) followed by the appropriate character on the keyboard. Accesskeys don't appear on their own, but require the developer to specify which accesskeys apply to each part of the page.

Not all browsers support accesskeys. The following web browsers currently support accesskeys:

  • Internet Explorer 4+
  • Mozilla/Firefox
  • Netscape 6+
  • Opera 7+

Also note that in order for accesskeys to properly work in Opera you first must key SHIFT+ESC preceding the ALT combination. Opera also features tons of keyboard controls that almost render accesskeys useless.

How do I add accesskeys?

You achieve this using the accesskey parameter on an anchor tag. A normal anchor tag looks like this:

Code: XHTML

<a href="index.php">Link Text</a>

With just a few extra characters you can pump up your hyperlink and add an accesskey to it:

Code: XHTML

<a href="index.php" accesskey="l">Link Text</a>

The accesskey attribute sets the value of the accesskey. For the above link I would press ALT+l to be directed to index.php.

You should always use values for accesskeys that relate to the link text. For example, for "Home" you might use "h" as its accesskey value. If you have a lot of conflicting values for accesskeys you can revert to the alternative of using numbers.

So you've added accesskeys, but what good are they if no one knows what they are? A good method of informing your users of accesskeys is to emphasize the letter of a word that is the accesskey. To emphasize text you use the <em> tag:

Code: XHTML

<a href="index.php" accesskey="l"><em>L</em>ink Text</a>

By default most web browsers italicize <em> tags, but we don't want this. Instead we're going to use CSS to make it underlined:

Code: CSS

a {
    text-decoration: none;
}
a em {
    font-style: normal;
    font-weight: normal;
    text-decoration: underline;
}

Visual code output

Now users are aware that "l" is the accesskey for the link.

Building a Menu

Now it is time to put accesskeys to use! We'll take the simple Lowter navigational menu and add in some accesskeys. The code without accesskeys is:

Code: XHTML

<h1 class="hide">Navigation</h1>
<ul id="navlist">
    <li><a class="tab" href="/forums/" title="Discuss the latest and greatest.">Forums</a></li>
    <li><a class="tab" href="/index.php" title="Visit our large archive of articles">Articles</a></li>
    <li><a class="tab" href="/blogs/" title="Read daily tips by experts in their field">Blogs</a></li>
    <li><a class="tab" href="/resources/" title="Discover free resource for your own website">Resources</a></li>
    <li><a class="tab" href="/software" title="Lowter's own open source projects">Software</a></li>
</ul>

By adding accesskeys to each link we increase the accessibility:

Code: XHTML

<h1 class="hide">Navigation</h1>
<ul id="navlist">
    <li><a class="tab" href="/forums/" title="Discuss the latest and greatest." accesskey="f">Forums</a></li>
    <li><a class="tab" href="/index.php" title="Visit our large archive of articles" accesskey="a">Articles</a></li>
    <li><a class="tab" href="/blogs/" title="Read daily tips by experts in their field" accesskey="b">Blogs</a></li>
    <li><a class="tab" href="/resources/" title="Discover free resource for your own website" accesskey="r">Resources</a></li>
    <li><a class="tab" href="/software" title="Lowter's own open source projects" accesskey="s">Software</a></li>
</ul>

As you see, adding accesskeys to your current navigation is easy and reaps great benefits.

Summary

In this introduction to accesskeys you've learned what they are, what good they are, and how to use them. By simply applying an attribute to a link you can increase its accessibility three-fold.