Samuel Sjöberg's weblog

Skip to navigation

Underline of the accesskey

I got an e-mail asking me how the underlining of the accesskey in the menu is achieved. I guess you have noticed that a letter in each menu item is underlined, but have you figured out why? Hopefully you have. I think most users that use shortcuts are familiar with this notation from MS Windows.

So, how can it be done? It's a quite simple CSS solution where the letter to be underlined is wrapped in a span-element. The span is assigned a class which I have called accesskey. Basically, this is what a menu item looks like:

<li><a href="/about/" title="About me [alt + m]" accesskey="m">
About <span class="accesskey">m</span>e</a></li>

Because the span is wrapped in an a it can be affected by a:hover. First some rules just to make the links look good (or better...):

a, a:link, a:active {
   color: #933;
   text-decoration: none;
}
 
a:hover {
   background-color: #ffc;
}

This is the CSS that makes it all happen:

a:hover span.accesskey {
   text-decoration: underline;
}

That's it. With the same technique you could display more or less anything as long as it is wrapped inside the a-element which is in focus. I think this is good example of interface tweaks that is easy to do but can add a lot to the user experience if used in the right way. I mean, if you don't know about accesskeys you might begin to because you notice the underlining and read the title. And if you do know you might not even notice it, or even better, it might help you to actually use the accesskeys.

Pages linking to this entry

Pingback is enabled on all archived entries. Read more about pingback in the Pingback 1.0 Specification.

About this post

Created 10th December 2004 12:44 CET. Filed under XHTML and CSS.

0 Comments
0 Pingbacks