WCAG 2.2 2.5.8 - adding diagrams that make the reality/consequences of target offset clearer

[patrickhlauke]

I know these have been deemed "controversial" because they may encourage authors to not go for the 24x24 target size, but I do feel they make it much clearer what the whole idea of "target offset" means in practice. anecdotally, they've helped a few folks that asked me about 2.5.8 understand better what the whole deal with target offset is about...and they do reflect normative reality of the SC. the wording can of course be tweaked, but I'd love to see this included in the understanding https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html

two examples: a) two 24x24 targets right next to each other - text reads "we want to make sure you can confidently click/tap these two" b) two 1x1 pixel targets with 23 pixel space between them - "actually, as long as you don't accidentally click/tap the wrong one...it's cool too". both cases PASS

two examples: a) five 24x24 targets, arranged in a cross, with all targets touching; b) a tiny 1x1 pixel target in the centre, and four 24x24 targets around it, with 23 pixel clearance each way - the overall space in the centre is now effectively 1+23+23 = 47 pixels horizontally and vertically

[patrickhlauke]

Of course, these should be complemented with non-normative wording that also says that these are extreme examples and that ideally authors should not start using 1x1 targets everywhere ... they may pass the normative requirement, but will be very hard/impossible for people to actually use in real life

[aardrian]

The 1×1 target you so nicely rendered is an ongoing concern. My fear is another SC coming in later to paper over the disallowed minimum since 2.5.5 is AAA and (sadly) a de facto ignorable SC. I agree this should be included in the Understanding doc.

[patrickhlauke]

when i mentioned these, they got a bit of traction on the twitters, for what it's worth https://twitter.com/patrick_h_lauke/status/1400961750506381315

it does seem to actually resonate with developers/clarify things. as said, the wording can be tweaked to make sure the extreme 1x1 px case is highlighted as "we really don't encourage this, as it's bad for usability for all users. we have included it here to very clearly highlight the need for increased spacing for any targets that fall below 24x24px"

[patrickhlauke]

dropping this here, as @alastc asked what the value would be of adding this to the understanding if it's a less-than-ideal (but still normatively passing) example

devs will discover this extreme case themselves by running the numbers. being upfront about this sort of thing in the understanding, but then ALSO adding a strongly worded advice of "don't do it, it's shit for users" right up front will save having to damage-control later

https://twitter.com/patrick_h_lauke/status/1403491387815911425

because otherwise yes, brace yourselves for somebody "discovering" this "loophole", and the resulting "oh no, WCAG is rubbish they haven't thought this through" fallout (similar to the kerfuffle around contrast ratio calculations throwing false negatives)

[detlevhfischer]

To be honest, I can’t quite see why any developer/designer would implement that sort of thing, like one pixel size targets, and in what context other than to prove some weird point about WCAG loopholes. I expect for WCAG to be useful, developers will look for examples that are close to things they see out there in real sites (or may tempted to build), so in this view examples of targets that are just a bit too small or too close together are much more relevant then weird examples demonstrating edge cases that still conform. I find this counter productive - it just dilutes the advice that people should expect in Understanding texts.

[patrickhlauke]

it's the extreme case, and shows what the outcome is: if you DO use smaller targets, your spacing telescopes out. if it's too radical to show the actual reality/outcome at 1x1px, then it can be mitigated with an example showing 15x15px with 9px clearance.

[jenstrickland]

Draft Proposed Response

---

Adding @patrickhlauke 's diagrams would be helpful.

[colabottles]

Draft Proposed Response

Adding @patrickhlauke 's diagrams would be helpful.

I have had very little time to get to this and need to know where I would add these and I can get to it in the next couple days if I can get with someone to get this done.

[detlevhfischer]

I'd like to repeat that I do not see how adding extreme edge case examples will help / provide guidance to authors (and this is the main purpose of an understanding document). Having examples with small targets and enough clearance should focus on real cases like the list of dots often seen in carousels offering arbitrary access to slides. I would personally object to using the diagram with a 1x1 pixel target in the understanding text. At worst, it can give authors funny ideas about not recommended solutions that would still conform.

