Operable · Level AA · 2.5.8
Target Size (Minimum)
Anything you tap or click needs at least a 24×24 CSS pixel target — or, if it looks smaller than that, enough surrounding space that a 24px circle centered on it doesn't touch a neighboring target. This isn't only a touchscreen concern: mouse users with hand tremors, and anyone using a device while it's physically shaking (a bus, a train), benefit exactly the same way.
- Motor
- Situational
How to recognize it
Look for icon-only buttons packed close together — a row of small social icons, a table with edit/delete icons sitting right next to each other in a dense grid, a close '×' button rendered at 16px with no padding around it. The thing to measure is the actual clickable or tappable box, not the visible icon: a 12px icon with 8px of padding on every side has a real target of 28px and passes comfortably, while the same 12px icon with zero padding fails even though the icon itself looks identical in both cases. It's an easy failure to miss in a design review, because it's invisible when you're just looking at how big something appears — you have to check the hit area specifically.
How to fix it
Give small interactive elements real padding so the actual clickable box reaches 24×24px, even when the icon or visible content inside stays small. Where the target genuinely can't grow — a dense icon toolbar, an established design system component you don't want to visually resize — add enough spacing between adjacent targets that a 24px circle centered on each one doesn't overlap its neighbor; the exception built into this criterion isn't 'do nothing about it,' it's 'solve it with spacing instead of size.' Two built-in exemptions are worth knowing: an inline text link inside a sentence doesn't need to hit 24px, since its size is naturally constrained by the surrounding line of text, and an undersized control is exempt if an equivalent, properly-sized control for the same function exists elsewhere on the page.
Example
Avoid
<button class="icon-btn" style="width: 16px; height: 16px; padding: 0;">
<svg>...</svg>
</button>.toolbar button {
width: 16px;
height: 16px;
margin: 0; /* targets touch each other */
}<a class="close-x" style="font-size: 12px; padding: 0;">×</a>Prefer
<button class="icon-btn" style="width: 16px; height: 16px; padding: 4px;">
<svg>...</svg>
</button>
<!-- 24x24 real hit area around a 16px icon -->.toolbar button {
min-width: 24px;
min-height: 24px;
margin: 0 4px;
}<a class="close-x" style="font-size: 12px; padding: 6px; display: inline-block;">×</a>