Spider Trax

Link Highlighting: a:active and a:focus

One of the big problems for keyboard navigators is that, unlike mouse users, they may find it difficult to see exactly which link they have moved to within a site menu or similar list of links. For some time now, designers have been making use of the CSS pseudo a:hover class to add rollover effects to links. Mouse users often find that the background colour to a link changes when they hover over it or the link loses its underline etc. Those using a keyboard to navigate often have no such visual assistance. On pages containing large numbers of links in close proximity to one another, this can be a real problem.

The BBC site, for example, currently has 154 links on its front page. Try navigating to News on the left-hand side menu (link number 88) or Sport (link number 93) using the keyboard. It’s very easy to get completely lost.

There is a CSS method for offering keyboard navigators the same visual cues as mouse users. Wherever you style a:hover, apply the same style to both a:active and a:focus.

Example:
#menu a:hover, #menu a:active, #menu a:focus {
background: #eee;
color: #000;
}

The a:active pseudo class should be implemented by IE whilst a:focus will be picked up by Firefox/Mozilla et al.

NOTE:
There has been a suggestion that some builds and/or versions of IE have problems with a:focus, so make sure that it is either the last selector in the list, or style it separately, to avoid any problems.

Top