RE: Criterion 1.4.11 - what constitutes a clickable boundary?
Steve Green <[email protected]> Fri, 29 May 2020 23:05:13 +0000
| Newsgroups | gmane.org.w3c.accessibility.general |
|---|---|
| Message-ID | <DB8PR09MB40251B55829964AEF3A3C47EC78F0@DB8PR09MB4025.eurprd09.prod.outlook.com> |
--_000_DB8PR09MB40251B55829964AEF3A3C47EC78F0DB8PR09MB4025eurp_ Content-Type: text/plain; charset="us-ascii" Content-Transfer-Encoding: quoted-printable The Understanding page for 1.4.11 deals with a similar situation to your qu= estion with regard to buttons. It says that as long as the button label has= sufficient contrast against the button's background, then there is no colo= ur contrast requirement for the button outline against the page. This is be= cause users can see the text label and click it, so they don't need to perc= eive the extent of the larger clickable area. See the Boundaries heading at https://www.w3.org/WAI/WCAG21/Understanding/n= on-text-contrast.html I would apply the same logic to the Microsoft page. Since the entire conten= ts of the tile are clickable, SC 1.4.11 only requires that the text has suf= ficient contrast against the background (which is also required by 1.4.3). = If the text did not have sufficient contrast to meet 1.4.3, then the outlin= e of the tile (or another element inside it) would need to have sufficient = contrast in order to meet 1.4.11 John Coburn just asked a related question about clickable tiles that contai= n a lot of information, and this is a perfect example of how not to design = one. The link encloses all the tile's content, so the accessible name is th= e concatenation of all those contents. That is really bad from an accessibi= lity perspective and I would fail it under 4.1.2 and probably several other= success criteria. Steve Green Managing Director Test Partners Ltd From: Catherine Ailanjian <[email protected]> Sent: 29 May 2020 21:42 To: [email protected] Subject: Criterion 1.4.11 - what constitutes a clickable boundary? There is a kind of UI component that doesn't seem to be addressed on the "U= nderstanding Success Criterion 1.4.11: Non-text Contrast" page (https://www= .w3.org/WAI/WCAG21/Understanding/non-text-contrast) - a clickable "product= tile", where the image of a product is displayed on a light-colored "tile"= . Here's an example from the Microsoft website (https://www.microsoft.com/en-= us/store/collections/surfacelist?icid=3DMSCOM_QL_Surface&headerid=3Ddepartm= ent-surface): The light grey rectangle should be considered a UI component because it is = clickable. However, the light grey rectangle lacks sufficient contrast wit= h the white background. So, since the light grey rectangle IS the clickable border of this UI compo= nent and it does not have sufficient contrast with the white background, wo= uld it fail WCAG 1.4.11? Cat Ailanjian --_000_DB8PR09MB40251B55829964AEF3A3C47EC78F0DB8PR09MB4025eurp_ Content-Type: text/html; charset="us-ascii" Content-Transfer-Encoding: quoted-printable <html xmlns:v=3D"urn:schemas-microsoft-com:vml" xmlns:o=3D"urn:schemas-micr= osoft-com:office:office" xmlns:w=3D"urn:schemas-microsoft-com:office:word" = xmlns:x=3D"urn:schemas-microsoft-com:office:excel" xmlns:m=3D"http://schema= s.microsoft.com/office/2004/12/omml" xmlns=3D"http://www.w3.org/TR/REC-html= 40"> <head> <meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3Dus-ascii"= > <meta name=3D"Generator" content=3D"Microsoft Word 15 (filtered medium)"> <style><!-- /* Font Definitions */ @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {margin:0in; margin-bottom:.0001pt; font-size:11.0pt; font-family:"Calibri",sans-serif;} a:link, span.MsoHyperlink {mso-style-priority:99; color:#0563C1; text-decoration:underline;} p.MsoPlainText, li.MsoPlainText, div.MsoPlainText {mso-style-priority:99; mso-style-link:"Plain Text Char"; margin:0in; margin-bottom:.0001pt; font-size:11.0pt; font-family:"Calibri",sans-serif;} span.PlainTextChar {mso-style-name:"Plain Text Char"; mso-style-priority:99; mso-style-link:"Plain Text"; font-family:"Calibri",sans-serif;} span.EmailStyle21 {mso-style-type:personal-reply; font-family:"Calibri",sans-serif; color:windowtext;} .MsoChpDefault {mso-style-type:export-only; font-size:10.0pt;} @page WordSection1 {size:8.5in 11.0in; margin:1.0in 1.0in 1.0in 1.0in;} div.WordSection1 {page:WordSection1;} --></style><!--[if gte mso 9]><xml> <o:shapedefaults v:ext=3D"edit" spidmax=3D"1026" /> </xml><![endif]--><!--[if gte mso 9]><xml> <o:shapelayout v:ext=3D"edit"> <o:idmap v:ext=3D"edit" data=3D"1" /> </o:shapelayout></xml><![endif]--> </head> <body lang=3D"EN-GB" link=3D"#0563C1" vlink=3D"#954F72"> <div class=3D"WordSection1"> <p class=3D"MsoNormal"><span style=3D"mso-fareast-language:EN-US">The Under= standing page for 1.4.11 deals with a similar situation to your question wi= th regard to buttons. It says that as long as the button label has sufficie= nt contrast against the button’s background, then there is no colour contrast requirement for the button outline agains= t the page. This is because users can see the text label and click it, so t= hey don’t need to perceive the extent of the larger clickable area.<o= :p></o:p></span></p> <p class=3D"MsoNormal"><span style=3D"mso-fareast-language:EN-US"><o:p>&nbs= p;</o:p></span></p> <p class=3D"MsoNormal"><span style=3D"mso-fareast-language:EN-US">See the B= oundaries heading at </span><a href=3D"https://www.w3.org/WAI/WCAG21/Understanding/non-text-cont= rast.html">https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.ht= ml</a><o:p></o:p></p> <p class=3D"MsoNormal"><o:p> </o:p></p> <p class=3D"MsoNormal">I would apply the same logic to the Microsoft page. = Since the entire contents of the tile are clickable, SC 1.4.11 only require= s that the text has sufficient contrast against the background (which is al= so required by 1.4.3). If the text did not have sufficient contrast to meet 1.4.3, then the outline of the ti= le (or another element inside it) would need to have sufficient contrast in= order to meet 1.4.11<span style=3D"mso-fareast-language:EN-US"><o:p></o:p>= </span></p> <p class=3D"MsoNormal"><span style=3D"mso-fareast-language:EN-US"><o:p>&nbs= p;</o:p></span></p> <p class=3D"MsoNormal"><span style=3D"mso-fareast-language:EN-US">John Cobu= rn just asked a related question about clickable tiles that contain a lot o= f information, and this is a perfect example of how not to design one. The = link encloses all the tile’s content, so the accessible name is the concatenation of all those contents. That is= really bad from an accessibility perspective and I would fail it under 4.1= .2 and probably several other success criteria.<o:p></o:p></span></p> <p class=3D"MsoNormal"><o:p> </o:p></p> <p class=3D"MsoNormal"><span style=3D"mso-fareast-language:EN-US">Steve Gre= en<o:p></o:p></span></p> <p class=3D"MsoNormal"><span style=3D"mso-fareast-language:EN-US">Managing = Director<o:p></o:p></span></p> <p class=3D"MsoNormal"><span style=3D"mso-fareast-language:EN-US">Test Part= ners Ltd<o:p></o:p></span></p> <p class=3D"MsoNormal"><span style=3D"mso-fareast-language:EN-US"><o:p>&nbs= p;</o:p></span></p> <p class=3D"MsoNormal"><span style=3D"mso-fareast-language:EN-US"><o:p>&nbs= p;</o:p></span></p> <div> <div style=3D"border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0in = 0in 0in"> <p class=3D"MsoNormal"><b><span lang=3D"EN-US">From:</span></b><span lang= =3D"EN-US"> Catherine Ailanjian <[email protected]> <br> <b>Sent:</b> 29 May 2020 21:42<br> <b>To:</b> [email protected]<br> <b>Subject:</b> Criterion 1.4.11 - what constitutes a clickable boundary?<o= :p></o:p></span></p> </div> </div> <p class=3D"MsoNormal"><o:p> </o:p></p> <p class=3D"MsoPlainText"><span lang=3D"EN-US">There is a kind of UI compon= ent that doesn’t seem to be addressed on the “Understanding Suc= cess Criterion 1.4.11: Non-text Contrast” page (<a href=3D"https://ww= w.w3.org/WAI/WCAG21/Understanding/non-text-contrast">https://www.w3.org/WAI= /WCAG21/Understanding/non-text-contrast</a>) - a clickable “product tile”, where the image of a produ= ct is displayed on a light-colored “tile”.<o:p></o:p></span></p= > <p class=3D"MsoPlainText"><span lang=3D"EN-US"><o:p> </o:p></span></p> <p class=3D"MsoPlainText"><span lang=3D"EN-US">Here’s an example from= the Microsoft website (<a href=3D"https://www.microsoft.com/en-us/store/co= llections/surfacelist?icid=3DMSCOM_QL_Surface&headerid=3Ddepartment-sur= face">https://www.microsoft.com/en-us/store/collections/surfacelist?icid=3D= MSCOM_QL_Surface&headerid=3Ddepartment-surface</a>):<o:p></o:p></span><= /p> <p class=3D"MsoPlainText"><span lang=3D"EN-US"><o:p> </o:p></span></p> <p class=3D"MsoPlainText"><span lang=3D"EN-US">The light grey rectangle sho= uld be considered a UI component because it is clickable. However, th= e light grey rectangle lacks sufficient contrast with the white background. <o:p></o:p></span></p> <p class=3D"MsoPlainText"><span lang=3D"EN-US"><o:p> </o:p></span></p> <p class=3D"MsoPlainText"><span lang=3D"EN-US">So, since the light grey rec= tangle IS the clickable border of this UI component and it does not have su= fficient contrast with the white background, would it fail WCAG 1.4.11?<o:p= ></o:p></span></p> <p class=3D"MsoNormal"><span lang=3D"EN-US"><o:p> </o:p></span></p> <p class=3D"MsoNormal"><span lang=3D"EN-US"><o:p> </o:p></span></p> <p class=3D"MsoNormal"><span lang=3D"EN-US">Cat Ailanjian<o:p></o:p></span>= </p> </div> </body> </html> --_000_DB8PR09MB40251B55829964AEF3A3C47EC78F0DB8PR09MB4025eurp_--