2.5.8 Target Size Examples
Passing
These pass 2.5.8 because they are each 24px.
These skewed buttons pass 2.5.8 because a 24px circle centered on them does not intersect another target.
These circular buttons pass 2.5.8 because a 24px circle centered on them does not intersect another target.
These 12px buttons pass 2.5.8 because a 24px circle centered on them does not intersect another target nor its circle.
These 18px image links pass 2.5.8 because a 24px circle centered on them does not intersect another target.
The links in this disclosure widget pass 2.5.8 because they are 24px in height. If this was a menu or listbox control with the same design, they would still pass.
The 16px sort buttons pass 2.5.8 because a 24px circle centered on them does not intersect another target nor its circle.
| Author | Title | Year |
|---|---|---|
| Mary Shelley | Frankenstein; or, The Modern Prometheus | 1818 |
| George Orwell | Nineteen Eighty-Four | 1948 |
This toolbar passes 2.5.8 because each item is 24px tall and the flex-basis restricts items to no narrower than 24px.
Failing
These fail 2.5.8 because they are each 20px and a 24px circle centered on them intersects another target.
These 24px skewed buttons fail 2.5.8 because a 24px circle centered on them intersects another target.
These circular buttons fail 2.5.8 because they are 22px circles and a 24px circle centered on them intersects another target.
These buttons fail 2.5.8 because they are 12px and a 24px circle centered on them intersects another target.
These image links fail 2.5.8 because they are 18px and a 24px circle centered on them intersects another target.
The links in this disclosure widget fail 2.5.8 because they are effectively 22.4px in height and a 24px circle centered on them intersects another target. If this was a menu or listbox control with the same design, they would still fail for the same reason.
The 16px sort buttons fail 2.5.8 because a 24px circle centered on them intersects another target's circle.
| Author | Title | Year |
|---|---|---|
| Mary Shelley | Frankenstein; or, The Modern Prometheus | 1818 |
| George Orwell | Nineteen Eighty-Four | 1948 |
This toolbar buttons fail 2.5.8 because a 24px circle centered on them intersects another target (too short and some are too narrow).
Testing Bookmarklets
Trigger this to set your pointer cursor to a 24px circle on this page. Activate it again to unset it. Drag it into your browser's bookmarks bar to use it on other sites.
WCAG Language
From the W3C Editor's Draft 10 May 2023, Success Criterion 2.5.8 Target Size (Minimum) reads:
The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:
- Spacing: Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;
- Equivalent: The function can be achieved through a different control on the same page that meets this criterion.
- Inline: The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;
- User agent control: The size of the target is determined by the user agent and is not modified by the author;
- Essential: A particular presentation of the target is essential or is legally required for the information being conveyed.
This language may change again before WCAG 2.2 is released in Q3 2023.