Re: Best place for revised Pointer Target Spacing

Basically we've tried to solve the User / Functional Need / fix the intent
of activating the wrong link by providing target spacing IF targets are
less than 44 CSS pixels.
(so not setting a minimum target size, this might be an option but just
want to be clear on preventing the accidental activation of small targets)

We've come up with two approaches last year where we need to word it in a
way to solve different scenarios.
Hereby two ways of looking at it, not perfectly, but to give an idea on the
challenge we need to solve in a beautiful sentence.
This is not per se a suggestion but an addition to show the two ways of
approaching this:

(Again, a SC for setting a minimum target size might be made (or integrated
in this one) but the 44 px was already that one not ending up at AA, if we
want one smaller than 44 this might be done without blending it with this
User Need / intent)

--------------------------------------
1 (all possibilities smaller than the AAA version)
--------------------------------------

The width and height of targets and their target spacing is at least 44 CSS
pixels where spacing between targets do not overlap, except when:

Inline: The target is in a sentence or block of text;
Essential: A particular presentation of the target is essential to the
information being conveyed.

--------------------------------------
2 (8 px with fix for grey area)
--------------------------------------

There is 8 CSS pixel target spacing for each target smaller than 36 CSS
pixels
AND FOR
Targets between 36 and 44 CSS pixels the Total of target and target spacing
is at least 44 CSS pixels,
except when:

Inline: The target is in a sentence or block of text;
Essential: A particular presentation of the target is essential to the
information being conveyed.

--------------------------------------

Op do 10 sep. 2020 om 22:51 schreef Sukriti Chadha <sukriti1408@gmail.com>:

