Siteimprove / alfa

:wheelchair: Suite of open and standards-based tools for performing reliable accessibility conformance testing at scale
MIT License
108 stars 12 forks source link

SIA-R83 (Text is clipped) doesn't detect invisibility due to clip-path #1548

Open dan-tripp-siteimprove opened 10 months ago

dan-tripp-siteimprove commented 10 months ago

The CSS properties clip-path and/or -webkit-clip-path seems to be cause a false positive for this rule. With those CSS properties one clip it completely so that it's invisible, even while its bounding rect's width/height are much greater than zero. If the text isn't visible then it doesn't meet the applicability for the rule so it shouldn't be checked. But it is checked, and it fails.

The HTML that I saw on a customer's page which exhibited this looked roughly like this:

<div style="clip-path: polygon(0px 0px,0px 0px,0px 0px); -webkit-clip-path: polygon(0px 0px,0px 0px,0px 0px); overflow: hidden; height: 10px; width: 10px;">lorem ipsum dolor</div>

But that HTML on its own doesn't reproduce the problem, so there's something I don't understand here. @Jym77 I won't post the customer's page here but if you would like me to file a jira too or do anything else to be more specific on this, let me know.

Jym77 commented 10 months ago

I think we need to gather cases of how clip-path is used to make content invisible. I do not want to implement a generic area computation of all possible clip-path, but I assume that there are only a handful that are commonly used to make content invisible, and we can likely make a heuristic to detect these cases specifically.

dan-tripp-siteimprove commented 10 months ago

Would you like any more info on this current case?

Jym77 commented 10 months ago

Would you like any more info on this current case?

No, I think there is enough with that CSS value. I'd like to know if it's somewhat common to use polygon(0px, …) and worth having a "polygon with all 0 is invisible" heuristic.

dan-tripp-siteimprove commented 10 months ago

Okay, I'll try to gather that info.