Focus visible (enh) update

Hi everyone,

One of the comments on focus vis from Detlev was about making the minimum surface area requirement larger, which would lead to:


  *   Minimum area: The focus indication area is greater than or equal to the longest side of the focused control times 2 CSS pixel.

I’ve been testing this<https://alastairc.uk/tests/wcag22-examples/focus-more-visible-3.html>, and I think it is a reasonable ask from a design & dev point of view.

In most cases if you are using a complete outline around the component it makes no difference at all, and you’d automatically fulfil it.

The one area I found that might surprise people is that the default (in Firefox) 1px dotted outline would not pass in most cases.
If the line around the element is 50% full of contrasting pixels, that is less than a solid border along the two longest edges. (E.g. a button is 20px high, 100px wide. You’d be looking for 2 x 100px = 200px square. The complete outline would be 240px at 50% ‘full’ = 120px square.)

Also, on my home laptop (windows 4k res) if you really zoom in and analyse the pixels, only about 25% of the pixels of a 1px #333 dotted outline actually meet the 3:1 contrast threshold:
[Zoomed in view of dotted outline, showing 50% white space, 25% dark pixels, 25% light grey pixels.]

Once it is 2px thick, or dashed, those indicators would pass.

It is not a new thing that browser default indicators would fail, on the Mac the default indicators for some browsers fail the contrast requirement already.

Also, from discussion with Andy in the low vision task force, increasing the surface area requirement is more helpful than increasing the contrast requirement, especially if it pushes the thickness beyond 1px.

I’ve updated that in the SC text<https://docs.google.com/document/d/1g9_WBgfhViWAaRFIWWt10CP5rBsEVIWm3vT1vWqrHvI/edit?ts=5d124fb5>, hopefully this is ok with everyone (or at least we’re happy to propose this in the editors draft for public review), and we can spend the discussion time on the next couple of SCs.

It does occur to me that it wouldn’t be a big step to ask for the equivalent to a complete outline, e.g:

Minimum area: The focus indication area is greater than or equal to the outer perimeter of the focused control times 1 CSS pixel.

That might be easier to understand, without being (much) harder to meet?

Kind regards,

-Alastair

--

www.nomensa.com<http://www.nomensa.com/> / @alastc