What is a tap target (touch target)?
Definition A tap target (or touch target) is the area of a link, button or form control that responds to a tap. WCAG 2.2 success criterion 2.5.8 (level AA) requires targets of at least 24×24 CSS px or enough spacing around smaller ones; 2.5.5 (AAA) asks for 44×44. Apple's guidelines recommend 44×44 pt and Material Design 48×48 dp, which equal 44 and 48 CSS px.
How to fix it: Tap target size: how big buttons and links should be on mobile
Why does tap target size matter?
A fingertip contact area is much larger than a mouse pointer, and the finger hides what it touches. When targets are small or packed together, people hit the wrong link, which is frustrating for everyone and a real barrier for people with tremors or limited dexterity. Size is measured in CSS pixels: on a phone, 48 px is roughly 8–9 mm.
The numbers
| Guideline | Minimum |
|---|---|
| WCAG 2.2 SC 2.5.8 Target Size (Minimum), AA | 24×24 CSS px, or spacing so a 24 px circle around each small target doesn't touch another |
| WCAG 2.2 SC 2.5.5 Target Size (Enhanced), AAA | 44×44 CSS px |
| Apple Human Interface Guidelines | 44×44 pt |
| Material Design | 48×48 dp, with about 8 dp between targets |
WCAG 2.5.8 has exceptions: links inside a sentence of text, targets whose size is set by the browser and not changed by the author, and cases where a small size is essential.
Size or spacing?
WCAG 2.5.8 accepts a target smaller than 24×24 px if it has room around it: draw a 24 px circle centered on each small target, and the circles must not overlap another target or another target's circle. So a row of 20 px icons passes with 4 px or more between them, while the same icons placed edge to edge fail. In practice it's easier to make the target itself bigger with padding than to rely on spacing, and the extra room helps everyone, not only people with motor impairments.
Example
The visible icon can stay small while the tappable area grows:
.icon-button {
min-width: 44px; min-height: 44px;
display: inline-flex; align-items: center; justify-content: center;
}
.footer-links a { display: inline-block; padding: 12px 8px; }How MobileCheck checks it
MobileCheck measures every link, button and control on each device and flags two problems: targets under 24×24 CSS px with neighbors nearby (the WCAG 2.2 SC 2.5.8 AA limit), and small targets that almost touch each other, where it recommends at least 8 px of space or a 44 px height. 44–48 px is the comfortable size to aim for. Each flagged element is highlighted on the screenshot.