Understanding WCAG 2.5.8
What is it?
A new Level AA criterion in WCAG 2.2.
Every interactive target should be at least 24 by 24 CSS pixels. Or enough space around it that a 24-px circle doesn’t overlap adjacent targets.
It’s about the size of the clickable area, not the visible icon.
Why it matters
- A target that’s too small is hit-or-miss for anyone who can’t aim with pixel precision.
- Tap the wrong button and you delete the wrong message, navigate to the wrong page, or close something you didn’t mean to. Then you have to undo it. If you still can.
Who it affects
- People with hand tremors, arthritis, or limited motor control
- People using a stylus, switch device, or finger
- People on small screens or holding a device while moving
- Older adults
Common failures
1. Tightly packed icon toolbars
16-px icons sitting flush against each other. Miss by a hair, you hit the next one.
2. Pagination squeezed into a line without room
Numbers “1 2 3 4 5 Next” crammed with no padding. You have to zoom in just to tap the right page.
3. Tiny dismiss buttons
The “x” to close a banner is often 12×12 px. Easy to miss. Missing it means clicking whatever’s underneath.
4. Icon-only buttons in data tables
Edit, archive, delete, packed into a row at icon size. One missed tap, you delete the wrong record.
5. Labels not associated with checkboxes or radios
Without association, checkboxes have to be clicked directly on the 16px checkbox rather than anywhere on the label.
6. Inline icon buttons next to text links
A “favorite” star next to a clickable headline. No space between them. Tap one, you might hit the other.
Solutions
Make the clickable/tappable area at least 24 by 24 pixels.
.icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
min-height: 24px;
}Add spacing between targets so that a 24px circle centered on each button doesn’t overlap adjacent buttons.
.toolbar button {
margin: 0 12px;
}A pseudo-element can be used to expand the clickable/tappable area without changing the visual design.
.small-button {
position: relative;
}
.small-button::before {
content: "";
position: absolute;
inset: -1em;
}Heads up: the invisible area extends past the visible button. In dense layouts, it can overlap neighbors and intercept their clicks.
Correctly associate labels with checkboxes and radio buttons to expand the active area.
<label>
<input type="checkbox" name="subscribe">
Subscribe to updates
</label>Labels can be implicitly or explicitly paired with the checkboxes.
How to test
- Use a 24×24 cursor bookmarklet to check sizes quickly.
- Check the size of buttons or icons. All under 24 by 24 needs padding or spacing.
- Scan with AAArdvark. It flags interactive elements that are below the 24-px threshold.
A note on WCAG 2.5.5
- WCAG 2.5.5 (Target Size Enhanced) is the Level AAA version of this rule. 2.5.5 requires interactive elements be a bit larger, at least 44 by 44 pixels.
- If you can make 44 by 44 px work, please do it. 24px is the floor, and bigger is better.
Closing
- Tiny buttons aren’t sleek. They’re a barrier.
- 24 px is roughly the width of a fingertip. That’s the minimum a user needs to tap the right thing on the first try.
- A one-tap task shouldn’t become a three-tap mess.