Re: Focus appearance updates

Hi Gundula (and everyone),

Just for context, in a previous version for review we had an AAA version that was more strict:
https://www.w3.org/TR/2021/WD-WCAG22-20210521/#focus-appearance-enhanced

That was asking for a 2 x 1px perimeter and 4.5 : 1 contrast.

Our current consensus position (pre CFC) is that it moves to AAA as-is, however, I’d like to give a little time in the meeting later to discussing appropriate changes for a AAA version.

Kind regards,

-Alastair


From: Niemann, Gundula
Though Google’s research definitely is interesting, I feel it is not sufficient to drop other focus designs than a two pixel solid outline.
Only one single control was tested (button), and this control in only one design (filled blue background).
It does not say anything on how the focus looks with input fields, tables, in calendar sheets (date pickers).
It also does not show how different focus indicator appearances work with other designs of the control, like a transparent button, or other colors.
There are many focus indicator designs which have not been tested (dotted, dashed (both with different widths), 4px strike on the left side, half-moons, to name a few options which we already discussed over the past years), and more designs are thinkable.
Last but not least the appearance was not tested on a real page. Depending on the overall control design, a two pixel outline might not stand out.
On the other hand, creative solutions which stand out and are easy to spot might not need to cover a tremendous amount of pixels.

Therefore I do not feel it justifies to double the area to be covered by the focus indicator.

I agree part 2 is sufficient, as every focus indicator fulfilling part 1 also fulfills part 2.

The result would be:


  1.  When the keyboard focus indicator<https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FWAI%2FWCAG22%2FUnderstanding%2Ffocus-appearance%23dfn-focus-indicator&data=05%7C01%7Cacampbell%40nomensa.com%7C8a29f4a9d4f1436cff6c08db2eb2a70c%7Cebea4ad6fbbf43bd8449c56e26692c35%7C0%7C0%7C638155117069117053%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=AZXiNQjKDtFf7BTDHG0uuFxbH%2FBYEjo7GLYvgmXpl%2Bo%3D&reserved=0> is visible, an area of the focus indicator meets all the following:
     *   is at least as large as the area of a 1 CSS pixel<https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FWAI%2FWCAG22%2FUnderstanding%2Ffocus-appearance%23dfn-css-pixel&data=05%7C01%7Cacampbell%40nomensa.com%7C8a29f4a9d4f1436cff6c08db2eb2a70c%7Cebea4ad6fbbf43bd8449c56e26692c35%7C0%7C0%7C638155117069117053%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=716S6vpbTGCbE7LyYIr9cqS%2FRgq1QK6OWUDcxqeRWX0%3D&reserved=0> thick perimeter<https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FWAI%2FWCAG22%2FUnderstanding%2Ffocus-appearance%23dfn-perimeter&data=05%7C01%7Cacampbell%40nomensa.com%7C8a29f4a9d4f1436cff6c08db2eb2a70c%7Cebea4ad6fbbf43bd8449c56e26692c35%7C0%7C0%7C638155117069117053%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=4LRDrrZfXTEnRwd70oF391%2FUroiT609a6mv34Lq7oZQ%3D&reserved=0> of the unfocused component or sub-component, or is at least as large as a 4 CSS pixel thick line along the shortest side of the minimum bounding box<https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FWAI%2FWCAG22%2FUnderstanding%2Ffocus-appearance%23dfn-minimum-bounding-box&data=05%7C01%7Cacampbell%40nomensa.com%7C8a29f4a9d4f1436cff6c08db2eb2a70c%7Cebea4ad6fbbf43bd8449c56e26692c35%7C0%7C0%7C638155117069273239%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=fP6GtCDciHpUMXAbPQTHxskHzJtKQDT2%2FV3eQQPrulo%3D&reserved=0> of the unfocused component or sub-component, and
     *   has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and
     *   has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.



