w3c / tr-design

CSS used by W3C specs (this repo is not about the w3.org/TR index page)
https://w3c.github.io/tr-design/src/README
Other
64 stars 29 forks source link

WCAG 2.2 target size issues on Table of contents #318

Open WilcoFiers opened 2 years ago

WilcoFiers commented 2 years ago

@michael-n-cooper asked me to post this here. WCAG 2.2 is introducing a new target size (minimum) success criterion. This criterion requires targets to have a minimum size of 24px, or for there to be an offset of 24 pixels to the closest target.

This is not the case for the table of contents of W3C specifications. The height of an item in the table of content is 20 pixels, as can be seen on this screenshot: Chrome DevTools showing the height of an item in the ToC as 20.19 pixels

This issue exists when the ToC is pinned on the side, and when it is placed at the top of the document.

This success criterion also applies to other lists of links used in the specs, although for them the default styles do end up with a height of exactly 24 pixels, as can be seen on the following: Chrome DevTools showing the hight of a link list as 24 pixels

I took these screenshots from the media queries spec, but it the style is the same on other standards.

fantasai commented 1 year ago

When I measure from baseline to baseline on the ToC, I get at least 24px. So I'm not sure your measurement is correct, are you accounting for the margins?

Adding a min-height interferes with typographic spacing and font size relationships, and it doesn't solve the problem of links within running paragraph text, which for some paragraphs can get quite dense. If WCAG needs us increase the target size of all our links, then wouldn't we need to increase the font size of the whole page? We can leave the original font size intact for printing, which is non-interactive... Currently, though, the page is set to honor the user's preferred font size, so I'd prefer not to increase it.

(Also, why 24px? Shouldn't this criterion be related to the screen resolution somehow?)

Btw, I'll note that the WCAG spec can't be bothered to follow its own advice: the Understanding/How to Meet links are stacked with zero spacing, are significantly smaller than the users's preferred font size, and are only 16px tall.