Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Target Size (Minimum) edits and addition of diagram #2108

Merged
merged 8 commits into from
Nov 30, 2021

Conversation

colabottles
Copy link
Contributor

@colabottles colabottles commented Oct 24, 2021

Hope this is the correct link to to the latest rendered version (1 Nov 2021)

Introduction added as well as the diagram. May need further edits to <figcaption> or if there is any additional discussion about the intro text.

Closes #1848


<figure id="target-size-minimum">
<img src="img/target-size-minimum.png"
alt="A bulleted list of stacked links with sufficient and insufficient offset (see legend below)" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the alt for this is incorrect

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What should the alt be for this? I want to make sure it is relayed correctly.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

perhaps too lengthy for the alt itself - so likely some of this explanation could be used for the <figcaption> itself, and the alt reduced to a bare minimum...

Three diagrams: five square targets with dimensions of 24 by 24 pixels, arranged in a cross (one target at the center, and one target above, one to the right, one below, and one to the left), without gaps - this passes. In the second diagram, the central target is shrunk to 10 by 10 pixels, with a margin of 7 pixels to the other targets - this will fail the Success Criterion. The last diagram shows that to pass, the four outer 24 by 24 pixel targets need to be spaced out further away from the central 10 by 10 pixel target, at a distance of 14 pixels each, making the overall space occupied by the five targets bigger.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

alt I have for the first diagram (the one to be added): "A diagram showing target size of 4 targets, side-by-side that are 24 by 24 pixels in size. Another diagram below the first shows these targets spaced apart by 14 pixels on all sides."

The second alt: "A diagram showing three targets, two that pass and one that fails Success Criterion."

I replaced the <figcaption> with;

Three diagrams: five square targets with dimensions of 24 by 24 pixels, arranged in a cross (one target at the center, and one target above, one to the right, one below, and one to the left), without gaps - this passes. In the second diagram, the central target is shrunk to 10 by 10 pixels, with a margin of 7 pixels to the other targets - this will fail the Success Criterion. The last diagram shows that to pass, the four outer 24 by 24 pixel targets need to be spaced out further away from the central 10 by 10 pixel target, at a distance of 14 pixels each, making the overall space occupied by the five targets bigger.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for that first one, i'd suggest tweaking the alt to also include the size in the second case

A diagram showing ... Another diagram below the first shows the same targets, reduced in size to 10 by 10 pixels, spaced apart by 14 pixels on all sides.

or similar

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the second alt text: "Another diagram below the first shows the same targets, reduced in size to 10 by 10 pixels, spaced apart by 14 pixels on all sides showing adjacent button spacing." Or is the last part I added, "showing adjacent button spacing" repetitive you think?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As I said before, I think the point (that you can reduce size but at the same time spacing needs to increase, negating any attempt to compress targets) is much better made by realistic examples that authors encounter / implement in real sites out there - the video controls example, and possibly, an example of rows of dots reflecting slides in a carousel (these being often smaller than 24x24px). The example that is in here now does not map onto anything I have seen in the wild. The only examples I can think of, of targets spread out in two dimensions (rather than aligned along one dimension), are things that would likely be exempt, like place markers on a map. So I'm still not a fan of this example (but if others think it is valuable, so be it, let it be included then).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If there is a discussion about where to proceed from here on this, then I will wait for word then on how and where to proceed.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@detlevhfischer the example is abstract to show how it affects both dimensions. but ... you mention maps. how about north/south/east/west/center type controls on maps...and if an author decides (for whatever reason) to make one smaller? also, there could just as well be further controls top left/top right/bottom left/bottom right, not just limited to this cross arrangement.

@patrickhlauke
Copy link
Member

the other proposed image from #1848 is missing from this SC (note that @alastc mentioned "the second set", not just "the second image", in #1848 (comment))

Copy link
Member

@patrickhlauke patrickhlauke left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • needs addition of the other image (of the play/next/etc buttons and their spacing)
  • ideally add more context to the "The aim" bit (as currently it's a bit of a non-sequitur from the previous paragraph)
  • alt for the image needs fixing/correcting

Copy link
Contributor

@detlevhfischer detlevhfischer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See my comment in the conversation above.

Copy link
Contributor Author

@colabottles colabottles left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The latest changes that have been made per the conversation.

@detlevhfischer
Copy link
Contributor

detlevhfischer commented Oct 27, 2021

Looks good to me at cursory view - I just give up my opposition the abstract target pattern if no one else feels the same way...
I have replaced the link to the rendered version at the tope of this page with an up-to-date link to facilitate assessment

@colabottles
Copy link
Contributor Author

Everything I have changed has been pushed.

@patrickhlauke
Copy link
Member

Made a few more suggested tweaks to the alt and figcaption there

@detlevhfischer
Copy link
Contributor

detlevhfischer commented Nov 1, 2021

Good stuff - just updated the link above to the rendered version

@alastc alastc merged commit bce04b8 into w3c:main Nov 30, 2021
@colabottles colabottles deleted the colabottles-issue-1848 branch November 30, 2021 17:56
@patrickhlauke
Copy link
Member

patrickhlauke commented Nov 30, 2021

Just on this point (from the survey/meeting about it)

I wondered about the text on line 103 "...the smaller the actual target is". I think that is potentially not true

Unless I missed something, it is true. For every pixel of width that you make the target smaller, you need to add 1 pixel on both the left spacing and the right spacing. Same for any pixel of height you make it smaller, needing 1 more pixel to the spacing at the top and 1 more pixel at the bottom. Effectively, the overall size (or target size and spacing requirement) telescopes out the smaller you make the target size. I thought this made a good point to really try and get authors to consider not straying too far from the ideal size...but fair enough, we can leave it out (it's a bonus discovery for those like me who then run the numbers and try to find the extreme cases) /cc @mbgower

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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