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

Question:

Weren’t the Material Design results in the Google presentation based on data from study participants who worked for Google?  I looked up the entry form to become one of those testers and it basically recommended that people who are familiar with the Google interfaces to apply.  Please correct me if I’m wrong in this observation.  Strong study participant familiarity with the Material interface conventions isn’t a factor that I saw listed in the research findings slide deck.

It’d be great to have other independent research verify the findings about how all of these subtle, and nuanced visual cues add up to a clear understanding for most visually-oriented users of button status, absent any boundary on the input.

Brooks

From: Abma, J.D. (Jake) <Jake.Abma@ing.com>
Sent: Wednesday, June 26, 2019 12:06 PM
To: 'Andrew Kirkpatrick' <akirkpat@adobe.com>; David MacDonald <david100@sympatico.ca>; James A. <A.James@soton.ac.uk>
Cc: Alastair Campbell <acampbell@nomensa.com>; WCAG <w3c-wai-gl@w3.org>
Subject: RE: 1.4.11 if a button has a background less than 3:1 and no border does it pass

Same results Google / Material Design had in their presentation with the WG.

From: Andrew Kirkpatrick [mailto:akirkpat@adobe.com]
Sent: dinsdag 25 juni 2019 21:33
To: David MacDonald <david100@sympatico.ca<mailto:david100@sympatico.ca>>; James A. <A.James@soton.ac.uk<mailto:A.James@soton.ac.uk>>
Cc: Alastair Campbell <acampbell@nomensa.com<mailto:acampbell@nomensa.com>>; WCAG <w3c-wai-gl@w3.org<mailto:w3c-wai-gl@w3.org>>
Subject: Re: 1.4.11 if a button has a background less than 3:1 and no border does it pass

I think that is already the case. There are many case where users can identify that buttons with just text are buttons based on positioning and spacing and not relying just on the presence of an underline or other feature.

Thanks,
AWK

Andrew Kirkpatrick
Head of Accessibility
Adobe

akirkpat@adobe.com<mailto:akirkpat@adobe.com>
http://twitter.com/awkawk<https://urldefense.proofpoint.com/v2/url?u=http-3A__twitter.com_awkawk&d=DwMGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&r=W3VUihr49D2x8upR4FtjMIsy0FSGEnqb4ghTiQJMtRw&m=nNtBCpeq1URi7VbrBk6Q-CUapRs7VxshoIRiDfcHnaQ&s=r_ZvU-6Z4MfGm3jk7MKKKY9vc1QYX-O_BUAMNI43Qvw&e=>

From: David MacDonald <david100@sympatico.ca<mailto:david100@sympatico.ca>>
Date: Tuesday, June 25, 2019 at 3:21 PM
To: "James A." <A.James@soton.ac.uk<mailto:A.James@soton.ac.uk>>
Cc: Alastair Campbell <acampbell@nomensa.com<mailto:acampbell@nomensa.com>>, WCAG <w3c-wai-gl@w3.org<mailto:w3c-wai-gl@w3.org>>, Andrew Kirkpatrick <akirkpat@adobe.com<mailto:akirkpat@adobe.com>>
Subject: Re: 1.4.11 if a button has a background less than 3:1 and no border does it pass

I think that is a reasonable middle ground.


Cheers,
David MacDonald



CanAdapt Solutions Inc.

Tel:  613-806-9005

LinkedIn
<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.linkedin.com_in_davidmacdonald100&d=DwMGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&r=W3VUihr49D2x8upR4FtjMIsy0FSGEnqb4ghTiQJMtRw&m=nNtBCpeq1URi7VbrBk6Q-CUapRs7VxshoIRiDfcHnaQ&s=EmHwKA3cZbD5lFGNKqdRItrQHQRznhAx10R4bjxJx54&e=>

twitter.com/davidmacd<https://urldefense.proofpoint.com/v2/url?u=http-3A__twitter.com_davidmacd&d=DwMGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&r=W3VUihr49D2x8upR4FtjMIsy0FSGEnqb4ghTiQJMtRw&m=nNtBCpeq1URi7VbrBk6Q-CUapRs7VxshoIRiDfcHnaQ&s=B33flp8HgIALL3PRM_iRgZW5eUod_ptEvMbSL9GhFhQ&e=>

GitHub<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_DavidMacDonald&d=DwMGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&r=W3VUihr49D2x8upR4FtjMIsy0FSGEnqb4ghTiQJMtRw&m=nNtBCpeq1URi7VbrBk6Q-CUapRs7VxshoIRiDfcHnaQ&s=zPUne6VOvfrIKH_fwqle_t1SaFF6w9HksBbqY604BDo&e=>