> That is the effective result of the proposed SC. It applies to targets
> less than 44X44. For anything bigger, there isn't  a spacing requirement.
>
> On Thu, Sep 10, 2020, 4:48 PM Jonathan Avila <jon.avila@levelaccess.com>
> wrote:
>
>> Spacing seems to incentivize smaller icons with spacing over larger icons
>> with no spacing.  Do we have concrete research that says smaller with
>> spacing is more effective than larger target sizes alone?  If not perhaps
>> we might want to allow 44px targets without spacing as also acceptable.
>>
>>
>>
>> Jonathan
>>
>>
>>
>> *From:* Kathy Wahlbin <kathyw@ia11y.com>
>> *Sent:* Thursday, September 10, 2020 1:34 PM
>> *To:* Detlev Fischer <detlev.fischer@testkreis.de>
>> *Cc:* Alastair Campbell <acampbell@nomensa.com>; Sarah Horton <
>> sarah.horton@gmail.com>; jake abma <jake.abma@gmail.com>; Mobile
>> Accessibility Task Force <public-mobile-a11y-tf@w3.org>
>> *Subject:* RE: Best place for revised Pointer Target Spacing
>>
>>
>>
>> *CAUTION:* This email originated from outside of the organization. Do
>> not click links or open attachments unless you recognize the sender and
>> know the content is safe.
>>
>>
>>
>> Detlev –
>>
>>
>>
>> The text for the 4px, we did mean 4px on each side.  Is there a better
>> way to rephrase that?
>>
>>
>>
>> The CSS pixels came from research at Microsoft which stated:
>>
>>    - Icons should be at least 16 X 16px
>>    - The target area needs to be 24 X 24px
>>    - Spacing (margin) needs to be 16% of either the height or width
>>
>> Based on the concerns from the WG, we went back and forth on the approach
>> and felt putting the minimum size and keeping the margins was the best way
>> of keeping the intent of SC.
>>
>>
>>
>> Kathy
>>
>> VP Enterprise Accessibility & General Manager
>>
>>
>>
>> *T* (978) 443-0798  *C* (978) 760-0682
>>
>> *The Paciello Group & Interactive Accessibility *
>>
>> 17757 US Highway 19 N, Suite 560, Clearwater, FL 33764
>>
>> https://www.paciellogroup.com
>>
>> https://www.interactiveaccessibility.com
>>
>>
>>
>> A *Vispero™* Company
>>
>> https://vispero.com/
>>
>>
>>
>> NOTICE: This communication may contain privileged or other confidential
>> information. If you are not the intended recipient, please reply to the
>> sender indicating that fact and delete the copy you received. Any
>> disclosure, copying, distribution or action taken or omitted to be taken by
>> an unintended recipient in reliance on this message is prohibited and may
>> be unlawful.
>>
>>
>>
>> *From:* Detlev Fischer <detlev.fischer@testkreis.de>
>> *Sent:* Thursday, September 10, 2020 1:23 PM
>> *To:* Kathy Wahlbin <kathyw@ia11y.com>
>> *Cc:* Alastair Campbell <acampbell@nomensa.com>; Sarah Horton <
>> sarah.horton@gmail.com>; jake abma <jake.abma@gmail.com>; Mobile
>> Accessibility Task Force <public-mobile-a11y-tf@w3.org>
>> *Subject:* Re: Best place for revised Pointer Target Spacing
>>
>>
>>
>> Unfortunately I couldn‘t make it today to the MATF telco, but here are
>> two things that we may still need to address:
>>
>> 1. “with a minimum spacing of the height and width of 4 CSS pixels“:
>>
>> I think the current wording does not clarify whether 4 px spacing is the
>> *combined* value for width (e.g. 2 px left and 2px right) or whether 4px
>> would be required all around the target. Can we clarify that?
>>
>> 2. For designers aiming for more compact icon bars or dropdown menus,
>> this approach seems to encourage a pattern of 24px width / 4px space (or
>> 8px, see above) / 24px width and so on. I contend that 28px width flush
>> 28px of the adjacent target might be the preferable implementation as it
>> increases chances of hitting the target - at least in the mouse pointer
>> space where no tab heuristics apply. What is the rationale of preferring
>> smaller targets with gaps over larger targets without gaps if both have the
>> same size and take the exact same space (assuming that many targets will
>> have some padding which would be part of the target area)?
>>
>>
>>
>> Best,
>>
>> Detlev
>>
>> Sent from phone
>>
>>
>>
>> Am 10.09.2020 um 18:21 schrieb Kathy Wahlbin <kathyw@ia11y.com>:
>>
>> 
>>
>> Hi Alastair –
>>
>>
>>
>> Here is what the mobile taskforce is proposing for the wording on the SC.
>>
>>
>>
>> For each target that has a width or height less than 44 CSS pixels, the
>> target area has a width and height of at least 24 CSS pixels with a minimum
>> spacing on the height and width of 4 CSS pixels where the spacing cannot
>> overlap.
>>
>>
>>
>> The 24 CSS px comes from Microsoft’s research where they are recommending
>> a target area of 24px with a minimum of 16% spacing.  If we look at the
>> minimum that is 3.8px so we rounded that to 4 CSS pixels.
>>
>>
>>
>> Kathy
>>
>> VP Enterprise Accessibility & General Manager
>>
>>
>>
>> *T* (978) 443-0798  *C* (978) 760-0682
>>
>> *The Paciello Group & Interactive Accessibility *
>>
>> 17757 US Highway 19 N, Suite 560, Clearwater, FL 33764
>>
>> https://www.paciellogroup.com
>>
>> https://www.interactiveaccessibility.com
>>
>>
>>
>> A *Vispero™* Company
>>
>> https://vispero.com/
>>
>>
>>
>> NOTICE: This communication may contain privileged or other confidential
>> information. If you are not the intended recipient, please reply to the
>> sender indicating that fact and delete the copy you received. Any
>> disclosure, copying, distribution or action taken or omitted to be taken by
>> an unintended recipient in reliance on this message is prohibited and may
>> be unlawful.
>>
>>
>>
>> *From:* Alastair Campbell <acampbell@nomensa.com>
>> *Sent:* Thursday, September 10, 2020 10:47 AM
>> *To:* Sarah Horton <sarah.horton@gmail.com>
>> *Cc:* jake abma <jake.abma@gmail.com>; Detlev Fischer <
>> detlev.fischer@testkreis.de>; Mobile Accessibility Task Force <
>> public-mobile-a11y-tf@w3.org>
>> *Subject:* RE: Best place for revised Pointer Target Spacing
>>
>>
>>
>> Hi Sarah,
>>
>>
>>
>> I think the Apple & MS resource are for providing app icons, the assets,
>> they don’t speak to target sizes. For example, the smallest icons would
>> probably best used in contexts like favicons, little icons within a larger
>> component that might not even be interactive.
>>
>>
>>
>> I think the Mobile task force are meeting in about 15 minutes:
>>
>> https://www.w3.org/2002/09/wbs/66524/telco/
>>
>>
>>
>> Hopefully they will have a chance to discuss it. Sorry for providing that
>> very last minute, I just got out of a run of meetings ☹
>>
>>
>>
>> Cheers,
>>
>>
>>
>> -Alastair
>>
>>
>>
>>
>>
>> *From:* Sarah Horton <sarah.horton@gmail.com>
>> *Sent:* 10 September 2020 12:20
>> *To:* Alastair Campbell <acampbell@nomensa.com>
>> *Cc:* jake abma <jake.abma@gmail.com>; Detlev Fischer <
>> detlev.fischer@testkreis.de>; Mobile Accessibility Task Force <
>> public-mobile-a11y-tf@w3.org>
>> *Subject:* Re: Best place for revised Pointer Target Spacing
>>
>>
>>
>> Thanks, Alastair!
>>
>>
>>
>> I was wondering if we could look at interface guidelines for desktop apps
>> for a minimum size for icons, for example, Apple’s minimum size is 16 x 16:
>>
>>
>>
>>
>> https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/
>>
>>
>> https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/custom-icons/
>>
>>
>>
>> And Windows is also 16 x 16:
>>
>>
>>
>>
>> https://docs.microsoft.com/en-us/windows/uwp/design/style/app-icons-and-logos#more-about-app-icon-assets
>>
>>
>>
>> That’s assuming those are research-informed minimums (you’d hope!!).
>>
>>
>>
>> For menus, I didn’t see any specification the item height in the
>> interface guidelines as I think those are not defined by the author—the
>> contents are but not the presentation.
>>
>>
>>
>> Hope this helps!
>>
>>
>>
>> I’m away next week and won’t be available to meet.
>>
>>
>>
>> Best,
>>
>> Sarah
>>
>>
>>
>>
>>
>> On Sep 9, 2020, at 6:39 PM, Alastair Campbell <acampbell@nomensa.com>
>> wrote:
>>
>>
>>
>> Hi folks,
>>
>>
>>
>> Sorry, I need to update my filters as these didn’t get to my inbox
>> (Detlev’s should have).
>>
>> Also, adding Sarah to the CC list as she expressed interest.
>>
>>
>>
>> Yesterday we discussed [1] the target-pointer-spacing criteria, with
>> reference to issues #1312 and #1361, and since then also issue #1384 [2].
>>
>>
>>
>> My overview is that dealing with the various issues
>> <https://github.com/w3c/wcag/labels/2.5.8%20Pointer%20Target%20Spacing> means
>> we need to either:
>>
>>    - Have a minimum size that is smaller (e.g. 26px) at AA, and forget
>>    about the spacing aspect.
>>    - Keep the current size/spacing metrics but not allow targets to
>>    share spacing (so smaller targets are not incentivised).
>>    - Something else.
>>    - Drop the SC.
>>
>>
>>
>> The core problems (IMHO) were that:
>>
>>    - With shared spacing, it can incentivise making targets smaller if
>>    they are in a row/list. That may not be an issue for hitting them per-se,
>>    but would impact people with low vision.
>>    - Lots of tool-bars and vertical lists of links would not pass, it
>>    seems like something that would be better dealt with by personalisation
>>    rather than reducing the information density for everyone. Thus the
>>    suggestion that we used a smaller target size to catch the really tiny
>>    targets.
>>
>>
>>
>> If there isn’t space on the MAFT agenda this week (or next), we could
>> setup a specific call?
>>
>>
>>
>> Cheers,
>>
>>
>>
>> -Alastair
>>
>>
>>
>> 1] https://www.w3.org/2020/09/08-ag-minutes.html#item12
>>
>> 2] https://github.com/w3c/wcag/issues/1312
>>
>> https://github.com/w3c/wcag/issues/1361
>>
>> https://github.com/w3c/wcag/issues/1384
>>
>>
>>
>>
>>
>> *From:* jake abma <jake.abma@gmail.com>
>> *Sent:* 09 September 2020 17:55
>> *To:* Detlev Fischer <detlev.fischer@testkreis.de>
>> *Cc:* Mobile Accessibility Task Force <public-mobile-a11y-tf@w3.org>
>> *Subject:* Re: Best place for revised Pointer Target Spacing
>>
>>
>>
>>
>>
>> As I think Kathy has done a lot of work here and has a clear view on this
>> let's discuss this and ask her about the history and research.
>>
>>
>>
>> Op wo 9 sep. 2020 om 15:22 schreef Detlev Fischer <
>> detlev.fischer@testkreis.de>:
>>
>>
>>
>> Am 09.09.2020 um 15:04 schrieb jake abma:
>>
>> Just a small reminder that the intent was not to have another SC text
>> with a smaller target size, but to have a least a 8 CSS px distance between
>> adjacent targets (morphed into the current text)
>>
>>
>> Hi Jake,
>> I thought working with a smaller size was what had emerged as an
>> alternative approach favoured by some in the last WG telco - but of course
>> am open to other approaches. Setting a lower target size for an AA
>> requirement may be easier to understand, and it would avoid the detrimental
>> approach of reducing target size in order compress groups pf targets (as
>> would probably also happen if we set 8px as minuimum distance).
>>
>> The other potential negative impact of an 8px distance requirement would
>> be the incentive to create targets with gaps rather than including padding
>> (of icons or text links)  in the active target area, which at least for
>> mouse users would be better than gaps (I guess the tap heuristics make this
>> less of a problem under mobile OSs).
>>
>> Best,
>> Detlev
>>
>>
>>
>> Cheers!
>>
>>
>>
>> Op wo 9 sep. 2020 om 14:53 schreef Detlev Fischer <
>> detlev.fischer@testkreis.de>:
>>
>> Hi ALastair,
>>
>> I wondered whether it would help to create an issue for the reset of
>> Pointer Target Spacing - or what would you suggest is the best approach?
>> My personal hunch is that it might be easiest to start from the
>> normative text of our AAA SC Target size, just with a smaller target
>> value like 26 x 26px. That woud seem most consistent. This could easily
>> done - but I guess just doing that as a pull request on the SC text
>> would leapfrog the discussion we will likley want to have before that?
>> CC'ing Mobile a11y TF...
>>
>> Best,
>> Detlev
>>
>> --
>> Detlev Fischer
>> DIAS GmbH
>> (Testkreis is now part of DIAS GmbH)
>>
>> Mobil +49 (0)157 57 57 57 45
>>
>> http://www.dias.de
>> Beratung, Tests und Schulungen für barrierefreie Websites
>>
>>
>>
>> --
>>
>> Detlev Fischer
>>
>> DIAS GmbH
>>
>> (Testkreis is now part of DIAS GmbH)
>>
>>
>>
>> Mobil +49 (0)157 57 57 57 45
>>
>>
>>
>> http://www.dias.de
>>
>> Beratung, Tests und Schulungen für barrierefreie Websites
>>
>>
>>
>>