WebAIM - Web Accessibility In Mind

E-mail List Archives

accesskeys - underlining letters


From: Matthew Lindop
Date: May 16, 2003 5:01AM

Apologies if this is a newbie question...

I know there are already quite a few accesskey recommendations based around
different number & letter keyboard combinations.

As the general consensus is that numbers should be used for generic
shortcuts pages (ie 1=home, 0=accesskeys etc), how about using the letter
keys, and visually indicating the accesskey by underlining the appropriate

So for your homepage link you could use

<a href="home.html" accesskey="h"><span class="un">H</span>ome</a>

[where class 'un' is text-decoration: underline]

For keys already assigned by the browser's menus, use the next available
letter in the word, eg

<a href="biographies.html" accesskey="i">B<span

php.net is already using this in a small way with its search accesskey:


When extended to the navigation bar of a site, this solution seems to
combine clarity with accessibility.
It is also a really prominent indication to all that you care about these
things (you could even have a link called 'why are some letters underlined?'
linking to your 'About this site' page).

The one downside we can think of is that screen readers will trip up over
the link text because of the span tag ("H - ome") - any suggestions?


Matt Lindop

To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/