Normalize.css: Inconsistent outlines around links when focusing

[visicode]

All browsers show a different outline around links when focusing (dotted black, blurred blue, …).

Should add the following on line 102:
a:focus {
outline-width: 0;
}

Or apply an outline: 1px dotted for all for example

[thierryk]

I think it is better to normalize this by _setting_ an opinionated outline rather than removing it altogether.

[jonathantneal]

I will look for any sign of consensus between Edge, Firefox, Chrome, and Safari. I’ll also test the same browsers on different OS’s, just to be sure this isn’t OS specific.

[tomasz1986]

I would be very careful with modifying the default outline. It is true that there are significant differences between the browsers in how they render it. However, this is also (mainly?) an accessibility issue. There are users who have to rely on the outline to simply be able to browser the Web, and they are usually accustomed to their browser defaults. Playing around with the defaults in this case (no matter how good the intentions are) may have unpredictable consequences.

See also WCAG 2.0 Guideline 3.2 Predictable.

Yet, if you do decide to normalize then I would suggest going for the Chrome (actually old Opera Presto) blue outline which is much more visible than the dotted one used in Firefox or IE.

[slavanga]

The normalisation for link outlines was removed in v3.0.0.
Issue: https://github.com/necolas/normalize.css/issues/216

[jonathantneal]

Heh, I first thought this was for normalizing the already opinionated :active or :hover. The original motivation is solid.

it's more important for a user to get the focus style they expect for their browser than it is to have consistent focus styles across browsers

This snippet remains. I don’t think it’s particularly helpful anymore, but it may be unrelated to this issue.

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

So, as far as removing the outline from :focus, that’s a no go. Closing this as a duplicate of https://github.com/necolas/normalize.css/issues/602#issuecomment-229567046 and as I said there:

An outline on focus is very important for low-sighted users, keyboard users, and other accessibility technology.