Building a Navigation Menu with Access Keys






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 id="navsite">
 <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 id="navsite">
 <ul>
  <li><a href="/" accesskey="h"><span class="akey">H</span>ome</a></li>
  <li><a href="/about/" accesskey="b">A<span class="akey">b</span>out</a></li> 
  <li><a href="/archives/" accesskey="a"><span class="akey">A</span>rchives</a></li>
  <li><a href="/writing/" accesskey="w"><span class="akey">W</span>riting</a></li>
  <li><a href="/speaking/" accesskey="s"><span class="akey">S</span>peaking</a></li> 
  <li><a href="/contact/" accesskey="c"><span class="akey">C</span>ontact</a></li>
 </ul>
</div>

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

.akey {
 text-decoration: underline;
}

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



 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows