WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [EXTERNAL]How important in practice is WCAG Technique G165: Using the default focus indicator for the platform?

for

From: Mallory
Date: Oct 5, 2019 2:44AM

...another consideration is Firefox. By default, it uses the text colour for the outline colour. You'll notice if you round things with border-radius that the outline may easily become 100% invisible (if the page is white, and the control text is white, and the control background is some dark colour... you'll have a white focus ring against that white page background).

Another is something I've unfortunately started to see (it MUST be coming from a framework or something because it's always the exact same code): outline: auto 5px -webkit-focus-ring (from memory, I may have misspelled the name). This is of course no colour in non-blink/non-webkit browsers (now that Edge is moving to chromium, this basically leaves Mozilla out). Also "auto" in some UAs is calculated to 0.

Some magnification tools offer a user-set focus ring (ZoomText for example has some nice ones), and I've not seen a web page be able to override that (for screen magnification, it seems to always "sit on top" of the page, meaning if you took a screenshot using the usual OS screenshot/PrintScreen tools you won't see any of the effects of the magnification). The same seems to go for the visual-focus addon for NVDA: it draws the focus "on top" of the page and the page seems to have no access. Based on those two instances, I've not worried about my author styles accidentally pooing on a user's AT settings.

There's a possibility that user agents will later incorporate an accessibility feature to "force a clear, obvious focus" which users can turn on in the browser (or via an OS setting), which we voted on as part of the Web We Want presentation at the recent ViewSource conference. I assume this will not be breakable by authoring styles.

So all that said, it feels you should be safe setting your own author styles without worrying that you'll override an AT-set focus style. I can't say for certain but from videos I've seen from Chris Hills that this should also hold for Switch Control, but I've not tested. Users who can write their own stylesheets should be able to override author-set focus styles as well, so long as the author doesn't use CSS Modules (you know, that thing where every time the site is rebuilt, new CSS class names are generated, meaning users can't reliably target by class name) to set focus styles (use something which reliably remains to target the element instead).

cheers,
_mallory

On Thu, Oct 3, 2019, at 8:55 AM, Patrick H. Lauke wrote:
> On 03/10/2019 04:43, Birkir R. Gunnarsson wrote:
> ...
> > Rolling your own is good if you want consistency with your brand, your
> > site, across user agents, going with user agent defaults is good if
> > you don't want to worry about WCAG and think that providing a custom
> > indicator could confuse people who are used to a certain user agent.
>
> Rolling your own is also necessary when some browsers are far from smart
> in how they provide their default focus indicator. Take Chrome's blue
> focus outline...sure, it's nice and all, but if your site already uses a
> similar blue color palette for backgrounds and such, it'll become pretty
> hard/impossible to see. So sometimes, if you know a large number of your
> audience comes from that particular user agent, as a site owner you make
> a calculated decision to provide a good clear focus indicator for that
> audience (though yes, you could just leave it as is and say it's
> Chrome's fault...which yes, it is...but that won't help your visitors).
>
> P
> --
> Patrick H. Lauke
>
> www.splintered.co.uk | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > > >