RE: 1.4.11 if a button has a background less than 3:1 and no border does it pass

I raised a similar question back in February which Alistair kindly responded to. I have added a summary of this to the GitHub page and agree that it would be useful to add an example to the understanding document.

If the shape and size of the hit area is out of scope of 1.4.11 then should text on buttons be treated as per link text for 1.41.1 in that the link text should have sufficient contrast and additional visual cues with surrounding text when colour alone is used to identify it as per technique G183 https://www.w3.org/TR/WCAG20-TECHS/G183.html


Best wishes

Abi James

From: David MacDonald <david100@sympatico.ca>
Sent: 25 June 2019 19:00
To: Alastair Campbell <acampbell@nomensa.com>
Cc: WCAG <w3c-wai-gl@w3.org>; Andrew Kirkpatrick <akirkpat@adobe.com>
Subject: Re: 1.4.11 if a button has a background less than 3:1 and no border does it pass

Hi Alastair

I've reread the thread and see that our current interpretation is that in order to assess whether the border or background is "required to identify" the button, we need to imagine any border or background less than 3:1 is not there, and then determine whether it is enough to know its a button.

So the text (with positioning, space etc) must sufficiently identify it is a button, since we are disregarding the border and/or background that is below 3:1.

What would be an example of a button that has a text label that fails 1.4.11?   In light of this interpretation, (which I can accept, since its there in the thread), I can't come up with failing example of a stand alone button that fails 1.4.11, as long as their is space around it etc...

If I'm right in that I think we should add that to the Understanding Doc.


Cheers,
David MacDonald



CanAdapt Solutions Inc.

Tel:  613-806-9005

LinkedIn
<https://eur03.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.linkedin.com%2Fin%2Fdavidmacdonald100&data=01%7C01%7Ca.james%40soton.ac.uk%7C68bc935c0f924e768c6008d6f997187d%7C4a5378f929f44d3ebe89669d03ada9d8%7C0&sdata=bmHd1iPaquO%2F%2FZOzTLapl0CV%2BRDmN2pVhGk16rvWnbw%3D&reserved=0>

twitter.com/davidmacd<https://eur03.safelinks.protection.outlook.com/?url=http%3A%2F%2Ftwitter.com%2Fdavidmacd&data=01%7C01%7Ca.james%40soton.ac.uk%7C68bc935c0f924e768c6008d6f997187d%7C4a5378f929f44d3ebe89669d03ada9d8%7C0&sdata=hY7BWBrdYs%2B2e07PpkERfMc5X2lxb%2FwWiC8GLabv874%3D&reserved=0>

GitHub<https://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FDavidMacDonald&data=01%7C01%7Ca.james%40soton.ac.uk%7C68bc935c0f924e768c6008d6f997187d%7C4a5378f929f44d3ebe89669d03ada9d8%7C0&sdata=l6C%2FoqdMKpvxC0hlCl1iKx0HokqIeyQub1LB9Kw3V7Q%3D&reserved=0>

www.Can-Adapt.com<https://eur03.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.can-adapt.com%2F&data=01%7C01%7Ca.james%40soton.ac.uk%7C68bc935c0f924e768c6008d6f997187d%7C4a5378f929f44d3ebe89669d03ada9d8%7C0&sdata=oB0WifzW5TcWZtJmHYGlbaMZi4CFXkSGhJwo4aGaZkY%3D&reserved=0>



  Adapting the web to all users
            Including those with disabilities

If you are not the intended recipient, please review our privacy policy<https://eur03.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.davidmacd.com%2Fdisclaimer.html&data=01%7C01%7Ca.james%40soton.ac.uk%7C68bc935c0f924e768c6008d6f997187d%7C4a5378f929f44d3ebe89669d03ada9d8%7C0&sdata=yLFf2C83vbxleFMMf58vpy0x5OUogRBUNPhMBqPyvuw%3D&reserved=0>


On Tue, Jun 25, 2019 at 1:26 PM Alastair Campbell <acampbell@nomensa.com<mailto:acampbell@nomensa.com>> wrote:
Hi David,

To set the context, this was part of a conversation just prior to 2.1 publication, see this thread:
https://lists.w3.org/Archives/Public/w3c-wai-gl/2018AprJun/0542.html<https://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Flists.w3.org%2FArchives%2FPublic%2Fw3c-wai-gl%2F2018AprJun%2F0542.html&data=01%7C01%7Ca.james%40soton.ac.uk%7C68bc935c0f924e768c6008d6f997187d%7C4a5378f929f44d3ebe89669d03ada9d8%7C0&sdata=64NSPPwSpKZA02jMjXXh%2Fd4g9VPZhzwAlYbD9XGSRWo%3D&reserved=0>

