Recipe 6.9. Building a Navigation Menu with Access Keys

Problem

You want to create a navigation menu with access keys.

Solution

Create a set of unordered links with an accesskey within the anchor elements:

<div >  <ul>   <li><a href="/" accesskey="h">Home</a></li>   <li><a href="/about/" accesskey="b">About</a></li>    <li><a href="/archives/" accesskey="a">Archives</a></li>   <li><a href="/writing/" accesskey="w">Writing</a></li>   <li><a href="/speaking/" accesskey="s">Speaking</a></li>    <li><a href="/contact/" accesskey="c">Contact</a></li>  </ul> </div>

Next, add a span element around the letters you want to identify as access keys:

<div >  <ul>   <li><a href="/" accesskey="h"><span >H</span>ome</a></li>   <li><a href="/about/" accesskey="b">A<span >b</span>out</a></li>    <li><a href="/archives/" accesskey="a"><span >A</span>rchives</a></li>   <li><a href="/writing/" accesskey="w"><span >W</span>riting</a></li>   <li><a href="/speaking/" accesskey="s"><span >S</span>peaking</a></li>    <li><a href="/contact/" accesskey="c"><span >C</span>ontact</a></li>  </ul> </div>

Then style the access keys through a class selector (see Figure 6-13):

.akey {  text-decoration: underline; }

Figure 6-13. The look of the current link

Discussion

Access keys allow site visitors to navigate a web site easily without the use of a mouse. In the Solution, access keys were assigned to the navigation elements. Once pressed, the user will navigate to the page specified in the link.

If used consistently, a site visitor may use the same set of access keys to navigate in order to create a cohesive user experience.

Access keys are supposed to work in Internet Explorer 4+ for Windows, Mozilla, Firefox, Netscape Navigator 6+, Safari, and Opera 7+.

One of the obstacles for access keys is that there isn't a standard set of keys associated with each link. For example, would using the letter h be better for "Home Page" (as done in this example) or would the letter m be better to represent "Main Page"?

See Also

The HTML 4 specification for access keys at http://www.w3.org/TR/html4/interact/forms.html#h-17.11.2; "Accesskeys: Unlocking Hidden Navigation" by Stuart Robertson at http://alistapart.com/articles/accesskeys/.