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).
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.
Has there been an effort to improve the default focus styles? I’d be much happier if browser vendors fixed this issue themselves ;-)
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.