The importance of link highlighting

I had assumed that most people were aware of the importance of clear link highlighting until I read a post on accessify demonstrating how to turn off the "dotted line bug" in firefox. I figured it was probably worth writing about.

Mobility impaired keyboard users rely heavily on highlighted links. A keyboard user will typically tab through link items and hit "enter" to activate the link. For this to work, the keyboard user needs to know where the current focus is, otherwise they have little hope of knowing where the next tab will take them. Site design can make this problem much worse if the links are on a background that make the dotted line difficult to detect. Mark Pilgrim is considering developing a more prominent focus indicator for Firefox, which would be a huge help if they can get the colour right.

The default link highlighting for the BBC website works fairly well (extra points for adding access key help in the tab sequence), but other websites such as CNN have a design that can be really tricky to navigate if you're using the tab key, particularly if your sight is less than perfect.

Additional help

Stephen from Shaw Trust is a keyboard-only web user and he sometimes needs a little extra help to see links, particularly if the background to the link is a colour(particularly mid-grey) that makes the dotted line harder to see. Stephen has Cerebral Palsy which means that he finds it hard to focus on small areas of the screen. Highlighting a link (ala Salford University) makes the focus more prominent, and Stephen can get around the site much more easily. Mobility impairment combined with less-than-perfect vision is fairly common and will become more so as the average computer user gets older.

Invisible links

While offset links are a pretty good idea in lots of circumstances, don't forget that keyboard-only users don't have the benefit of having a screen reader. Therefore offset links such as "skip to content" need to be made visible so that sighted keyboard users also have the option of using them. BBC again does a good job of bringing offset links back on screen for this reason, and you can see another example of this technique used at the Salford University website.

Hidden menu items

Beware of using menu systems that provide drop down options when you mouse-over the top level menu item. Keyboard-only users can often still tab through the lower link options even though the focus disappears, so even though they'll be able to get at the lower level menu items, they won't know what they are because they can't see what they have just tabbed to. Tesco have made a song and dance about accessiblity in the past, but they manage to get this all wrong; the vast majority of the tabs are "empty" with no visual feedback at all. This makes me wonder about how serious they really are about user testing. I suspect the developers were stoked because they did it without JavaScript, but it's not good enough.
If you're going to use this type of menu system then make sure that the hidden links are visible on focus so it's keyboard-user friendly.

Summary

This all really boils down to two things:

1. Make sure that all links are visible when they receive focus
2. Create links that highlight when they recieve focus

Simple really, but not as well used as it ought to be.

Update!

Mike Cherim sent a link to an article he wrote a little while back detailing the technique used to achieve the highlighting effect: Let's Focus on Focus. It should be a fairly simple mod to make the script bring offset links back on screen. Cheers Mike!