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.
- Results in seconds
- Pass / fail + fix guidance
- No account required
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
Put your whole site on autopilot — SEO and AI search
PositionMySite monitors every signal on this page across your entire website 24/7 — plus keyword rankings, competitor moves and AI-search readiness (llms.txt, schema, ChatGPT & Gemini visibility). When something breaks, you know before Google does.
Every feature unlocked · No commitment · Cancel anytimeFrequently Asked Questions
Google and Material Design both recommend a minimum of 48 x 48 px. Apple's Human Interface Guidelines suggest 44 x 44 pt. Use 48 x 48 px to comfortably exceed both standards.
Yes. Links inside paragraphs should have enough vertical padding (typically 4-8 px above and below) and adequate line-height to give the user a 48 px tap zone.
No. Even visually small icons need a 48 px tap area, achieved by padding the surrounding clickable container. Icon size and tap area are independent concerns.
Mobile-usability errors flow into Google's page-experience ranking signal. Sites with many tap-target failures are demoted in mobile rankings; fixing them removes the warning and recovers position.
Run Lighthouse in mobile mode for an automated audit, or use Chrome DevTools device emulation and tap each element with a finger-shaped overlay to feel real-world hit accuracy.