What is Tap Target?
A tap target is any interactive element — button or link — sized for finger taps on touchscreens. Accessible tap targets are at least 44×44 pixels with adequate spacing to prevent mis-taps.
Why Tap Target matters
Fingers are not cursors. A fingertip covers roughly 7–10 mm of screen, so links and buttons smaller than that, or packed closely together, produce mis-taps, rage taps and abandoned forms. Apple's guideline is 44×44 points, Google's Material guidance 48×48 dp, and WCAG 2.2 sets a minimum of 24×24 CSS pixels at level AA with 44×44 recommended at AAA. In practice, aim for 44 and leave at least 8 px between adjacent targets.
Size is about the hit area, not the visible icon: a 20 px icon inside a 44 px padded button is fine. The usual offenders are footer link lists, inline text links stacked on separate lines, pagination controls, icon rows and close buttons on modals. Bigger targets also help people with tremor, gloves or a phone in one hand.
Example
Making a small icon a comfortable target:
.icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn svg { width: 20px; height: 20px; }
nav a { padding: 12px 8px; } /* stacked links get height */The icon stays small; the tappable area does not.
Common mistakes
- •Footer and sidebar links set in 13 px text with no vertical padding.
- •Icon buttons sized to the icon.
- •Adjacent buttons with no gap, so a thumb on one hits the other.
How Webmatik checks it
The Mobile tap targets check reads Lighthouse's tap-target audit on the mobile rendering and lists elements that are too small or too close together.
Check your own site
Free Accessibility Audit Tool
Contrast, tap targets, alt text, keyboard navigation — every failure with a plain-English fix.
Related UX terms
See how your website scores across SEO, GEO, performance, and more
Run a free audit