Criterion 1.4.11 - what constitutes a clickable boundary?
Catherine Ailanjian <[email protected]> Fri, 29 May 2020 20:42:06 +0000
| Newsgroups | gmane.org.w3c.accessibility.general |
|---|---|
| Message-ID | <MWHPR04MB073587E73BEC173E33E55D8BE78F0@MWHPR04MB0735.namprd04.prod.outlook.com> |
--_000_MWHPR04MB073587E73BEC173E33E55D8BE78F0MWHPR04MB0735namp_
Content-Type: text/plain; charset="us-ascii"
Content-Transfer-Encoding: quoted-printable
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_MWHPR04MB073587E73BEC173E33E55D8BE78F0MWHPR04MB0735namp_
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:m=3D"http://schemas.microsoft.com/office/2004/12/omml" xmlns=3D"http:=
//www.w3.org/TR/REC-html40">
<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: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;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:#954F72;
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.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri",sans-serif;
color:windowtext;}
span.PlainTextChar
{mso-style-name:"Plain Text Char";
mso-style-priority:99;
mso-style-link:"Plain Text";
font-family:"Calibri",sans-serif;}
..MsoChpDefault
{mso-style-type:export-only;
font-family:"Calibri",sans-serif;}
@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-US" link=3D"#0563C1" vlink=3D"#954F72">
<div class=3D"WordSection1">
<p class=3D"MsoPlainText">There is a kind of UI component that doesn’=
t seem to be addressed on the “Understanding Success Criterion 1.4.11=
: Non-text Contrast” page (<a href=3D"https://www.w3.org/WAI/WCAG21/U=
nderstanding/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></p>
<p class=3D"MsoPlainText"><o:p> </o:p></p>
<p class=3D"MsoPlainText">Here’s an example from the Microsoft websit=
e (<a href=3D"https://www.microsoft.com/en-us/store/collections/surfacelist=
?icid=3DMSCOM_QL_Surface&headerid=3Ddepartment-surface">https://www.mic=
rosoft.com/en-us/store/collections/surfacelist?icid=3DMSCOM_QL_Surface&=
headerid=3Ddepartment-surface</a>):<o:p></o:p></p>
<p class=3D"MsoPlainText"><o:p> </o:p></p>
<p class=3D"MsoPlainText">The light grey rectangle should be considered a U=
I component because it is clickable. However, the light grey rectangl=
e lacks sufficient contrast with the white background.
<o:p></o:p></p>
<p class=3D"MsoPlainText"><o:p> </o:p></p>
<p class=3D"MsoPlainText">So, since the light grey rectangle IS the clickab=
le border of this UI component and it does not have sufficient contrast wit=
h the white background, would it fail WCAG 1.4.11?<o:p></o:p></p>
<p class=3D"MsoNormal"><o:p> </o:p></p>
<p class=3D"MsoNormal"><o:p> </o:p></p>
<p class=3D"MsoNormal">Cat Ailanjian<o:p></o:p></p>
</div>
</body>
</html>
--_000_MWHPR04MB073587E73BEC173E33E55D8BE78F0MWHPR04MB0735namp_--