Remove the outline from links on :active only

A few months ago I emphasised the importance of not making things difficult for people who do not use a mouse by removing the outline from links and form controls.

If leaving the outline property at its default is not an option for you, perhaps the technique Patrick Lauke describes in Better CSS outline suppression could work. It’s so simple I can’t believe I haven’t heard or thought of it before – remove the outline for the :active state only:

a:active {outline:none;}

That way keyboard users still get the default outline when they tab to a link and activate the :focus state.

To make sure this really does work as intended across browsers and has no surprising side effects, Patrick wants your help with running through the tests and letting him know if you find anything out of order.

Posted on October 13, 2009 in Accessibility, Usability, CSS