RE: Focus Visible (Enhanced)

Hi Wilco,

Putting the SC-writers hat on, rather than chair’s:

> 1. Buttons where a change in background color is used to indicate focus.

This was one of the examples we discussed [1], and having a subtle change of background color is one of the bad-case scenarios we want to catch (for focus), it is hard to follow.

So yes, you would often have to flip the foreground text color as well. Having done a lot of examples for discussion, that one isn’t in the understanding document, would it help if it were included?


> 2. Buttons with a dark background, surrounded by a white background, using an outline to indicate focus. In this scenario the outline is required to have a 3:1 contrast ratio with both the dark background, as well as the white surroundings.

There are several options there. If you want it to be outside the button and adjacent, then yes it is hard to meet, and hard to see!

Other options discussed in the understanding doc include:

  *   The outline separated from the button by a pixel or more.
  *   The outline goes inside the button.
  *   The outline is thicker than 1px.

The ‘Contrast and thickness’ section is dedicated to that question.


> Not allowing outline (without offset) for an entire range of colors suggests to me this is too strict. I'm guessing this was unintentional?

No, that was intentional. That type of indicator can be very hard or impossible to see. Even having 1px separation (for a 1px outline) is not ideal, but that was the compromise.

Have a look through the examples [1] to see what we used to refine the requirement.

Cheers,

-Alastair

1] https://alastairc.uk/tests/wcag22-examples/focus-more-visible.html

https://alastairc.uk/tests/wcag22-examples/focus-more-visible-2.html

https://alastairc.uk/tests/wcag22-examples/focus-visible-enh-examples.html