Target Size techniques update #4685
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Revisiting [PR 3231](#3231), which was left in a “this could still be useful but has loads of merge conflicts” state.
so it’s easier to find
- multiple issues commenting that the 44px references relate to the Enhanced example so should be removed or changed. This update removes references to the AAA 44px requirement. - remove the first example - we don’t need two really similar examples for this. - remove the “search navigation” in the image (and working example) as it wasn’t relevant. - remove some `xml:space` attributes. - remove cruft: editors css link, metadata section
✅ Deploy Preview for wcag2 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
@fstrr is there an actual change to the |
techniques/css/technique-using-css-to-ensure-targets-are-at-least-44-by-44-css-pixels.html
Outdated
Show resolved
Hide resolved
techniques/css/technique-using-css-to-ensure-targets-are-at-least-44-by-44-css-pixels.html
Outdated
Show resolved
Hide resolved
techniques/css/technique-using-css-to-ensure-targets-are-at-least-44-by-44-css-pixels.html
Outdated
Show resolved
Hide resolved
These were reversed - test for 44px for C42, test for undersized for the new 44px one Also, the "hasn't had its size changed" was wrong. it should be "HAS had its size changed"
…ast-44-by-44-css-pixels.html
patrickhlauke
requested changes
Oct 12, 2025
There was a problem hiding this comment.
Left a few code suggestions to make the title for C42 and its working example more explicit.
Some wording and the test/expected results were the wrong way around for C42 and the new technique, and some of the wording was off. I was bold enough to push a fix to that directly here.
Apart from that (and my suggestion for more explicit title, and possibly making C42 example even more "just barely passes"), this looks good to me
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
|
@patrickhlauke Thanks for those edits. I didn't touch base.css, so I'm unsure about your comment about that one. It I look at my commit history locally, I don't see a reference to it, which would make sense as I didn't open it.
|
patrickhlauke
approved these changes
Oct 12, 2025
dbjorge
requested changes
Oct 14, 2025
Co-authored-by: Dan Bjorge <dan@dbjorge.net>
Co-authored-by: Dan Bjorge <dan@dbjorge.net>
Co-authored-by: Dan Bjorge <dan@dbjorge.net>
fstrr
commented
Oct 14, 2025
|
Discussed on Backlog call 10/31. @adampage volunteered to do a review. |
adampage
reviewed
Oct 31, 2025
| .pagination-list li{ | ||
| background:#B9D6E5; | ||
| border:1px solid #183544; | ||
| padding:0.25em; |
There was a problem hiding this comment.
Suggested change
| padding:0.25em; |
Super editorial, but I find that the li’s padding in C42 helps tell the story of why it’s acceptable in 2.5.8 for a link’s interactive footprint to be smaller than 24×24 px as long as it has sufficiently additive “dead zone” around it.
In this new technique for 2.5.5, the visible 0.25em dead zone going beyond 44×44 feels like a red herring.
adampage
reviewed
Oct 31, 2025
Comment on lines
+23
to
+24
| <h3>Using a <code>display</code> value of <code>flex</code> with <code>min-height</code> and <code>min-width</code></h3> | ||
| <p>This example uses <code>min-height</code> and <code>min-width</code> on the list items containing the pagination links. The links don't meet the 24 by 24 CSS pixels size requirement, but centering the links inside containers that are at least 24 by 24 CSS pixels ensures sufficient spacing. The links' 24 CSS pixel diameter circles will each be completely within their containing list items, so they won't intersect each other.</p> |
There was a problem hiding this comment.
Suggested change
| <h3>Using a <code>display</code> value of <code>flex</code> with <code>min-height</code> and <code>min-width</code></h3> | |
| <p>This example uses <code>min-height</code> and <code>min-width</code> on the list items containing the pagination links. The links don't meet the 24 by 24 CSS pixels size requirement, but centering the links inside containers that are at least 24 by 24 CSS pixels ensures sufficient spacing. The links' 24 CSS pixel diameter circles will each be completely within their containing list items, so they won't intersect each other.</p> | |
| <h3>Using a <code>display</code> value of <code>flex</code> with <code>min-height</code> and <code>min-width</code></h3> | |
| <p>This example uses <code>min-block-size</code> and <code>min-inline-size</code> on the list items containing the pagination links. The links don't meet the 24 by 24 CSS pixels size requirement, but centering the links inside containers that are at least 24 by 24 CSS pixels ensures sufficient spacing. The links' 24 CSS pixel diameter circles will each be completely within their containing list items, so they won't intersect each other.</p> |
Is it too soon to start role modeling logical properties for robust internationalization? 🤓
adampage
reviewed
Oct 31, 2025
| <p>This example uses <code>min-height</code> and <code>min-width</code> on the list items containing the pagination links. The links don't meet the 24 by 24 CSS pixels size requirement, but centering the links inside containers that are at least 24 by 24 CSS pixels ensures sufficient spacing. The links' 24 CSS pixel diameter circles will each be completely within their containing list items, so they won't intersect each other.</p> | ||
| <figure id="pointer-spacing-block"> | ||
| <img src="img/pointer-spacing-1.png" alt="A horizontal pagination component immediately above the search results."> | ||
| <img src="img/24px-target-size-pagination-navigation.svg" alt="A horizontal pagination component. Each page is represented by a square box containing a link labelled with the page number. The boxes are 24 by 24 CSS pixels, but only the numbers inside the boxes are links, not the boxes themselves; the actual links are smaller than 24 by 24 CSS pixels."> |
There was a problem hiding this comment.
Suggested change
| <img src="img/24px-target-size-pagination-navigation.svg" alt="A horizontal pagination component. Each page is represented by a square box containing a link labelled with the page number. The boxes are 24 by 24 CSS pixels, but only the numbers inside the boxes are links, not the boxes themselves; the actual links are smaller than 24 by 24 CSS pixels."> | |
| <img src="img/24px-target-size-pagination-navigation.svg" alt="A horizontal pagination component. Each page is represented by a square box containing a link labeled with the page number. The boxes are 24 by 24 CSS pixels, but only the numbers inside the boxes are links, not the boxes themselves; the actual links are smaller than 24 by 24 CSS pixels."> |
This is silly, but UK vs US spelling are fresh in my mind thanks to ARIA. Do we care?
It seems “labeled” is preferred in WCAG prose where as “labelled” seems mostly limited to aria-labelledby.
adampage
reviewed
Oct 31, 2025
|
|
||
| <p>For each target that cannot be enlarged by a mechanism, is not inline, and is not covered by the essential exception:</p> | ||
| <p>For each undersized target that has no sufficiently large equivalent, that isn't in a sentence or otherwise | ||
| constrained by the line-height of non-target text, that has had its size modified by the author, and whose |
There was a problem hiding this comment.
Suggested change
| constrained by the line-height of non-target text, that has had its size modified by the author, and whose | |
| constrained by the <code>line-height</code> of non-target text, that has had its size modified by the author, and whose |
adampage
reviewed
Oct 31, 2025
| <h3>Procedure</h3> | ||
|
|
||
| <p>For each target that has no sufficiently large equivalent, that isn't in a sentence or otherwise constrained | ||
| by the line-height of non-target text, that has had its size modified by the author, and whose |
There was a problem hiding this comment.
Suggested change
| by the line-height of non-target text, that has had its size modified by the author, and whose | |
| by the <code>line-height</code> of non-target text, that has had its size modified by the author, and whose |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
closes #2433
closes #3447
closes #4227
xref #2434
xref #4274
I stumbled across #3231, which got close to the finish line and then got forgotten about. It seems that the issues it was aiming to close are still open and there was an appetite to clean up C42 and create a new technique for Target Size (Enhanced), so I created a new branch and copied the old code into that, which seemed easier than dealing with two years of merge conflicts.
This PR:
@kfranqueiro When things get approved, all the various links will need updating. I tried to work out how everything works now so I could prep things with placeholder links, but where there was once simple HTML, there's now JSON and XML that should make sense, but doesn't (at the moment).
Preview links: