Fixing outlines on click

It is a small thing in someways, but it can trigger nasty effects for keyboard users: Lack of an outline (or other indicator) on links when tabbing through a web page. Unfortunately some browsers in some situations will display the outline when you click the link as well.

The general advice is easy: Make sure there is a clear focus indicator for each link (and other interactive items), whether it is the default outline that browsers add, or something you specify.

Lack of focus indicator is a problem I come across quite often, and it is often the result of a conversation like this:

Project manager:

The client has said / filed a bug that you get a weird outline when clicking on some links, can you get rid of it?

Developer:

But we need that for accessibility, otherwise some people can't see where the focus is.

Project manager:

It looks odd, get rid of it.

NB: If your client only uses Safari you won't have this conversation! More on the browser differences later.

As an example of the oddness, use the tab key (on desktop/laptop) to get to this set of fake links:

Nav 1 | Nav 2 | Nav 3

Link near floated menu

The link is set to display:block (useful for creating large hit targets), and near some floated content. As the floated content overlaps with the empty part of the block, the outline appears over the nearby content.

There are many solutions to this, but the one people tend to reach for is removing the outline on focus.

Browser differences

There is a variety of behaviours for focus when clicking, from looking at the spec it says:

The :focus pseudo-class applies while an element has the focus (accepts keyboard or mouse events, or other forms of input).

However, I think there are some defaults to account for as well. Browsers have a default outline for keyboard focus, but that isn't necessarily the same thing as a:focus {outline:..}. For example, Firefox's default focus comes from it's user-agent stylesheet:

*|*:-moz-any-link:-moz-focusring {outline: 1px dotted;}

From a little testing:

Update & credit: The last test example came from a link to a Sitepoint Article via Patrick Lauke. James Edwards used a:focus:not(:hover) { outline:none; } as a (bad) example, but considering it, I thought a:focus:hover might work, and it seems to.

There is a possible issue (raised by Thierry) that if your mouse pointer is over the link, you won't get an outline. For example, if you click on something, tab forward, and then shift-tab backwards the outline will not appear. For that reason this technique is not advised for form controls, but for links it would not happen easily or often, and can be worked around by using non-outline changes on focus, and removing outline with :focus:hover.

* See the full results table for the browsers tested, please ping me if you get different results or can test other browsers.

So there is a zen approach: Don't remove or apply any outline to links, then it won't add an outline onclick. Use foreground/background colours to highlight the current focus.

If you do need to remove the outline for mouse clicks (only), then use something like:

a.specific-class { color: #000; background-color: #fff;}
a.specific-class:focus { color: #fff; background-color: #000;} 
a.specific-class:focus:hover { outline: none; }

NB: The colours are just examples, the principle is a visually obvious change in the link.

I do wonder though, what is the use-case for showing focus on mouse-click for links? Is this something the browsers should change to match Safari's behaviour?