www.Can-Adapt.com<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.can-2Dadapt.com_&d=DwMGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&r=W3VUihr49D2x8upR4FtjMIsy0FSGEnqb4ghTiQJMtRw&m=nNtBCpeq1URi7VbrBk6Q-CUapRs7VxshoIRiDfcHnaQ&s=NCfaHa7VEcC-u0dz8KcY1GvKF-mgilUWiA84bohrGJY&e=>



  Adapting the web to all users
            Including those with disabilities

If you are not the intended recipient, please review our privacy policy<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.davidmacd.com_disclaimer.html&d=DwMGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&r=W3VUihr49D2x8upR4FtjMIsy0FSGEnqb4ghTiQJMtRw&m=nNtBCpeq1URi7VbrBk6Q-CUapRs7VxshoIRiDfcHnaQ&s=Fhz0pjMux4YtF8RAeZH1LrSqiKSg3mHLiKgNIYiV1xo&e=>


On Tue, Jun 25, 2019 at 2:16 PM James A. <A.James@soton.ac.uk<mailto:A.James@soton.ac.uk>> wrote:
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<mailto:david100@sympatico.ca>>
Sent: 25 June 2019 19:00
To: Alastair Campbell <acampbell@nomensa.com<mailto:acampbell@nomensa.com>>
Cc: WCAG <w3c-wai-gl@w3.org<mailto:w3c-wai-gl@w3.org>>; Andrew Kirkpatrick <akirkpat@adobe.com<mailto: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://urldefense.proofpoint.com/v2/url?u=https-3A__eur03.safelinks.protection.outlook.com_-3Furl-3Dhttp-253A-252F-252Fwww.linkedin.com-252Fin-252Fdavidmacdonald100-26data-3D01-257C01-257Ca.james-2540soton.ac.uk-257C68bc935c0f924e768c6008d6f997187d-257C4a5378f929f44d3ebe89669d03ada9d8-257C0-26sdata-3DbmHd1iPaquO-252F-252FZOzTLapl0CV-252BRDmN2pVhGk16rvWnbw-253D-26reserved-3D0&d=DwMGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&r=W3VUihr49D2x8upR4FtjMIsy0FSGEnqb4ghTiQJMtRw&m=nNtBCpeq1URi7VbrBk6Q-CUapRs7VxshoIRiDfcHnaQ&s=Qr3YkFzGR17CZXrJ9vddIve2mjB_7ruNYMb3Tm-49lA&e=>

twitter.com/davidmacd<https://urldefense.proofpoint.com/v2/url?u=https-3A__eur03.safelinks.protection.outlook.com_-3Furl-3Dhttp-253A-252F-252Ftwitter.com-252Fdavidmacd-26data-3D01-257C01-257Ca.james-2540soton.ac.uk-257C68bc935c0f924e768c6008d6f997187d-257C4a5378f929f44d3ebe89669d03ada9d8-257C0-26sdata-3DhY7BWBrdYs-252B2e07PpkERfMc5X2lxb-252FwWiC8GLabv874-253D-26reserved-3D0&d=DwMGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&r=W3VUihr49D2x8upR4FtjMIsy0FSGEnqb4ghTiQJMtRw&m=nNtBCpeq1URi7VbrBk6Q-CUapRs7VxshoIRiDfcHnaQ&s=EdumpDfymkjJL6bv11PxQT1iBgKgctPqHR7MLpfXxEA&e=>

GitHub<https://urldefense.proofpoint.com/v2/url?u=https-3A__eur03.safelinks.protection.outlook.com_-3Furl-3Dhttps-253A-252F-252Fgithub.com-252FDavidMacDonald-26data-3D01-257C01-257Ca.james-2540soton.ac.uk-257C68bc935c0f924e768c6008d6f997187d-257C4a5378f929f44d3ebe89669d03ada9d8-257C0-26sdata-3Dl6C-252FoqdMKpvxC0hlCl1iKx0HokqIeyQub1LB9Kw3V7Q-253D-26reserved-3D0&d=DwMGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&r=W3VUihr49D2x8upR4FtjMIsy0FSGEnqb4ghTiQJMtRw&m=nNtBCpeq1URi7VbrBk6Q-CUapRs7VxshoIRiDfcHnaQ&s=bstkErtMloGwrhYGi915Ki-5q2G2j_62xlwRsU6GhOY&e=>

www.Can-Adapt.com<https://urldefense.proofpoint.com/v2/url?u=https-3A__eur03.safelinks.protection.outlook.com_-3Furl-3Dhttp-253A-252F-252Fwww.can-2Dadapt.com-252F-26data-3D01-257C01-257Ca.james-2540soton.ac.uk-257C68bc935c0f924e768c6008d6f997187d-257C4a5378f929f44d3ebe89669d03ada9d8-257C0-26sdata-3DoB0WifzW5TcWZtJmHYGlbaMZi4CFXkSGhJwo4aGaZkY-253D-26reserved-3D0&d=DwMGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&r=W3VUihr49D2x8upR4FtjMIsy0FSGEnqb4ghTiQJMtRw&m=nNtBCpeq1URi7VbrBk6Q-CUapRs7VxshoIRiDfcHnaQ&s=49LC4xKD6GfHMmyIiEHbrJtyLPZwBeOhmGsufCyTuCY&e=>



  Adapting the web to all users
            Including those with disabilities

If you are not the intended recipient, please review our privacy policy<https://urldefense.proofpoint.com/v2/url?u=https-3A__eur03.safelinks.protection.outlook.com_-3Furl-3Dhttp-253A-252F-252Fwww.davidmacd.com-252Fdisclaimer.html-26data-3D01-257C01-257Ca.james-2540soton.ac.uk-257C68bc935c0f924e768c6008d6f997187d-257C4a5378f929f44d3ebe89669d03ada9d8-257C0-26sdata-3DyLFf2C83vbxleFMMf58vpy0x5OUogRBUNPhMBqPyvuw-253D-26reserved-3D0&d=DwMGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&r=W3VUihr49D2x8upR4FtjMIsy0FSGEnqb4ghTiQJMtRw&m=nNtBCpeq1URi7VbrBk6Q-CUapRs7VxshoIRiDfcHnaQ&s=JuOsfYLtAaD1_JlAiQ-ifCqJBM4UdBkcnf09Zy1g-ds&e=>


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://urldefense.proofpoint.com/v2/url?u=https-3A__eur03.safelinks.protection.outlook.com_-3Furl-3Dhttps-253A-252F-252Flists.w3.org-252FArchives-252FPublic-252Fw3c-2Dwai-2Dgl-252F2018AprJun-252F0542.html-26data-3D01-257C01-257Ca.james-2540soton.ac.uk-257C68bc935c0f924e768c6008d6f997187d-257C4a5378f929f44d3ebe89669d03ada9d8-257C0-26sdata-3D64NSPPwSpKZA02jMjXXh-252Fd4g9VPZhzwAlYbD9XGSRWo-253D-26reserved-3D0&d=DwMGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&r=W3VUihr49D2x8upR4FtjMIsy0FSGEnqb4ghTiQJMtRw&m=nNtBCpeq1URi7VbrBk6Q-CUapRs7VxshoIRiDfcHnaQ&s=QtTHRwlJSFA6A1l232inmcrR96xzy-7mgJa7EFCur14&e=>

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://urldefense.proofpoint.com/v2/url?u=https-3A__eur03.safelinks.protection.outlook.com_-3Furl-3Dhttps-253A-252F-252Flists.w3.org-252FArchives-252FPublic-252Fw3c-2Dwai-2Dgl-252F2018AprJun-252F0542.html-26data-3D01-257C01-257Ca.james-2540soton.ac.uk-257C68bc935c0f924e768c6008d6f997187d-257C4a5378f929f44d3ebe89669d03ada9d8-257C0-26sdata-3D64NSPPwSpKZA02jMjXXh-252Fd4g9VPZhzwAlYbD9XGSRWo-253D-26reserved-3D0&d=DwMGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&r=W3VUihr49D2x8upR4FtjMIsy0FSGEnqb4ghTiQJMtRw&m=nNtBCpeq1URi7VbrBk6Q-CUapRs7VxshoIRiDfcHnaQ&s=QtTHRwlJSFA6A1l232inmcrR96xzy-7mgJa7EFCur14&e=>

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://urldefense.proofpoint.com/v2/url?u=https-3A__eur03.safelinks.protection.outlook.com_-3Furl-3Dhttps-253A-252F-252Falastairc.uk-252Ftests-252Fwcag21-2Dexamples-252Fntc-2Dfocus-2Dstyles.html-26data-3D01-257C01-257Ca.james-2540soton.ac.uk-257C68bc935c0f924e768c6008d6f997187d-257C4a5378f929f44d3ebe89669d03ada9d8-257C0-26sdata-3DxJMY-252FtCgy-252BLAitkH5OX3JtKpL-252BxQMe3M-252Bd6u2Mfxh-252B0-253D-26reserved-3D0&d=DwMGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&r=W3VUihr49D2x8upR4FtjMIsy0FSGEnqb4ghTiQJMtRw&m=nNtBCpeq1URi7VbrBk6Q-CUapRs7VxshoIRiDfcHnaQ&s=YH-J_XCuc2wOc5U08vS-hW92bAtGIwepCpytdpOdObM&e=>

 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://urldefense.proofpoint.com/v2/url?u=https-3A__eur03.safelinks.protection.outlook.com_-3Furl-3Dhttp-253A-252F-252Fwww.linkedin.com-252Fin-252Fdavidmacdonald100-26data-3D01-257C01-257Ca.james-2540soton.ac.uk-257C68bc935c0f924e768c6008d6f997187d-257C4a5378f929f44d3ebe89669d03ada9d8-257C0-26sdata-3DbmHd1iPaquO-252F-252FZOzTLapl0CV-252BRDmN2pVhGk16rvWnbw-253D-26reserved-3D0&d=DwMGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&r=W3VUihr49D2x8upR4FtjMIsy0FSGEnqb4ghTiQJMtRw&m=nNtBCpeq1URi7VbrBk6Q-CUapRs7VxshoIRiDfcHnaQ&s=Qr3YkFzGR17CZXrJ9vddIve2mjB_7ruNYMb3Tm-49lA&e=>

