Add target size enhanced rule

[WilcoFiers]

Need for Call for Review: 2 weeks

---

How to Review And Approve

• Go to the “Files changed” tab
• Here you will have the option to leave comments on different lines.
• Once the review is completed, find the “Review changes” button in the top right, select “Approve” (if you are really confident in the rule) or "Request changes" and click “Submit review”.
• Make sure to also review the proposed Call for Review period. In case of disagreement, the longer period wins.

[dd8]

The lack of a CSS hit testing spec is listed as an open issue: https://github.com/w3c/csswg-drafts/issues/2325

Hit testing doesn't seem fully interoperable. - though things may have improved since this was written: https://lists.w3.org/Archives/Public/www-style/2010Aug/0407.html

There's a W3 Wiki article here detailing the hit testing in IE: https://www.w3.org/wiki/Hit_Testing

Here's the code for handling touch events in Chromium: https://github.com/chromium/chromium/blob/be0d3937d6ccc1a4e0d27315d2e827151850d3fa/android_webview/renderer/aw_render_frame_ext.cc#L233 (so Chrome actually does hit testing on rects, rather than the circle used in WCAG 2.2 2.5.8)

Edit: elements with opacity:0 are clickable. You can try this out with the "back to top" link at bottom right of https://www.w3.org/WAI/ (it sets opacity:0 when scroll thumb is at top of document - but you can still click on it in Chrome/FF/Safari)

Edit: SVG strokes/fills/markers are only clickable if they have a color specified, so the borders of the following rect are clickable, but the middle isn't due to fill=none:

    <svg height="400px" width="400px" viewBox="-5 -5 30 30">
    <a href="https://example.com"><rect x="0" y="0" width="20" height="10" stroke="black" stroke-width="3" fill="none"></rect></a>
    </svg>

In SVG 2.0 this is controlled by the pointer-events property, but it's unclear if any browsers have implemented this: https://www.w3.org/TR/SVG2/interact.html#PointerEventsProperty

[Jym77]

@dd8 Been trying another direction with the rule. See also https://w3ccommunity.slack.com/archives/C01167KLA73/p1700745811381929 for details. I'd appreciate if you could get a look at the current state and test cases. You have both the technical expertise and tool insight to figure out whether this is going anywhere.

[dd8]

My email doesn't seem to have access to the Slack, but I've had a quick look at the changes and have a few comments. If somebody can give me access to the Slack channel I'll take a look at that as well.

I think excluding area elements is a good idea since they're often essential, because they're tied to the image associated with the image map (e.g.bio links on a group photo, places on a satellite photo or map).

Given the lack of spec for clickable areas I would probably restrict the applicability to the simplest cases initially (then introduce more complex clickable areas in future versions of the rule). By simple I mean:

• HTML elements using the CSS box model (no SVG, canvas etc)
• exclude elements that have been transformed (there have been browser interop issues with CSS transforms and clickable areas for shapes like this https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix)

The current applicability of 'widget' role and focusable looks wrong to me - it's a common a11y problem to have clickable widgets you can't tab to because they're not focusable.

The trickiest problem is knowing what's clickable. It's easy for built in widgets but not for DIVs with a 'click' event. Even if you can find which elements have a 'click' event registered there are some frameworks which put a generic 'click' event on every element which dispatches to handlers the author registers with the framework (e.g. the framework gives every div a click handler but the author only registers framework handlers for div.button, so only those trigger actions)

You may also get something like this where the clickable area is smaller than the widget role area:

<div role="button' style='padding:4em;'><div onclick='fireButton()'>Click me</div></div>

[Jym77]

My email doesn't seem to have access to the Slack, but I've had a quick look at the changes and have a few comments. If somebody can give me access to the Slack channel I'll take a look at that as well.

@dd8 It is the W3C Slack. See the wiki page for joining.

[Jym77]

I've updated the rule with comments for review, and cleaned it a bit. It now starts to look like an actual rule 🎉

• Ultimately, I've ditched the "weird shape" exceptions. These are only really needed for the 2.5.8 rule (due to distance), and there was no real need to restrict this rule because of that. I made sure that the examples do not rely on the weird shape (i.e., no 50×50 button clipped to 40×40), so that automated tools who rely on border boxes or getBoundingClientRect can still claim a consistent implementation (and added a note to explain that).
• Also simplified a bit some of the definitions…

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

---

Carlos Duarte seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}