[patrickhlauke]

as said, perhaps the 1x1 extreme case is a bit too contentious, but a slightly more realistic one (15x15 with 9 spacing, or similar) perhaps? (and be in no doubt that people who want to break/bend the rule and look for a loophole that still technically works have already worked out the extreme 1x1 scenario ... not telling them won't stop them from finding it, and it's better to show them these examples of < 24px and add explicit "we don't recommend this, but this also passes" advice is better than them finding it from dodgy sources separately without this advice. or some firebrand "WCAG is all rubbish" blogger that comes along with a "why this latest SC is flawed" article.

@colabottles happy to make a new(er) more elaborate and clean diagram, once we settle on exactly which kind we want...

[colabottles]

@colabottles happy to make a new(er) more elaborate and clean diagram, once we settle on exactly which kind we want...

Thank you, @patrickhlauke I will keep an eye out for the new diagram.

[jake-abma]

I do like the proposal of @detlevhfischer about "the list of dots often seen in carousels"

Same kind of example from @patrickhlauke but tweaked for the dots?

[patrickhlauke]

some tweaked (less dramatic) examples ... thoughts?

This example, while very similar to the existing ones, aims to drive the point home perhaps more clearly that sure, you can go below 24x24, but then the effective area (including the clearance you need) makes the effective size of a set of buttons bigger overall.

second example making this idea of the "telescoping" clearer - if for whatever reason the author decided to make the middle button smaller than 24x24, the have to space out all the adjacent buttons further.

[detlevhfischer]

I think the first one is great and shows the tradeoff when reducing target sizes - you then need more space between them, so it's somewhat self-defeating. The second example I still don't get - this doesn't chime with any pattern I have ever seen in a real-world implementation, and that is something I would consider important for anything surfacing in an understanding doc.

[colabottles]

I haven't been able to get into a meeting because of my recent email address change, so I'm out of the AGWG groups for now. Are we using the first image or the second image? (or both?) and I will try and get something coordinated with @alastc so I can get this issue taken care of.

[alastc]

Hi @colabottles, I hope the change of emails hasn't affected your github access?

I think the second set is probably best, but see what makes the most sense to you.

[colabottles]

Hi @colabottles, I hope the change of emails hasn't affected your github access?

I think the second set is probably best, but see what makes the most sense to you.

@alastc The change of email has not affected github access, no. I'll look these over and catch up with you on our call. Thanks.

[patrickhlauke]

The second example I still don't get - this doesn't chime with any pattern I have ever seen in a real-world implementation, and that is something I would consider important for anything surfacing in an understanding doc

Providing some more context for that second example may help: it's intended to illustrate that (yes, possibly in a hypothetical scenario) authors that wish to go below the 24x24 threshold can do so, but need to be aware that as a result, if they only change the size of that one target, any adjacent targets will need to be spaced out further as a result. that it's not simply a one-to-one "trading target size itself for spacing/clearance around it", but that the latter then potentially pushes out their layout further (i.e. to drive the point home that yes, you can do it, but it's a false economy as you're not making the overall layout more compact, and in fact you're making it bigger"). at least that's my intent with showing it that way.

(this also then raised weird thoughts about "does the SC not cover targets that are diagonally adjacent? is that a loophole?" but i'll leave that for another day)

[alastc]

Suggested intro for the images:

---

The aim is that targets are at least 24 by 24 CSS pixels, however, the offset exception allows for smaller targets, if there is sufficient spacing around them. Authors should be aware that it can have an impact on layouts, for example, a small target surrounded by others may require more than 24 by 24px if it is relying on spacing.

[patrickhlauke]

slight tweak to what @alastc suggested (can still be wordsmithed further, of course)

The aim is that targets are ideally at least 24 by 24 CSS pixels. However, the offset exception allows for smaller targets, if there is sufficient spacing around them. Authors should be aware that using smaller targets can have an impact on layouts, as the combined space of the smaller target and the required spacing around it will generally require an overall area that is larger than 24 by 24 CSS pixels, the smaller the actual target is.