Tap Targets Sized.

Touch targets smaller than 48x48px are hard to tap — Google penalizes this in mobile search

What does this check test?

This check verifies that all interactive elements (links, buttons, form inputs, checkboxes, radio buttons) have a minimum tap target size of 48x48 CSS pixels on mobile viewports, with at least 8px of spacing between adjacent targets. Google's mobile usability criteria and WCAG 2.2 Success Criterion 2.5.8 (Target Size Minimum) both set 24x24px as the absolute minimum, but Google's Lighthouse recommends 48x48px for a good mobile experience. Tap targets that are too small or too close together cause accidental taps, especially for users with motor impairments or large fingers.

Why does it matter?

Google's mobile-first indexing evaluates tap target sizing as part of its mobile usability assessment. Pages with tap targets that are too small or too close together are flagged in Google Search Console and may receive lower mobile rankings. The average adult finger pad covers about 48px on a mobile screen — targets smaller than this have high error rates (MIT Touch Lab research). Poor tap targets increase user frustration, accidental navigation, and bounce rate — all of which signal poor quality to Google's ranking algorithms. This is a ranking factor that directly correlates with user experience quality.

Who is affected?

UI designers specifying button and link sizes, front-end developers implementing interactive elements, mobile developers optimizing touch interactions, and QA engineers testing on real touch devices. Design system maintainers should enforce minimum touch target sizes in component specifications.

Where does this apply?

All interactive elements at mobile viewport widths: navigation links, CTA buttons, inline text links, form inputs and labels, dropdown triggers, accordion toggles, pagination links, social media icons, footer links, hamburger menu buttons, close/dismiss buttons, and checkbox/radio button labels. Inline text links within paragraphs and densely packed footer link lists are the most common offenders.

How to fix it

/* Minimum 48x48px for all interactive elements */
button, a, input, select {
  min-height: 48px;
  min-width: 48px;
}

/* Inline links: padding expands the touch area */
.body-text a {
  padding: 12px 4px;
}

/* Spacing between adjacent targets */
.nav-item + .nav-item {
  margin-left: 8px;
}

<!-- Icon button: 48px clickable area around 24px icon -->
<button style="width: 48px; height: 48px; padding: 12px;">
  <svg width="24" height="24">...</svg>
</button>

<!-- Checkbox: label is the tap target -->
<label style="display: flex; align-items: center; min-height: 48px; padding: 8px;">
  <input type="checkbox"> Accept terms
</label>

References

• Google — Mobile usability: Tap targets
• web.dev — Tap targets are not appropriately sized
• WCAG 2.2 — Success Criterion 2.5.8 Target Size (Minimum)
• Material Design — Touch targets