Re: Understanding doc 1.4.11, updates

Hi Michael,

> I wanted to flag mild concerns I have with the third example in the User of Color and Focus Visible section.

For other people, that’s this one:
https://raw.githubusercontent.com/w3c/wcag/non-text-contrast-updates/understanding/21/img/button-focus-dark-border.png


And the interactive version is example 12 here:
https://alastairc.ac/tests/wcag21-examples/ntc-focus-styles.html



> I guess I can buy the argument that the button's shape is REDUCED in size by deducting a noticeable amount of black color from the exterior. But when considering ONLY the focus outline, the outline is not 3:1 with the adjacent white background.

Nope, the principle is that the change does not have contrast with the surroundings. If you imagine not being able to see the outer light-grey border against the background, the button changes shape. It is assumed to be the same as shrinking the button because the outer layer doesn’t have contrast with the surroundings.

It is using 1.4.11 to change the size of the component: having contrast with the component itself changes the size.


> Put in a more bald way, if that outer edge was changed to white -- in other words, it is ENTIRELY a change of shape and there is no visible  indicator "added" (for anyone) -- would it still be okay?

It is the same principle as inverting the colors in example 10, and this example from the understanding:
https://raw.githubusercontent.com/w3c/wcag/non-text-contrast-updates/understanding/21/img/button-example2.png


They both involve changing the colour of the component without otherwise changing its form, and rely on you knowing it has changed compared to the default.

If one isn’t ok, the other isn’t either.


>  I get a little queasy thinking that a user is going to need to depend on either remembering the relative size of the buttons to understand something in the viewport has focus OR will need to see two buttons in the viewport to decide which one has focus and understand that it is the smaller one that indicates focus.

Indeed, and I think Jon Avila mentioned that when you are zoomed in to an example like the inverted colours, you have to know which way around it is. I’m not going to argue that is not an issue, but in general those techniques do have contrast, and do make a visible change.

The question is: Do we require that something is added (such as outline), and not allow the inverted-colours approach as a method of focus-visible?

What do people think of that?


>  Obviously, David's campaign of a double line with contrasting colours would be the BEST implementation of this, IMO.

Yep, let’s add that as a technique. Or, perhaps we can update G195?
https://www.w3.org/WAI/WCAG21/Techniques/general/G195


We could also add a CSS technique for this as well, such as moving the outline in or out of the component with outline-offset, or using box-shadows to apply multiple borders. So long as we remember to cover having an outline of some sort (including transparent) to cater for high-contrast modes.

Cheers,

-Alastair