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.

3 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.

Leave a Comment or 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>