WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Visible focus

for

From: Beranek, Nicholas
Date: Jan 4, 2017 7:46AM

Firefox will change the outline color to match the font color. This can be very effective unless the outline surrounds a dark button with light text on a light background (i.e. the light outline falls on the light background). We do have a property called outline-offset and, when set to a negative value, it pulls the light outline in to display on the dark background.

This is the most effective approach I have witnessed from a browser vendor, but it could still be improved. I was never crazy about the 1px dotted or dashed outlines, nor am I crazy about the box-shadow that Chrome applies. The real issue is that none of the sufficient techniques declares what exactly "highly visible" equates to. I remember we had this discussion before: http://webaim.org/discussion/mail_thread?threadx04

I feel like we should define "highly visible" in the next version of WCAG. Perhaps a 4.5 to 1 color contrast ratio for AA and 7 to 1 for AAA would be sufficient. We would then need to think about how to handle box shadows and determine a best practice for minimum border width (e.g. 2 pixels).

Nick