hellorobot.org

When an anchor is clicked in Firefox, the browser puts a 1-pixel, black, dotted border around the element. For the control freak seeking a flawless design, for pages where links manipulate the DOM but don’t load another URI, that dotted border can look silly, ugly even.

Getting rid of it is actually very easy. But should you get rid of it?

what is that border?

First, why does that border exist, and does it even matter? The border is an accessibility aid – Firefox is doing something good. The border visually highlights the element on the page that has the current focus. This is for users that cannot or do not use a mouse. You can see how it works by going to Google’s homepage (using Firefox) and pressing the tab button on the keyboard: watch as the links, input field, and buttons all receive focus (and the dotted border) one after another. Removing the dotted border removes that visual cue – without it, how would you know where you’re at on the page?

how do I get rid of it?

If accessibility isn’t a concern and you wish to eliminate the border completely, the simplest way is to add this line to the CSS stylesheet:

a {outline:none; }

A comprised solution, and one that Google uses on the “more” link on their homepage, a solution that is especially valuable in instances where a link affects the current page without loading a new one, is to remove focus from the link, like so:

<a onclick=”this.blur(); myJavaScriptFunction(); return false;” title=”A Link”>Link Text</a></span>

(This JavaScript doesn’t have to be in line, but writing it in line keeps the example simple.)

When someone clicks on this link now, the border does appear but only briefly before the JavaScript immediately removes it. Someone browsing the page without a mouse can still tab through the links with the dotted border denoting their place, but once a link has been clicked, the border will be removed.

It’s a compromise that attempts to minimize the appearance of the border without completely eschewing accessibility.