Also, with that and subsequent discussions we had a large update to non-text contrast:
https://lists.w3.org/Archives/Public/w3c-wai-gl/2018AprJun/0542.html<https://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Flists.w3.org%2FArchives%2FPublic%2Fw3c-wai-gl%2F2018AprJun%2F0542.html&data=01%7C01%7Ca.james%40soton.ac.uk%7C68bc935c0f924e768c6008d6f997187d%7C4a5378f929f44d3ebe89669d03ada9d8%7C0&sdata=64NSPPwSpKZA02jMjXXh%2Fd4g9VPZhzwAlYbD9XGSRWo%3D&reserved=0>

The TL;DR was:
There are instances where having a background or subtle border is not an issue, and requiring it would be likely to cause designers to remove them, rather than up the contrast.

HTH,

-Alastair

Apologies for typos, sent from a mobile.
________________________________
From: David MacDonald <david100@sympatico.ca<mailto:david100@sympatico.ca>>
Sent: Tuesday, June 25, 2019 5:38:35 PM
To: WCAG; Alastair Campbell; Andrew Kirkpatrick
Subject: 1.4.11 if a button has a background less than 3:1 and no border does it pass

On the call "Example 3" on this page was presented as a pass of 1.4.11.
https://alastairc.uk/tests/wcag21-examples/ntc-focus-styles.html<https://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Falastairc.uk%2Ftests%2Fwcag21-examples%2Fntc-focus-styles.html&data=01%7C01%7Ca.james%40soton.ac.uk%7C68bc935c0f924e768c6008d6f997187d%7C4a5378f929f44d3ebe89669d03ada9d8%7C0&sdata=xJMY%2FtCgy%2BLAitkH5OX3JtKpL%2BxQMe3M%2Bd6u2Mfxh%2B0%3D&reserved=0>

 It confused me and I want to check my assumptions with others on our current interpretation of 1.4.11. I would like to get others opinion on two scenarios. Do these pass of fail?

1) a button has a background but it is less than 3:1 contrast  (no border). The button text is 4.5:1 on the button background as per 1.4.3.
2) a button has a visible border and background but both are less than 3:1 contrast against the page color. The button text is 4.5:1 on the button background as per 1.4.3

The text of the SC is this:
          Visual information required to identify user interface components and states ... [has 3:1 contrast]

Is the text "Example 3" enough to know that this is a user interface component without perceiving the grey background.
If Example #3 had a border less than 3:1 would it pass 1.4.11

My feeling is that the words "Example 3" is not enough to know that this is an interactive control.  If an author is creating a background for a button to indicate it is a button, doesn't that background need to meet 3:1?

And if an author puts a border around a button, doesn't that border need to meet 3:1?

Whatever our consensus on what is necessary to know a button is an interactive control, I'd like to make it explicit in the understanding for 1.4.11.

My interpretation is that if there is no background and border, then low vision people have no disadvantage but if there is a visible border or background then the SC kicks in and there needs to be sufficient contrast in the button or border. What do others think?


Cheers,
David MacDonald



CanAdapt Solutions Inc.

Tel:  613-806-9005

LinkedIn
<https://eur03.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.linkedin.com%2Fin%2Fdavidmacdonald100&data=01%7C01%7Ca.james%40soton.ac.uk%7C68bc935c0f924e768c6008d6f997187d%7C4a5378f929f44d3ebe89669d03ada9d8%7C0&sdata=bmHd1iPaquO%2F%2FZOzTLapl0CV%2BRDmN2pVhGk16rvWnbw%3D&reserved=0>

twitter.com/davidmacd<https://eur03.safelinks.protection.outlook.com/?url=http%3A%2F%2Ftwitter.com%2Fdavidmacd&data=01%7C01%7Ca.james%40soton.ac.uk%7C68bc935c0f924e768c6008d6f997187d%7C4a5378f929f44d3ebe89669d03ada9d8%7C0&sdata=hY7BWBrdYs%2B2e07PpkERfMc5X2lxb%2FwWiC8GLabv874%3D&reserved=0>

GitHub<https://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FDavidMacDonald&data=01%7C01%7Ca.james%40soton.ac.uk%7C68bc935c0f924e768c6008d6f997187d%7C4a5378f929f44d3ebe89669d03ada9d8%7C0&sdata=l6C%2FoqdMKpvxC0hlCl1iKx0HokqIeyQub1LB9Kw3V7Q%3D&reserved=0>

www.Can-Adapt.com<https://eur03.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.can-adapt.com%2F&data=01%7C01%7Ca.james%40soton.ac.uk%7C68bc935c0f924e768c6008d6f997187d%7C4a5378f929f44d3ebe89669d03ada9d8%7C0&sdata=oB0WifzW5TcWZtJmHYGlbaMZi4CFXkSGhJwo4aGaZkY%3D&reserved=0>



  Adapting the web to all users
            Including those with disabilities

If you are not the intended recipient, please review our privacy policy<https://eur03.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.davidmacd.com%2Fdisclaimer.html&data=01%7C01%7Ca.james%40soton.ac.uk%7C68bc935c0f924e768c6008d6f997187d%7C4a5378f929f44d3ebe89669d03ada9d8%7C0&sdata=yLFf2C83vbxleFMMf58vpy0x5OUogRBUNPhMBqPyvuw%3D&reserved=0>