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).
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.
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.
This example shows the problem most readily in Chrome (and Opera), which relies on a blue focus outline.
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.
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.
TIL from @jnurthen today: Search FF’s about:config for browser.display.focus_ring and set the three values to: true, 2, 4.— Alastair Campbell (@alastc) March 27, 2017
That tip get you a thick blue outline similar to Chrome/Safari regardless of the site’s CSS.— Alastair Campbell (@alastc) March 27, 2017
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).
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.
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.
Update: May 29, 2018
In its final 🖕 to keyboard users, Virgin America makes background color of page the same color as Chrome / Firefox / Safari focus ring.
To spare you eyedropping…
- Contrast ratio:
- failed at Level AA
- Large text
- failed at Level AA
Update: June 4, 2019
Hidde de Vries has a new post at Mozilla Hacks, Indicating focus to improve accessibility, where he recommends not just keeping the focus for all interactive controls, but also going beyond the browser defaults.
Update: October 15, 2019
The Microsoft (Chromi-)Edge team has taken a step toward making better defaults: Improving form controls in Microsoft Edge and Chromium
A promising better focus ring default coming from the @MSEdgeDev team! blogs.windows.com/msedgedev/2019/10/15/form-
Read post for other comparisons (on desktop to see the side-by-each). pic.twitter.com/MSaAWXzbMK
If you grab the latest Edge Dev release, which mine reports as Version 79.0.301.2 (Official build) dev (64-bit) after an update, then you can see these in action. You will not see it in Chrome (yet), however.
Update: April 2, 2020
It took three years, and the efforts of Microsoft, but Chrome has updated its default focus indicator. In the post Updates to Form Controls and Focus there is an example of the old focus style on a blue background, demonstrating the problem I outline above.
Has there been an effort to improve the default focus styles? I’d be much happier if browser vendors fixed this issue themselves ;-)
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.
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.
“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).
I hate to pick at things – but I find it hard to read into this article too much when the focus styles on this site itself are so hard to distinguish. Tabbing through the links removes the underline, and I can’t really tell what’s going on.
No worries. I am always experimenting on this site. Try the links in Firefox, which supports more