Re: Script for calculating distance between UICs

Thank you so much WIlco,

This will be enough food for further discussion I think.
Let me pass it to the MATF TF and see what we come up with.

Cheers,
Jake
________________________________
From: Wilco Fiers <wilco.fiers@deque.com>
Sent: Monday, October 14, 2019 12:54 PM
To: Abma, J.D. (Jake) <Jake.Abma@ing.com>
Cc: Shawn Lauriat <lauriat@google.com>
Subject: Re: Script for calculating distance between UICs

Hey Jake,
It depends a bit on how you would want to do it. What exactly are you measuring the distance of? From the center point? From the corners? From the center of each edge? Do you want to include elements that are close to each other because the user scrolled them to be close to each other? Do you want to ignore things in different scrollable regions? Do you need it to work across iframes? Do you want to take irregular shapes into account, such as those in wrapping text, SVG path elements, area elements on image maps, stuff with rounded corners / clipped using CSS path, shaped using CSS transform?

It can get pretty complicated. A simple version takes minutes of Googling. I found this one: https://codepen.io/ZachCB/pen/apMdwG?editors=0010 A more sophisticated one, one I'd be happy with for axe would probably take a few days to develop and test.

I would suggest you remove the word "adjacent" from the proposal. It raises more questions than it answers. Can something not be adjacent and still be within that 8px distance? Also I think you need to define what distances you are actually measuring. If you measure 8px between the center of the two closest edges you get something quite different from when you measure it from the corners:

Example 1: Close centers of edges:
|------|  |------|
| elm1 |  | elm2 |
|------|  |------|

Example 2: Close corners:
|------|
| elm1 |
|------|  |------|
          | elm2 |
          |------|

If you take these examples, the corners are at the same distance in example 1 and example 2, but the distance between the center of the two closest edges if bigger in example 2 than it is in example 1, which seems to me like what you may want. That works well for rectangles, but for other shapes you may want another solution.

Hope that helps get you in the right direction. The TLDR version of it is, I need the spec to be more precise to be able to write it. This leaves a lot open to interpretation.

W







On Mon, Oct 14, 2019 at 9:07 AM Abma, J.D. (Jake) <Jake.Abma@ing.com<mailto:Jake.Abma@ing.com>> wrote:

FYI: https://www.w3.org/WAI/GL/mobile-a11y-tf/track/actions/77
________________________________
From: Abma, J.D. (Jake)
Sent: Monday, October 14, 2019 9:05 AM
To: Shawn Lauriat <lauriat@google.com<mailto:lauriat@google.com>>; Wilco Fiers <wilco.fiers@deque.com<mailto:wilco.fiers@deque.com>>
Subject: Script for calculating distance between UICs


Hi Shawn / Wilco,

For the possible new 2.2 SC Spacing Between Touch Targets we're wondering if you could help us with a script for calculating the distance between touch targets.

https://docs.google.com/document/d/1sszSUKB8t3VuRzxHtOjLfQZjNYCw-xr_EbuMwW7WiGc/edit

Kathy mentioned that you, Shawn, possibly already have a script for that but as far as I remembered you only mentioned at TPAC that it "could be done". If you have something already we're very interested.

Wilco, can you indicate what time it will take to make this script if Shawn doesn't have it or if you have to add it to axe?

In short the calculations has two challenges:


  *   Calculate all distances between touch targets, also when flexbox, percentages and grids are used (calculated on basis of screen position...?!)
  *   How to deal with all different view ports / break points (possibly 100s!)

Cheers,
Jake

-----------------------------------------------------------------
ATTENTION:
The information in this e-mail is confidential and only meant for the intended recipient. If you are not the intended recipient, don't use or disclose it in any way. Please let the sender know and delete the message immediately.
-----------------------------------------------------------------


--
Wilco Fiers
Axe for Web product owner - Co-facilitator WCAG-ACT - Chair ACT-R
[cid:BCBD7D4B-677E-4B95-AE3F-60005DBD9EE4]

-----------------------------------------------------------------
ATTENTION:
The information in this e-mail is confidential and only meant for the intended recipient. If you are not the intended recipient, don't use or disclose it in any way. Please let the sender know and delete the message immediately.
-----------------------------------------------------------------