Open mraccess77 opened 3 years ago
goodwitch
commented
3 years ago I was having similar questions and was playing around (inspired by Alastair's great examples). I've posted some of my questions I was pondering this afternoon here http://www.glendathegood.com/a11y/Focus%20visible%20-%20goodwitch%20test.html (I'm most curious to see if y'all think example C passes).
mraccess77
commented
3 years ago @goodwitch Many of those I didn't see until I actively strained to carefully watch where the focused moved and tracked by tabbing and shift+tabbing many times. Unfortunately there are some color combinations that are > 3:1 but are very hard to see. Hopefully such combinations will get caught when we update contrast needs in WCAG 3.0.
JAWS-test
commented
3 years ago @goodwitch: I guess example C is hard for all people to see. However, I also think that Example C does not meet WCAG SC 2.4.11 because the contrast between the outline and border of the button is only 1.8:1, which is less than 3:1. If I make the border white, the contrast is sufficient according to SC 2.4.11, but the visibility is not better.
I assume that "adjacent colors" refers to both sides of the focus indicator (i.e., for an outline, the inner and outer sides). However, I can't find this in Understanding at the moment (but maybe I missed it). If it is currently not explicitly formulated in the Understanding, I suggest adding this (contrast on both sides must be 3:1)
Example D is also difficult to recognize, even if it clearly fulfills SC 2.4.11. In the Understanding, I can hardly see the focus indicator in the Figure 15+16 examples as well
JAWS-test
commented
3 years ago @mraccess77: I'm afraid I don't understand your example. Can you send a screenshot when the button does not have the focus?
alastc
commented
3 years ago I wanted to confirm in situations where there is both a color swap for the indicator and the indicator also touches the background and where not the whole component background is swapped that the color swap alone is enough to meet 2.4.7 and SC 1.4.11 would not apply or would pass but not fail.
2.4.7 yes, any indicator passes. For 1.4.11, I think the agreement was that buttons don't require a border/background with the surrounding to pass, so it would be odd if the focus style means the the non-failing element-background then fails.
I'm most curious to see if y'all think example C passes
That's really tough to see. Apart from a friend who is colour blind and easily sees dark blue/purple on black, I think most people would find that hard.
I think it is partly a factor of the extreme contrast of the button to background, there is a concept called 'local adaptation' (another example), which makes subtle differences in contrast harder to see.
If you reverse the white/black, suddenly it gets easier to see, even though the contrast is exactly the same:
It is also right on the edge of the contrast ratio. The only solution I can see would be to require thicker indicators, or increase the contrast ratio to 4.5:1. In either case, you would then be able to show examples which are clearly visible but fail the SC. I think it's the nature of the contrast algorithm that we have in WCAG 2.x.
goodwitch
commented
3 years ago @alastc one more question. Is it true that the proposal for WCAG 2.2 SC 2.4.11 Focus Appearance Minimum that a button with the following parameters would pass 2.4.11 (as drafted today)?
the light purple focus ring contrasts with the button at an 8.2 to 1 ratio. But only contrasts with the white background at 2.5 to 1. In other words...does the 'Adjacent contrast' clause of the 2.4.11 editor's draft require the contrast on both the inside AND the outside (if it is 1 px thick)?
I do think this would meet 2.4.11 (as currently drafted) because at 2px width...I think it is not required to contrast with the adjacent background....but it MUST have 3 to 1 between the focus indicator and the actual button
(I need to make sure I'm groking this correctly..as I have a client who wants to start using 2.4.11 as a best practice guide even though it is still in editor's draft.)
alastc
commented
3 years ago If the focus ring is outside the button, the change of contrast (white>purple) is 2.5:1, and would fail the change-of-contrast bullet. I.e. the color that the purple replaces is white. It also fails the adjacent contrast to the outside of the element.
If the focus ring was the border, i.e. it changed from black to light purple, that would pass the change-of-contrast, but fail the adjacent contrast (at 1px).
For the second example, if the focus ring is outside the button it would still be failing the change of contrast.
If the second example was the border and 2px thick, that would pass both.
That might seem odd when you have good vision, but if you take the two screenshots above and amp up the brightness (to simulate a difficulty to see low-contrast colours), the second one is easier to see because it (effectively) changes the shape of the button:
In previous issues we discussed that focus indicators that are color swaps aren't covered by 1.4.11. We also discussed that when comparing adjacent colors for purposes of a focus indicator we are focused on the adjacent color being the background next to the component and not colors from the component. I wanted to confirm in situations where there is both a color swap for the indicator and the indicator also touches the background and where not the whole component background is swapped that the color swap alone is enough to meet 2.4.7 and SC 1.4.11 would not apply or would pass but not fail. That is we don't need to test the page background to the focus indicator color because that is not what is used to communicate focus - what is used to communicate focus is the color swap itself which isn't applicable to SC 1.4.11. Screenshot below with focused state purple button with lighter purple background in the middle that is adjacent to the white page background.