RE: Criterion 1.4.11 - what constitutes a clickable boundary?

The Understanding page for 1.4.11 deals with a similar situation to your question 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 colour contrast requirement for the button outline against the page. This is because users can see the text label and click it, so they don't need to perceive the extent of the larger clickable area.

See the Boundaries heading at https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

I would apply the same logic to the Microsoft page. Since the entire contents of the tile are clickable, SC 1.4.11 only requires that the text has sufficient 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 outline 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 contain 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 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.

Steve Green
Managing Director
Test Partners Ltd


From: Catherine Ailanjian <Catherine.Ailanjian@wdc.com>
Sent: 29 May 2020 21:42
To: w3c-wai-ig@w3.org
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 "Understanding 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=MSCOM_QL_Surface&headerid=department-surface):



The light grey rectangle should be considered a UI component because it is clickable.  However, the light grey rectangle lacks sufficient contrast with the white background.



So, since the light grey rectangle IS the clickable border of this UI component and it does not have sufficient contrast with the white background, would it fail WCAG 1.4.11?


Cat Ailanjian