twitter.com/davidmacd<https://urldefense.proofpoint.com/v2/url?u=https-3A__eur03.safelinks.protection.outlook.com_-3Furl-3Dhttp-253A-252F-252Ftwitter.com-252Fdavidmacd-26data-3D01-257C01-257Ca.james-2540soton.ac.uk-257C68bc935c0f924e768c6008d6f997187d-257C4a5378f929f44d3ebe89669d03ada9d8-257C0-26sdata-3DhY7BWBrdYs-252B2e07PpkERfMc5X2lxb-252FwWiC8GLabv874-253D-26reserved-3D0&d=DwMGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&r=W3VUihr49D2x8upR4FtjMIsy0FSGEnqb4ghTiQJMtRw&m=nNtBCpeq1URi7VbrBk6Q-CUapRs7VxshoIRiDfcHnaQ&s=EdumpDfymkjJL6bv11PxQT1iBgKgctPqHR7MLpfXxEA&e=>

GitHub<https://urldefense.proofpoint.com/v2/url?u=https-3A__eur03.safelinks.protection.outlook.com_-3Furl-3Dhttps-253A-252F-252Fgithub.com-252FDavidMacDonald-26data-3D01-257C01-257Ca.james-2540soton.ac.uk-257C68bc935c0f924e768c6008d6f997187d-257C4a5378f929f44d3ebe89669d03ada9d8-257C0-26sdata-3Dl6C-252FoqdMKpvxC0hlCl1iKx0HokqIeyQub1LB9Kw3V7Q-253D-26reserved-3D0&d=DwMGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&r=W3VUihr49D2x8upR4FtjMIsy0FSGEnqb4ghTiQJMtRw&m=nNtBCpeq1URi7VbrBk6Q-CUapRs7VxshoIRiDfcHnaQ&s=bstkErtMloGwrhYGi915Ki-5q2G2j_62xlwRsU6GhOY&e=>

www.Can-Adapt.com<https://urldefense.proofpoint.com/v2/url?u=https-3A__eur03.safelinks.protection.outlook.com_-3Furl-3Dhttp-253A-252F-252Fwww.can-2Dadapt.com-252F-26data-3D01-257C01-257Ca.james-2540soton.ac.uk-257C68bc935c0f924e768c6008d6f997187d-257C4a5378f929f44d3ebe89669d03ada9d8-257C0-26sdata-3DoB0WifzW5TcWZtJmHYGlbaMZi4CFXkSGhJwo4aGaZkY-253D-26reserved-3D0&d=DwMGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&r=W3VUihr49D2x8upR4FtjMIsy0FSGEnqb4ghTiQJMtRw&m=nNtBCpeq1URi7VbrBk6Q-CUapRs7VxshoIRiDfcHnaQ&s=49LC4xKD6GfHMmyIiEHbrJtyLPZwBeOhmGsufCyTuCY&e=>



  Adapting the web to all users
            Including those with disabilities

If you are not the intended recipient, please review our privacy policy<https://urldefense.proofpoint.com/v2/url?u=https-3A__eur03.safelinks.protection.outlook.com_-3Furl-3Dhttp-253A-252F-252Fwww.davidmacd.com-252Fdisclaimer.html-26data-3D01-257C01-257Ca.james-2540soton.ac.uk-257C68bc935c0f924e768c6008d6f997187d-257C4a5378f929f44d3ebe89669d03ada9d8-257C0-26sdata-3DyLFf2C83vbxleFMMf58vpy0x5OUogRBUNPhMBqPyvuw-253D-26reserved-3D0&d=DwMGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&r=W3VUihr49D2x8upR4FtjMIsy0FSGEnqb4ghTiQJMtRw&m=nNtBCpeq1URi7VbrBk6Q-CUapRs7VxshoIRiDfcHnaQ&s=JuOsfYLtAaD1_JlAiQ-ifCqJBM4UdBkcnf09Zy1g-ds&e=>

-----------------------------------------------------------------



ATTENTION:



The information in this e-mail is confidential and only meant for the intended recipient. If you are not the intended recipient, don't use or disclose it in any way. Please let the sender know and delete the message immediately.



-----------------------------------------------------------------