Don’t Remove Visual Cues For Links

Nov

2008

Tech Soapbox just published an article on 10 Things to Factor Into Your HTML, outlining some important things to consider when coding a website. While I agree with the majority of the points made in the article, number 7 irks me a bit:

7. Use Outline:0
Another small one but useful for FireFox. The CSS element ‘outline’ is what drives the dotted border around links in FireFox. While nice for text links, it can make things look bad when you use image links. Use outline:0 to remove the dotted border around images used as links.

Firefox, IE and Google Chrome all provide visual cues to let users know when text and image links have focus—Firefox and IE use a dotted border outline, while Chrome uses an solid orange border. This is particularly important when navigating with a keyboard. Now I agree, they can look kind of ugly, but they serve a purpose.

What About Accessibility?

I don’t want to just use a blanket term like accessibility without getting into specifics. In this instance, I’m talking about accessibility from the standpoint of a person with vision who uses a keyboard to navigate links. This would include people who are unable to operate a mouse and who Tab their way from link to link.

Ordinary, when you Tab onto a link in Firefox, IE or Google Chrome and that link receives focus, the outline gives a visual indication of what link will be activated when you hit Enter.

And that’s the whole point: If you remove the outline around links (by using CSS or any other means), this seems to me a big accessibility issue; especially if you’re removing the outline from image links. Even if you provide a text link that does the same thing as the image link, will that be clear to your users?

Using outline:0 probably isn’t going to affect people with vision-related impairments, but we can’t forget about those who rely on the use of a keyboard for navigation. The bottom line is: Don’t remove visual cues from image and text links unless you plan on providing an alternate way of showing that they have focus when navigating with a keyboard.

Note: There is no default visual cue in Safari or Opera browsers when a link (text or image) has focus.