From: Dan Bjorge <Dan.Bjorge@microsoft.com>
Sent: Freitag, 24. März 2023 04:01
To: Michael Gower <michael.gower@ca.ibm.com>; Alastair Campbell <acampbell@nomensa.com>; WCAG list (w3c-wai-gl@w3.org) <w3c-wai-gl@w3.org>
Subject: RE: Focus appearance updates

Sie erhalten nicht oft eine E-Mail von dan.bjorge@microsoft.com<mailto:dan.bjorge@microsoft.com>. Erfahren Sie, warum dies wichtig ist<https://aka.ms/LearnAboutSenderIdentification>
I am in favor of strengthening the requirements at AAA per the presented research, but could live with moving to AAA as is. If we do strengthen it, I think the changes suggested in Alastair’s post make sense, and I am also fine with dropping the “is no thinner than 2 CSS pixels” from the final bullet and demanding adjacent contrast like Mike G suggested.

I think “at least as large as the area of a 2 CSS pixel<https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG22%2F%23dfn-css-pixels&data=05%7C01%7Cacampbell%40nomensa.com%7C8a29f4a9d4f1436cff6c08db2eb2a70c%7Cebea4ad6fbbf43bd8449c56e26692c35%7C0%7C0%7C638155117069273239%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=fDUnSrQMiIhiLQ%2FjCAzu2v429hG2cOQJNrUyPA96xww%3D&reserved=0> thick perimeter<https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG22%2F%23dfn-perimeter&data=05%7C01%7Cacampbell%40nomensa.com%7C8a29f4a9d4f1436cff6c08db2eb2a70c%7Cebea4ad6fbbf43bd8449c56e26692c35%7C0%7C0%7C638155117069273239%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=XQ%2BE9cCCQcxtUyKJYiPAS%2FrBJJtiM5dru84et%2BAAMoQ%3D&reserved=0>” might be a bit ambiguous, though. For rectangles, I bet some folks will interpret this as “double the formula we specify in Example 16 of the perimeter definition<https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG22%2F%23example-16&data=05%7C01%7Cacampbell%40nomensa.com%7C8a29f4a9d4f1436cff6c08db2eb2a70c%7Cebea4ad6fbbf43bd8449c56e26692c35%7C0%7C0%7C638155117069273239%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=N%2Fyd0l8LKSM6odzKIuBBGZCgDVZGPnMr%2Fq9eHWj4do8%3D&reserved=0>” and some folks will interpret this as “the number of pixels if you draw a 2px thick line with 1px of thickness on either side of the boundary of the shape”, which give answers that are off by 8px2 from one another. It might be less ambiguous either to use something like “twice the area of a 1 CSS pixel thick perimeter” or alternately to update the example formulas in Example 16 to show how to calculate 2px thick perimeter areas directly.

-Dan

From: Michael Gower <michael.gower@ca.ibm.com<mailto:michael.gower@ca.ibm.com>>
Sent: Thursday, March 23, 2023 11:23 AM
To: Alastair Campbell <acampbell@nomensa.com<mailto:acampbell@nomensa.com>>; WCAG list (w3c-wai-gl@w3.org<mailto:w3c-wai-gl@w3.org>) <w3c-wai-gl@w3.org<mailto:w3c-wai-gl@w3.org>>
Subject: Re: Focus appearance updates

You don't often get email from michael.gower@ca.ibm.com<mailto:michael.gower@ca.ibm.com>. Learn why this is important<https://aka.ms/LearnAboutSenderIdentification>
I think it is shorter without part 1, and we can demo a fully enclosed with a nice technique.

The lift to something as big as a 2px perimeter addresses some of the findings from Google, and as a AAA, I think it’s reasonable to seek that.

I do wonder if we can remove the “or is no thinner than 2 CSS pixels” from the final bullet?

Google’s research suggested that lacking the contrast made it more difficult to locate the indicator, especially when there was not neighbouring components to assess what can amount to just a smallish size difference. If we’re at AAA, I think we can make the bar a bit higher and insist on the contrast with adjacent non-focus indicator.

