Update 2.5.8 Target Size (Minimum) understanding for new spacing approach

[patrickhlauke]

Companion for #3089 #3123

• remove outdated target offset language and examples
• reinforce the fact that this requires either minimum size or spacing in prose
• add new spacing diagram as SVG, with link to scalable version directly
• change the <ol> in the "Exceptions" section to <ul> - it's unordered in the normative SC wording, so why make it a numbered list here?
• markup cleanup
• delete unused images
• harmonised with WCAG 2.2 CR 3 updates #3123
• update the two examples with text-based buttons in a single row / two rows (to also use the spacing circle approach and language)
• update the dropdown example for consistency and to introduce the circle concept there as well
• update the basic, skewed, and rounded corners (not circle, to avoid confusion with the spacing circles concept later on) size examples for consistency
• add explanation and examples for the how to center the 24 CSS pixel diameter circle on the bounding box of an undersized target (for rectangular, convex, and concave targets)
• expand/reinforce the idea (in the intent) that this SC does still allow exceedingly small targets that pass as long as there's no adjacent targets that are too close, and adds best practice recommendation to at least just stick with the minimum size (regardless of spacing)

Supersedes #3058 if #3089 gets accepted and merged

Closes #2755
Closes #3045

RawGit preview: https://raw.githack.com/w3c/wcag/patrickhlauke-target-size-minimum-issue3089-companion/understanding/22/target-size-minimum.html

[patrickhlauke]

Set to draft for now, as I want to work on an additional SVG to illustrate the "circle must not overlap an adjacent target itself" aspect (using one target that's below 24x24, next to a target that's above 24x24 - i.e. where there's no circle to consider for the latter)

[detlevhfischer]

Looks good to me.
Spacing exception: "..any other other adjacent targets, nor the adjacent targets themselves" is more explicit, better.
Great graphics!

[patrickhlauke]

suggestion from @graemecoleman to split the one large diagram for the spacing exception into three separate diagrams. makes sense, at it will be much more readable and avoid the giant front-loaded explanation. will work on this if agreed in principle here that this is the approach we want to take

[patrickhlauke]

@detlevhfischer hah, spotted a typo (duplicate "other") thanks to your comment too :)

[patrickhlauke]

thoughts on my additional diagram I wanted to make to show the "overlaps the adjacent target" aspect? this also covers the same ground as the old boy/girl/magnifying glass image

(this is only a rough at this stage, can tweak it to be pixel-perfect and write some prose for it if this is deemed ok)

/cc @detlevhfischer

looking at this now, this could actually benefit from being split into at least two separate ones ... the small magnifying glass next to the large image, and then the special case of it being on top of the image

[detlevhfischer]

@patrickhlauke I have a view suggestions:

• Group images in a pass row and two fail rows (words PASS and FAIL go after the rows)
• The first colum covers target overlapping the image, the second column placement outside to the right, the third like the second but with a smaller target
• Align cases so the pass case sits above the corresponding fail case
• No. 4, the FAIL example 16x16 that abuts the image, is without circle - is that on purpose? I thought only targets bigger than 24 x 24 get no circle?
• All FAIl examples shoud reinforce FAIL with pink tint (incl. No. 4) all pass examples have green tint
• It may be easier to see the image as an image if it was an actual image rather than an empty space witth an img icon floating in the middle. At least I would give it a grey tint - or use a stock photo of some street scene which warrants magnification (my fuzzy portrait was not ideal in that sense)

Numbering your current images from the top left to bottom right in normal reading order, you'd have this structure:

1  7  6  PASS
3  5  4  FAIL
2        FAIL

[patrickhlauke]

No. 4, the FAIL example 16x16 that abuts the image, is without circle - is that on purpose? I thought only targets bigger than 24 x 24 get no circle?

there's two columns on that image. on the left side, the targets and their measurements. on the right side, the same one but with the circle overlaid. this is to make sure that you can actually see the actual thing on the left properly, not covered by the circle already that obfuscates things. and the first row, as it's >= 24x24, doesn't need a circle to begin with

[detlevhfischer]

sorry I didn't get that logic just from the illustration, at least it is not easy to understand - I saw these as separate cases. I only now see they are actually the same! I would simplify and draw the circle whenever the target is below 24 x 24... and this will reduce the examples needed.

