RE: focus visible

HI Alastair, separated is more clear to me – but I understand we need to allow different states.  So requiring 2px why when there is no separation makes sense.    From what I understand this would still leave open the inverting techniques which flip the background and foreground colors for the focus state.  While I find this confusing personally especially when there is only 1 or 2 buttons on the screen at a time – as you mentioned that’s a separate issue that applies with borders as well and is something to discuss.

Jonathan

Jonathan Avila, CPWA
Chief Accessibility Officer
Level Access
jon.avila@levelaccess.com
703.637.8957 office
Visit us online:
Website<http://www.levelaccess.com/> | Twitter<https://twitter.com/LevelAccessA11y> | Facebook<https://www.facebook.com/LevelAccessA11y/> | LinkedIn<https://www.linkedin.com/company/level-access> | Blog<http://www.levelaccess.com/blog/>

[The State of Digital Accessibility 2019 report is here! Download the report today to read the findings. Level Access]<https://levelaccess.com/state-of-digital-accessibility-2019>

The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.

From: Alastair Campbell <acampbell@nomensa.com>
Sent: Tuesday, August 13, 2019 4:22 AM
To: Jonathan Avila <jon.avila@levelaccess.com>
Cc: public-low-vision-a11y-tf <public-low-vision-a11y-tf@w3.org>
Subject: Re: focus visible

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.

Hi Jon,

Sort of, let me provide some examples in colour. I think it is likely that people simply cannot (in any reasonable design) maintain a 3-way contrast, but contrast isn’t the only lever.

I created the following examples in a graphics programme so I’m not sure that 1px = 1px exactly, but I think it conveys the idea. The second button is always ‘default’, without focus style, for comparison.

Without the thickness/separation requirement this would pass the proposed SC, which is equivalent to adding a 1px black outline to a solid black button:
[cid:image011.png@01D553AE.16565830]

For those struggling to see it, there is a 1px red line around the left-hand solid blue button.

The changed pixels are going from white to dark red, so meet 3:1. However, the blue-red contrast ratio is 1:1.6, so if you can’t discern the hue then it is just a slightly thicker button.

With the thickness/separation requirement, the following would be alternative ways of meeting it with the same sort of design:

[cid:image012.png@01D553AE.16565830]
Same thickness, but separated.

[cid:image013.png@01D553AE.16565830]
Thicker (2px) line.

[cid:image014.png@01D553AE.16565830]
The minimum pixel requirement would be a 1px line along the longest side, in which case it would need separating.

[cid:image015.png@01D553AE.16565830]
If it wasn’t separated, it would need to be 2px thick.

This particular case would be applicable to buttons (or other things) with a solid background or outer border, it wouldn’t affect buttons that don’t have an outer border. In that case a 1px focus outline would work as it is already separated.

Cheers,

-Alastair


From: Jonathan Avila

Hi Alastair, I think what you are saying about the thickness is that if the color is < 3:1 then we would allow size difference to count – is that correct?   I guess we’d need to agree as a group as to when < 3:1 was acceptable and then determine what is a apparent enough change for users to detect.

Jonathan

From: Alastair Campbell <acampbell@nomensa.com<mailto:acampbell@nomensa.com>>
Sent: Friday, August 9, 2019 10:33 AM
To: public-low-vision-a11y-tf <public-low-vision-a11y-tf@w3.org<mailto:public-low-vision-a11y-tf@w3.org>>
Subject: Re: focus visible

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.

Hi everyone,

I wasn’t sure from the minutes if there were any additions / thoughts about the new focus-visible criteria?

Jim’s comment (in a co-ordination call) about separation of lines helping perception helped triggered a thought.

This is my test page with some black/white/grey examples to test various options:
https://alastairc.uk/tests/wcag21-examples/ntc-focus-styles.html


Comparing examples 4 & 6 (dark border with dark outline vs an out-set outline), I wondered about adding another requirement such as:

Minimum focus thickness: If the focus indication area is adjacent to a color with which it does not have a 3:1 contrast ratio difference, the thickness of the focus indicator is at least 2 CSS pixel.

I.e. if you put a dark outline around a dark button, it must be 2px thick. If you separate it, it can be 1px thick.

So this would fail:
[cid:image016.png@01D553AE.16565830]
But either of these would pass:
[cid:image017.png@01D553AE.16565830]
[cid:image018.png@01D553AE.16565830]
It probably needs re-wording, but does that idea make sense? And if so, are there any pointers to supporting research?

Cheers,

-Alastair