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?
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:

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:

  • Without changes to CSS, all browsers show a focus outline when using the keyboard (as expected).
  • Without changes to CSS, no browsers show a focus outline when clicking with a mouse (except Firefox if you’ve been tabbing through first).
  • If you add an outline to a:focus, all browsers show the focus outline onclick, except Safari.
  • Using active can remove the focus onclick in Firefox, but other browsers will still show the outline on mouse-up or dragging the link.
  • Using a:focus:hover works across browers* to remove the outline when using the mouse (only).

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 comment or 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?

9 contributions to “Fixing outlines on click

  1. This, however, still then leaves the problem of sticky :focus styles applying after a mouse click/touch tap, which are problematic in my view on controls that trigger in-page functionality (e.g. arrows for a carousel), as the change in styles after a click/tap visually differentiate the control from other similar controls, and gives the visual impression that the control is now somehow different (for instance, it may imply to user that it’s a toggle, or that it’s now disabled, or some other variant), when in fact it’s still acting exactly the same way but just happens to now have styles intended for keyboard navigation.

    This can be worked around today with things like … but I do wish there was a more standardised way to achieve this.

  2. I was hoping you’d see this… Two questions though:

    1. Do you get those sticky outlines when you haven’t set a focus outline on the author CSS? I couldn’t get that when there is no author set outline, but perhaps I’m missing a scenario.

    2. Is there a good use case for showing focus on click? I can’t think of one.

    If the answer to the second is no, then I’ll investigate adding bugs to CSS and the browsers.

  3. OK, so do you know of a good use case for showing focus styles on click? Whether it is outline or other?

    That seems like a bug, but wondering if there is a reason?

  4. :focus styles are applied to the item that receives focus. as such, it’s not a bug…just the way the current behavior shakes out in browsers.

    i think you’re trying to to push for “focus as result of click/tap should never trigger :focus either”? if so, that’s simplistic…think of :focus styles on input/textarea for instance. those are clear cases where you want :focus to apply when focus what set to those elements regardless of whether it was a keyboard interaction, click, tap or other…

  5. Thanks, I wish I’d seen brothercakes’ article, he’d done a lot of the work already!

    I’ve updated the article though, as a:focus:hover seems to be a good solution for links.

    It seems that links are special cased in terms of :focus styles already, what I’m thinking is pushing for Safari’s behaviour in other browsers, where clicking on a link does not activate focus styling.

Comments are closed.