Spacing Between Touch Targets

Hey folks,
I want to elaborate on my feedback on the proposed touch targets SC. I was
reading the minutes and realised some of my points didn't come across well,
so I want to try again.

Concern #1: target

In my opinion, the definition of "target" is insufficient. It needs to be
specified along something like user interface component. The problem with
"target", as it is formulated today anything that has an click / pointer
event handler on it is a target. Most JS frameworks today attach their
event handlers to the body, or some other top level element, so the entire
page is often a single touch target. I know it's not intended that way, but
the phrasing of that definition "region of the display that will accept a
pointer action", it's hard to argue that the element that has the event
handler on it isn't the thing that "accepts a pointer action", that it's
instead some other element.

If we can do an errata on WCAG 2.1 to fix the current definition, that
would also be solved, but as that definition is used today, in my opinion
it doesn't do what it is supposed to.


Concern #2: Minimum width and minimum height

If two buttons, of 30 x 30 are aligned on the x-axis, with 14px in between,
it does indeed have a width (including space) of 44px, but their height is
still only 30px. Strictly speaking, that's a failure of this SC. That isn't
how I understand it is supposed to work, but that's the correct reading of
the current wording. This allows margins between elements, but not in the
other direction.

Another way this could be explained is to say no; strictly speaking it
might say both width and height, but it should be width or height. If
something is aligned on the X-axis, compute the width, if it's on the
Y-axis, compute the height. Problem there is with elements that are
positioned diagonally from each other. Those elements would not be tested
for target size at all. A way to fix that gap, is to look at the angle
between adjacent elements and pick the direction based on whether it is
closest to the X axis or the Y axis.

The way I see it, there are at least 4 ways to do the math on this:

1. width *and* height; Either width or height must be 44px or up, the other
direction may include spacing
2. Only width if their on the same x-axis, ony height if they're on the
same y-axis
3. Width or height, based on whether the angle between the center points is
closer to the x-axis or the y-axis
4. distance between the center points (of the border box)


The first one is what we have now, which is inconsistent with how I
understand the SC is intended to work (if it isn't, we need to define what
we mean by "adjacent", because that'll impact results too). The second
solution leaves gaps diagonally, and the third one is better, but is
difficult to explain. Which is why I've suggested #4. Taking the distance
between the center points of the border box is fairly easy to understand,
even if you don't know how to do the math, and it's intuitive.


Apologies for the long e-mail, but it seems the short version I put in the
survey didn't get my point across sufficiently.


Kind regards,

-- 
*Wilco Fiers*
Axe for Web product owner - Co-facilitator WCAG-ACT - Chair ACT-R