Tap Target Signals Test
The Tap Target Test inspects every interactive element (buttons, links, form controls) at the mobile viewport and reports any that are smaller than the 48 x 48 px minimum or closer than 8 px to a neighbouring tap target. Small or crowded tap targets cause mis-taps, frustrated users and explicit usability warnings in Google Search Console. The fix — sizing buttons and links to a consistent 48 px tap area — typically takes a few CSS lines per component.
What This Tool Checks
- Every <button>, <a>, input and form control measured at 375px viewport
- Targets smaller than the 48 x 48 px Material Design minimum
- Targets within 8 px of a neighbouring target
- Inline-text links that lack adequate padding
- Hidden or off-screen tappable elements
- Lighthouse "Tap targets are sized appropriately" check
Why It Matters for SEO
Small tap targets drive thumb mis-taps, especially on the edges of the screen and around dense interactive areas (toolbars, navigation menus). Mis-taps push users away from your CTAs, reduce conversion and trigger Google's mobile usability warnings. Increasing tap targets to a consistent 48 x 48 px is one of the highest-ROI mobile UX changes — measurable in conversion lift within days.
How to Fix It
Set min-width: 48px and min-height: 48px on every interactive element. Add 8 px (or more) margin between adjacent tappable elements. Use larger hit areas for icons by adding padding rather than font-size. Re-test in Lighthouse and at the 375px viewport.
How It Works
Headless Chrome renders the page at a mobile viewport, walks every interactive DOM element, and captures the computed bounding-box width, height and distance to the nearest neighbour. Anything failing the 48 x 48 px minimum or 8 px spacing rule is reported with its CSS selector for direct editing.
Common Mistakes to Avoid
- Icon-only buttons sized to the icon's natural width (24x24px)
- Text links inside paragraphs with no padding (rely on line-height alone)
- Form controls (radios, checkboxes) at default browser size
- Toolbar buttons clustered with no spacing
- Using padding only on hover state (does not increase actual tap area)
Quick Checklist
- Buttons, links and form controls at least 48 x 48 px
- At least 8 px spacing between adjacent targets
- Icon buttons padded out to 48 px tap area
- Inline links inside text have adequate vertical padding
- Lighthouse tap-targets audit passes