When starting a new project, I do not use global CSS resets — like Eric Meyer’s excellent CSS reset. That’s why, I rarely have problems with removed outlines from links.

As you probably know, users which do not use a mouse but navigate webpages with keyboard only, need to see outlines on links when they tab through them. This helps them visually understand which link they will activate.

A fairly new trend is to remove (suppress) this dotted outline on links to make pages look “nicer” to the eye. While design may look “nicer” and more “Web 2.0” to some, when this outline is removed, the accessibility aspect of this remains, and it is very serious.

But Roger Johansson suggested a much better approach: remove links from :active state only!

This is the article that he recommends to all Web developers:

Better CSS outline suppression

Basically, what happens:

You remove the dotted outline from links which are only clicked with the mouse, while keyboard users will see the outline normally!

How? Just use this bit of code, and that’s it:

a:active {outline:none;}

Excellent tip!

I promise to myself that if I will ever try to remove the outline from links, I will do it in this, much more accessible way! :-)