28 September 2009
When a link or button has focus, there is usually a visual indicator such as a dotted or coloured line around the element.
The CSS property is called outline.
Some designers/developers find the outline ugly and remove it using outline: none. Some reset CSS files also include this by default, with the optimistic expectation that you will set your own.
Eric Meyer says that he's removed the outline "so that you remember to define your own", however I've noticed that this is the exception rather than the rule. I've a great deal of admiration for Eric Meyer, his work on CSS has improved many a developer including me, but on this issue I have to disagree. A quick search on google code search shows just how regularly it doesn't get done.
If you really wanted people to remember to redefine their own outline styles, you'd make it 6px solid red.
Removing the outline makes a page inaccessible because a keyboard-based user has no indication of what has focus or where their cursor is. They have absolutely no idea of where they will end up if they press the enter key and absolutely no idea of where they are in the page order.
Visible focus in now an AA level accessibility guideline: http://tibor.w3.org/TR/WCAG20/#navigation-mechanisms 2.4.7
So please don't remove the outline, and if you come across
a{
...
outline: 0;
...
}:focus {outline: 1px dotted;} /* or similar */
The colour of the outline should be inherited from the link's default colour if you don't specify one.
UPDATE: Patrick Lauke also has an interest in this and has set up his own CSS outlines test page. Suppressing the outline on the :active pseudoclass seems to be the most elegant solution to stay accessible while avoiding the outline for mouse users.
UPDATE 2: Patrick has since discovered a flash of outline occurs on links to external pages so the best suppression technique is:
a:hover, a:active { outline: none; }