Avoid Default Browser Focus Styles

It is not uncommon to see developers and designers forego creating focus styles for controls on web sites and applications. For those who are aware of the need for the focus styles, the most common reason I hear for excluding them is that the browser provides focus styles by default so nobody has to struggle with designing a focus style that both looks good and satisfies WCAG (specifically WCAG 2.0: 2.4.7 Focus Visible). This assumes the default style is not removed, of course.

This is particularly problematic when in-content links (in particular) are the same color as the surrounding text and/or have no underlines. Since those are common design patterns, unless a designer or developer uses the keyboard to navigate a page the issue may never become apparent.

It doesn’t help that in some cases (Chrome, Opera) the browser doesn’t scale the focus style as the user zooms the page or the text is scaled. On the bright side, I found at least one bug has been filed so far to make the defaults better (against Firefox).

Examples

The following two examples allow you to play around on your own. In each case the text passes WCAG 2.0: 1.4.3 Contrast (Minimum), so these would pass a WCAG audit.

Background Texture

Internet Explorer, Edge, and Firefox all use a dotted line to indicate focus, which, as this example shows, can be a problem on textured backgrounds.

See the Pen Insufficient Browser Default Focus: Texture by Adrian Roselli (@aardrian) on CodePen.

Background Color

This example shows the problem most readily in Chrome (and Opera), which relies on a blue focus outline.

See the Pen Insufficient Browser Default Focus: Color by Adrian Roselli (@aardrian) on CodePen.

Screen Shots

I figured it might be useful to see how they actually look in case you don’t have all the browsers handy. In each image, the link has focus.

The default focus ring in Edge on a link against a textured background. The default focus ring in Chrome on a link against a colored background. The default focus ring in Firefox on a link against a textured background.
The default focus ring using the examples above, showing Edge, Chrome, and Firefox.

My Suggestion

Do not rely on the browser default. Maybe make sure your novel styles account for Windows High Contrast Mode too.

Update: March 27, 2017

I have not tried this yet. It also does not address blue backgrounds.

Update: March 29, 2017

I did not even need to make a custom page to demonstrate the problem with Chrome’s blue focus ring. I could have just gone to the Chrome help pages to see it in action (thanks to Jason Kiss for politely telling Google).

Screen shot of a link with the blue Chrome focus ring on the blue background of the Chrome help page.
Screen shot of a link with the blue Chrome focus ring on the blue background of the Chrome help page.

To break that down, the background of that part of the page is #4285f4. The focus ring color is #4d90fe. The contrast ratio between them is 1.14:1. To meet WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text, and while this is not text getting the style, I maintain that in the absence of any other indication of focus, by that standard this focus ring is not visible.

Update: September 24, 2017

Thanks to a tweet from Dennis Lembrée‏, I found another example where relying on the default focus indicator is nearly invisible in Chrome. Despite some other contrast issues, this one is technically not the fault of the developer but addressing it would make the controls that much more usable.

Screen shot of a series of controls where each one has focus, but the focus ring is nearly invisible.
Screen shot of a series of controls with the blue Chrome focus ring on the blue background of the example page. In this composite screen shot, every control has focus to demonstrate the effect.

To break this one down, the background of that part of the page is #5996C9. The focus ring color is #4d90fe. The contrast ratio between them is 1.02:1. And yes, I offered style suggestions in an issue on the GitHub project.

5 Comments

Reply

But it’s currently not possible to replace the default focus styles without side effects, is it? For instance, in Chrome, if you style the :focus selector, the focus styles will also apply when the user clicks a link with the mouse, which we don’t want. (There are JavaScript workarounds like what-input, however.)

Has there been an effort to improve the default focus styles? I’d be much happier if browser vendors fixed this issue themselves ;-)

In response to Šime Vidas. Reply

I am not certain what side effects you mean when replacing browser defaults. Regardless, I am not advocating replacing them, I am advocating not relying on them.

As for the focus styles coming into play on a mouse click, I disagree that we don’t want that. It depends on the design, the designer, the client, and the user.

I cannot speak to efforts to improve the default focus styles within browsers, but I did find an issue filed against Firefox (linked in the third paragraph). I agree that browsers need to do better.

Reply

Totally, 100% agree. My father is visually impaired with macular degeneration and I had to switch him over from Firefox to Chrome just because of this one issue. The dotted line is just too subtle and he definitely cannot see it.

Reply

“I am not certain what side effects you mean when replacing browser defaults.” coming in late on this, but: modern browsers use heuristics that only show the default outline focus style under certain conditions. in most situations nowadays, the default focus is not applied to, say, links or buttons when they were clicked with the mouse, but only when they were navigated to with the keyboard (from memory, Firefox does a heuristic where only after the user TABbed at least once on the page it then sets default focus style, regardless of how the user activated/clicked). Whereas setting explicit :focus style will always apply that style, regardless of whether the user used keyboard or mouse…which can lead to unsightly of confusing results (classic example: take two buttons that trigger some kind of in-page behavior; set an explicit focus style; user mouse-clicks on one, the action happens, but the strong focus style is applied…now, visually, the button looks different, making a user think it’s more like a toggle, or maybe disabled, or…)

In any case, :focus-ring should help here (being able to specify not only the focus style, but making it only apply in same situation as the default focus indicator, so heuristics used by modern browsers as above will be used/applied here too).

In response to Patrick H. Lauke. Reply

For those playing at home (not you, Patrick):

Leave a Reply to Zoltan Hawryluk Cancel response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>