[detlevhfischer]

or have something like a magnifed cutoff section in a bubble which shows the superimposed circle, so it is clear this is the same case...

[patrickhlauke]

hmm, i might keep it but fiddle with it some more to make it clearer. it's the same approach i took on the other illustration https://github.com/w3c/wcag/pull/3103/files#diff-786f623a8b64dae0e1e505269cd93844a7a122de868e1db6665d28e601baaa4b

probably can do with splitting this into two images though (the overlapping case, and the abutting case), and having a horizontal ruler thing like in that other illustration to make it clear it's one row

[detlevhfischer]

Well yeah there are a thousand ways to do this - it all seems pretty clear to me when I look at it now, but I got the wrong idea at first.

[patrickhlauke]

i'll noodle around some more with it in any case. btw, as i've lost track...how likely does it seem that we'll be adopting the simpler circles model versus the target offset weirdness?

[mbgower]

i'll noodle around some more with it in any case. btw, as i've lost track...how likely does it seem that we'll be adopting the simpler circles model versus the target offset weirdness?

@patrickhlauke I suspect the odds are very high now that a new CR is in order, and that it will be discussed in a couple of minutes on the backlog call, if you can attend

[patrickhlauke]

@mbgower unfortunately friday afternoons are the worst time in the week for me to attend live (otherwise i'd have loved to be more active in the backlog stuff directly myself, rather than just sniping from the sides here on github)

[patrickhlauke]

just added a slightly cleaned-up version of my proposed "overlapping and touching/abutting targets" diagram, with prose - see the updated https://raw.githack.com/w3c/wcag/patrickhlauke-target-size-minimum-issue3089-companion/understanding/22/target-size-minimum.html (at the end of the "Spacing" section)

[detlevhfischer]

@patrickhlauke Yes, the dividing line have done it. Good stuff. Now let's hope the circle exception will make it into 2.2.

[patrickhlauke]

Updated to harmonise with #3123, to replace "overlap" with "intersect" in both prose and SVG illustrations (cc @mbgower), and to split out the second large SVG into two smaller ones (one for the clipping example, one for the touching/abutting example)

[patrickhlauke]

Need to see how #3097 will affect this too

[detlevhfischer]

Great stuff - thanks for improving the examples!

[patrickhlauke]

thanks @detlevhfischer ... slowly getting there :)

[patrickhlauke]

@detlevhfischer @mbgower added a whole bit at the start of the "Spacing" section now to explain the concept of the 24 CSS diameter circle and how to center it (for square/rectangular, convex, and concave targets) ... I think, from my point of view, this was the last piece of the puzzle. happy to wordsmith further (as the explanation there was admittedly a bit rushed), but otherwise will make this PR ready for review when/if the actual SC wording changes to use the spacing approach

[mbgower]

Great work, @patrickhlauke ! A vast improvement, and the whole thing reads very well.
I directly committed one trivial editorial change for readability, which you can review in the diff of that commit.

[detlevhfischer]

@patrickhlauke It's really come a long way. Beautiful work. Good to see also graphics for irregular shapes. I am not sure if @dbjorge's proposal to swap "be able to draw a 24x24 rectangle inside the target" for a 24 x 24 circle is still a option but it looks like the impact on this understanding text would be minimal (one small change in section "Size requirement").

[patrickhlauke]

I am not sure if @dbjorge's proposal to swap "be able to draw a 24x24 rectangle inside the target" for a 24 x 24 circle is still a option but it looks like the impact on this understanding text would be minimal

While I was thinking about that as well while revising this, that would essentially change the whole nature of the SC (as then we're not talking about "The size of the target for pointer inputs is at least 24 by 24 CSS pixels" since the size is understood as "a width of 24 CSS pixels and a height of 24 CSS pixels", and that thing with the rectangle/square helps in determining that part

[patrickhlauke]

to more directly address #3045 I've reinforced the second paragraph in the intent a bit in the latest commit e21377c

[patrickhlauke]

@alastc now that #3123 has been merged, it would be good to see this companion merged soon as well (will just look at the merge conflict now to make sure it's kosher)