RE: Focus appearance updates

  *   From memory (and the understanding doc), I don't think adjacent contrast with the component is covered:


From Understanding SC 1.4.11-adjacent with the component would be covered if the indicator is entering within the component.

Relationship with Focus Visible
In combination with 2.4.7 Focus Visible, the visual focus indicator for a component must have sufficient contrast against the adjacent background when the component is focused, except where the appearance of the component is determined by the user agent and not modified by the author.


  *   Most focus indicators appear outside the component - in that case it needs to contrast with the background that the component is on. Other cases include focus indicators which are:
  *   only inside the component and need to contrast with the adjacent color(s) within the component. the border of the component (inside the component and adjacent to the outside) and need to contrast with both adjacent colours.
  *   partly inside and partly outside, where either part of the focus indicator can contrast with the adjacent colors.

Given the implications of SC 1.4.11 with the page background or component or both as described above it seems reasonable for us to just focus on size and unfocused/focused state here.

Jonathan

From: Alastair Campbell <acampbell@nomensa.com>
Sent: Wednesday, March 29, 2023 5:16 PM
To: Jon Avila <jon.avila@levelaccess.com>; w3c-waI-gl@w3. org <w3c-wai-gl@w3.org>
Subject: Re: Focus appearance updates

Hi Jon,

> removing the need for adjacent contrast seems to steer folks into size changes without giving any guidance on adjacent contrast.

In terms of guidance (in the understanding doc), I think that is up to us, so long as we're clear about what passes.

The other thing that led to removing the last one was a practical outcome of the previous language: When you have "an area of the focus indicator", and a 2px thickness caveat, a 3px growth of indicator area means that it will pass regardless of the adjacent contrast.

E.g. a dark button with a 3px outline means that you can say the area of the indicator is the outer 2px of that. The 1px between the indicator and component is disregarded for adjacent contrast because it is not "non-focus-indicator color". So any 'growing' indicator passes at that point.

What we can't do is force adjacent contrast with the indicator itself, as that prevents good, large indicators with any kind of shadow/gradient.

So a 2px perimeter without adjacent contrast passes the previous language, and that's the minimum size in the new language anyway, and it chops 1/3rd of the SC out.

> if we go with this approach it might be worth continuing to emphasize in the understanding document that adjacent contrast is important

Very happy to do that, we'll just tweak the understanding doc to make clear what passes.

> and still is a requirement under that [1.4.11] SC.

From memory (and the understanding doc), I don't think adjacent contrast with the component is covered: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html#figure-focus-outer-green

I wouldn't be against putting the last bullet back, but it would only apply in very narrow circumstances.

Kind regards,

-Alastair

--

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