Those are shopping list items for me. I can abide your proposal, but I do think we can be a bit pickier.
Mike




From: Alastair Campbell <acampbell@nomensa.com<mailto:acampbell@nomensa.com>>
Date: Tuesday, March 21, 2023 at 9:54 AM
To: WCAG list (w3c-wai-gl@w3.org<mailto:w3c-wai-gl@w3.org>) <w3c-wai-gl@w3.org<mailto:w3c-wai-gl@w3.org>>
Subject: [EXTERNAL] Focus appearance updates
Hi everyone, Based on the survey and the call today, we agreed to move Focus Appearance to AAA. If we can make some further modifications, we should work out what those are. It isn’t clear what would count as ‘substantive’, as we are creating
ZjQcmQRYFpfptBannerStart
This Message Is From an External Sender
This message came from outside your organization.
ZjQcmQRYFpfptBannerEnd
Hi everyone,

Based on the survey and the call today, we agreed to move Focus Appearance to AAA.

If we can make some further modifications, we should work out what those are.

It isn’t clear what would count as ‘substantive’, as we are creating requirements rather than features. Moved to AAA we have reduced the requirement in practice.

Another fairly straightforward change would be to remove the ‘part 1’ of the SC. That would at least make it smaller, if not simpler. It would not affect conformance, as anything that passes part 1 would pass part 2.

I can see two other changes that could be appropriate at AAA.

  1.  Simplify the ‘size’ bullet, e.g. remove the 4 times shortest side measure.
  2.  Increase the size requirement to 2 CSS pixel thick perimeter.

All of those together would leave us with:

When the keyboard focus indicator<https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG22%2F%23dfn-focus-indicator&data=05%7C01%7Cacampbell%40nomensa.com%7C8a29f4a9d4f1436cff6c08db2eb2a70c%7Cebea4ad6fbbf43bd8449c56e26692c35%7C0%7C0%7C638155117069273239%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=y4FLMVEWqL96qJ%2F0SGUEj79ZbjJZgRuMLB2G5jpyRUo%3D&reserved=0> is visible, an area of the focus indicator meets all the following:
·         is at least as large as the area of a 2 CSS pixel<https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG22%2F%23dfn-css-pixels&data=05%7C01%7Cacampbell%40nomensa.com%7C8a29f4a9d4f1436cff6c08db2eb2a70c%7Cebea4ad6fbbf43bd8449c56e26692c35%7C0%7C0%7C638155117069273239%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=fDUnSrQMiIhiLQ%2FjCAzu2v429hG2cOQJNrUyPA96xww%3D&reserved=0> thick perimeter<https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG22%2F%23dfn-perimeter&data=05%7C01%7Cacampbell%40nomensa.com%7C8a29f4a9d4f1436cff6c08db2eb2a70c%7Cebea4ad6fbbf43bd8449c56e26692c35%7C0%7C0%7C638155117069273239%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=XQ%2BE9cCCQcxtUyKJYiPAS%2FrBJJtiM5dru84et%2BAAMoQ%3D&reserved=0> of the unfocused component or sub-component, and
·         has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and
·         has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.
(Plus the exceptions.)

Does anyone have a different approach to this, or would like to make a case for retaining the 4 x shortest side metric?

I think the overall impact, for those aiming for AAA, would be a stronger push toward outlines, and thicker outlines as well.

Kind regards,

-Alastair

--

@alastc / www.nomensa.com<https://eur01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.nomensa.com%2F&data=05%7C01%7Cacampbell%40nomensa.com%7C8a29f4a9d4f1436cff6c08db2eb2a70c%7Cebea4ad6fbbf43bd8449c56e26692c35%7C0%7C0%7C638155117069273239%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=KwKK66x3%2FAr9R2WrfGE2s2G04c%2FgmnezZQbK0ac0y30%3D&reserved=0>