search

w3c / wcag

Web Content Accessibility Guidelines
https://w3c.github.io/wcag/guidelines/22/
Other
1.13k stars 256 forks source link

2.5.8 Target Size overlapping content vs intersecting #3896

Open jamieherrera opened 5 months ago

jamieherrera commented 5 months ago

I get that a smaller target surrounded by/ fully overlapping a larger target needs to be at least 24 px in size to pass, OR with the spacing exception, be at least 24 px from the intersecting edge of a larger target (Figure 9 in the Understanding doc), which according to the image, can include touching, or even sharing an edge pixel.

It's unclear whether items that are intersecting a larger target (ie goes beyond the shared pixel) AND at least 24 px pass or fail? In other words, can interactive items intersect, no problem, if both items are at least 24 px?

I'm inclined to say pass because the target is at least 24 px and that's the SC. End of story. I think what throws me is that the logic for the 16 px scenario uses the measurement tool of a 24 px diameter circle as the intersecting item, and highlights intersecting as a bad thing.

Scenario in question:

"In the top row, the small target overlaps - or, to be more technically accurate, clips - the large target. The small target itself has a size of 24 by 24 CSS pixels, so passes. In the second row, we see that if the second target is any smaller – in this case 16 by 16 CSS pixels – it fails the criterion, as the circle with a 24 CSS pixel diameter we draw over the small target will intersect the large target itself." https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum

alastc commented 4 months ago

or even sharing an edge pixel

I don't think a target can share a pixel with another target. In HTML terms, one of them will be over the other, and will take the event. Effectively there is not an overlap, as you say, one target clips another so one of them shrinks compared to what it would be if they didn't overlap.

The definition of a target outlines this.

I think what throws me is that the logic for the 16 px scenario uses the measurement tool of a 24 px diameter circle as the intersecting item

Using the circle was what (after a lot of discussion) the group came to as the best method for the exception. I.e. the primary requirement is for a minimum of 24px, but with spacing around a target having a 24px circle matches the use-case (a finger) most closely.