G195 - Test procedure #6 conflicts with test results

[chlane]

Under the Test Procedure heading for G195 , step #6 "If the focus indicator does not have 3:1 contrast ratio with its adjacent colors, check that it is at least 2px thick" negates #5 because it allows for a border to be low contrast as long as it is 2px thick.

While the Expected Results text below addresses this

Expected Results
Checks #2, #4, #5 and #6 are true.

People are using this text to argue that they do not have to provide a 3:1 contrast ratio for focus indication as long as it has a 2px border.

[chlane]

Trying to advise developers against implementations like a yellow border against a white background.

HTML: <button class="border">This is a button</button>

CSS:
.border:focus {
  border: 2px solid yellow;
  outline: yellow; 
}

[mraccess77]

@chlane currently the draft of SC 2.4.11 allows for size changes of 2px to indicate focused state without requiring any minimum contrast to adjacent pixels.

[chlane]

@mraccess77 Hey Jon ;). I think that clears it up. The current language does not say that the size needs to change by 2px, it says "check that it is at least 2px thick". If it could be changed to "check that it is at least 2px thicker than the original size" that would solve our problem of developers wanting to provide low contrast 2px borders.

IMO, it should not simply change by 2px but it should increase by 2px.

[mraccess77]

If you were to use a 2px wide focus indicator that was not thicker than the control -say inset - then the clause "Color changes used to indicate focus have at least a 3:1 contrast ratio with the colors changed from the unfocused control." would seem to kick in requiring contrast with the previous state. I am fully aware that in reality it is difficult for users to compare both states especially in magnified areas where you might only have one control in the viewport. So there certainly are ways to game the criteria.

[chlane]

@mraccess77 thanks Jon, is there anything we can do to prevent gaming the criteria like add some language or even a comment here in this bug? Simply having a 2px wide focus indicator whether it is inset or outset should not negate the need for a 3:1 contrast ratio against the color behind the focus indicator.

[mraccess77]

Hi @chlane opening up a specific issue for this item in Github that is not related to a technique is probably the best way to get a direct response to the specific situation related to the SC wording. Since this topic has been discussed before there is a possibility that it may not be addressed in the SC but could be addressed in other places including encouraging people to go beyond the requirements in the understanding documentation.

[chlane]

@mraccess77 Thanks Jon, I created a specific issue and referenced this one.

[alastc]

Looking at the last two points in the procedure:

5. Check that the change of contrast of the indicator between focused and unfocused states has a ratio of 3:1 for the minimum focus indicator area.
6. If the focus indicator does not have 3:1 contrast ratio with its adjacent colors, check that it is at least 2px thick.

I think what is being missed is that 5 is talking about change of contrast, and 6 is talking about adjacent contrast.

Yellow on white would fail (the new SC's) change of contrast, regardless of thickness or adjacent contrast.

To be fair, in WCAG 2.1 it is non-text contrast that it is failing, not focus-visible, we should clarify that technique in 2.1 materials.

[chlane]

Hi @alastc I think you are right, adjacency is not being considered as it should be. This means there is no problem with the verbiage, just misunderstanding on our end. Thanks for the help.

[yatil]

The test procedure currently reads:

Tests

Procedure

1. Place focus on each focusable user interface element on the page using the keyboard.
2. Check that there is a highly visible focus indicator.
3. Check that the focus indicator area is at least the size of a 1 CSS px border around the component.
4. Check that the change of contrast of the indicator between focused and unfocused states has a ratio of 3:1 for the minimum focus indicator area.
5. If the focus indicator does not have 3:1 contrast ratio with its adjacent colors, check that it is at least 2px thick.

Expected Results

Checks # 2, # 4, and # 5 are true.

It is super hard to follow because the important parts are in the middle of long similar looking sentences. And check number 5 has two checks in it (check for contrast, then check for thickness). I propose the following rewrite:

Tests

Procedure

1. Place focus on each focusable user interface element on the page using the keyboard.
2. Check that the focus is indicated visually.
3. Check that the focus indicator area is at least as large as a 1 CSS pixel border around the component.
4. Check that this area has a change of contrast of at least 3:1 between the unfocused and focused states.
5. Check that one of these checks is true:
   1. Check that this area has a 3:1 contrast ratio has a 3:1 contrast to adjacent pixels.
   2. Check that this area has at least as large as a 2 CSS pixel border around the component.

Expected Results

Checks # 2, # 3, # 4, and either # 5.1 or # 5.2 are true.

---

Notes: I think this test checks for high visibility, so checking for highly visible focus indicator in step 2 is recursive checking, but I might miss something. I also added non-breaking space between the # and the numbers to not link other GitHub issues.