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

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Rakesh P
Sent: Wednesday, January 04, 2017 4:10 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Visible focus

As I understand from one of my friend, Chrome has a default indicator of light blue. I think unless the background is dark the light blue indicator does not pass contrast. On the other hand, FireFox and IE shows black dotted indicator which needs light background to have a good contrast. If we need to serve the needs of all the three browsers author supplied CSS is required. All these are good practices but are not WCAG violations. See
G165: Using the default focus indicator for the platform so that high visibility default focus indicators will carry over
https://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G165

However, author supplied good contrast CSS technique is also recommended by WCAG.
G195: Using an author-supplied, highly visible focus indicator https://www.w3.org/TR/WCAG20-TECHS/G195.html

Thanks & Regards
Rakesh
www.maxability.co.in


On Tue, Jan 3, 2017 at 11:25 PM, Jared Smith < <EMAIL REMOVED> > wrote:

> JP Jamous wrote:
> > I think it should have guidelines related to browsers manufacturers
> > and
> to developers. That way, the manufacturers provide a clear outline and
> developers can customize their own that would work with low vision folks.
>
> You mean something like this -
> https://www.w3.org/TR/UAAG20/#gl-interaction-highlight ?
>
> Jared
> > > archives at http://webaim.org/discussion/archives
> >
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.