Focus appearance rewording of bullet 2 for Focus Visible (Enhanced)

[mbgower]

The second bullet of Focus visible (enhanced) reads:

Color changes used to indicate focus have at least a 3:1 contrast ratio with the colors changed from the unfocused control.

The phrase 'with colors changed from..." is awkward. Suggest a rewording of:

Change of contrast: Color changes used to indicate focus have a contrast ratio of at least 3:1 with the colors in the unfocused control.

could also make it "...with the replaced colors..."

Color changes used to indicate focus have a contrast ratio of at least 3:1 with the replaced colors from the unfocused control.

[updated July 22]

[ajanec01]

I'm not sure if I understand correctly the Focus contrast bullet point. Most people that I've spoken to believe that this point is restricted only to a visual indicator required to identify focus or the minimum focus indication area.

To me, it reads as if all changes of colour must have enough contrast ratio. It's because this point, not like the first and the third bullet point, is not explicitly referring to minimum focus indication area or a visual indicator required to identify the focus state. It feels like it is implied.

For example, the default state of a link is a white background, black text, and a thin underline (images attached). The focus state of the same element is a light yellow background, black text with a thicker underline. I would consider that to be a fail of the focus contrast bullet point despite of the thick underline being the visual indicator required to indicate the focus state

In my opinion, the focus contrast point should go something in the line of "Color changes of visual indicators required to identify focus have at least a 3:1 contrast ratio with the colors in the unfocused control." It would be in line with sc 1.4.11

[alastc]

Hi ajanec01,

To me, it reads as if all changes of colour must have enough contrast ratio.

In combination with the first bullet, the indicator which meets bullet 2 (change of contrast), must also meet bullet 1 (size).

If the thick underline meets the size requirement (3px thick would do it), then it meets the size requirement.

It is a similar concept to the example of gradients. We don't want to punish extra indication, just make sure there is a minimum.

If we took your proposed text, then I think it would require the yellow background to meet contrast, which is not the intent.

[ajanec01]

Hi @alastc

Thanks for the clarification! Yes, I think that the understanding section and mainly the example of gradients convey the intent.

I'm just not so sure about the wording of the focus contrast point. I see some sort of disconnect between bullet point number two and the other points. The creation of the minimum area bullet point and the last note indicate two focus indication areas: minimum focus indication area and parts which are not within the minimum area. As such, the way I read it at the moment is:

• Minimum area- there must be a focus indicator with the size of no less than 2 times the longest side of the rectangle. Could be more.
• Focus contrast- colour changes need to have enough contrast ratio. There is no mention about the minimum focus indication area so I would assume that it applies to the minimum area and everything above it.
• Contrast or thickness- the minimum focus indication area has at least 3:1 contrast ratio against adjacent colours or is at least 2px wide

I actually thought that by adding the phrase "required to identify focus" would exclude the parts of focus indication that are not required for conformance, i.e. the background colour change or anything above the minimum area. I also thought that it would be consistent with sc 1.4.11 where the "required to identify" is also used and it is limiting the scope of what needs to be tested.

[alastc]

FYI, the text has changed since the first draft, latest is in this understanding doc.

For the keyboard focus indicator of each User Interface Component, all of the following are true:

• Minimum area: The focus indication area is greater than or equal to a 1 CSS pixel border of the focused control, or has a thickness of at least 8 CSS pixels along the shortest side of the element.
• Change of contrast: Color changes used to indicate focus have a contrast ratio of at least 3:1 with the colors changed from the unfocused control.
• Adjacent contrast: The focus indication area has a contrast ratio of at least 3:1 against all adjacent colors for the minimum area or greater, or has a thickness of at least 2 CSS pixels.
• Unobscured: The item with focus is not entirely hidden by author-created content

I'll have a think, it would need to be a careful change.

[alastc]

Perhaps the most straightforward change would be:

"Change of contrast: The color change for the focus indication area has a contrast ratio of at least 3:1 with the colors of the unfocused state."

[ajanec01]

That sounds good to me! There would be a clear connection between the first three bullet points. Also, the first paragraph is more specific than the one in the first draft.

Thanks for the link to the latest version! I was referencing the old one as that's the one being used on the understanding focus visible page.

[alastc]

That link is for the old 2.4.7, which doesn't have any of the language, I think you were referencing the 1st draft.

Anyway, we should have the new text up in the next 2-3 weeks.

[ajanec01]

Yes I was, sorry for the confusion. Thanks for coming back!

[alastc]

Closing, change approved in the meeting https://www.w3.org/2020/07/21-ag-minutes.html#item05