Touch Elements Too Close

Element Code: MO-004

What "touch elements too close" actually means

This check fires when two or more tappable things (links, buttons, form controls, icons) are packed so tightly that a finger cannot reliably hit one without grazing its neighbor. A fingertip contact patch is roughly 9 to 10 millimeters wide, which is a lot bigger than a mouse cursor's single pixel. So a menu that looks fine on your 27 inch monitor turns into a minefield on a phone, where a 10px gap between two footer links means half your taps land on the wrong one.

Google's Lighthouse and PageSpeed Insights run a "Tap targets are sized appropriately" audit. It flags any target smaller than 48 by 48 CSS pixels that also sits within a small distance of another target. The newer Chrome DevTools and the WCAG 2.2 "Target Size (Minimum)" success criterion (2.5.8) formalize the floor at 24 by 24 CSS pixels, with exceptions when there is enough surrounding spacing. Two different bars, same idea: a finger needs room.

Why this matters for SEO, not just UX

Tap target spacing is one of the inputs to how Google understands mobile usability. It will not tank your rankings on its own, but it feeds the page experience picture, and it directly wrecks the metrics that do move rankings. A user who mis-taps, lands on the wrong page, and bounces back is sending a "this result was frustrating" signal. Crowded taps also drag on conversions: mis-taps on a checkout button or a phone-number link are lost revenue you never see in analytics because the user just gives up.

Since Google indexes the mobile version of your page first, the crowded mobile layout is the layout that counts. If your desktop nav is roomy but your hamburger menu stacks links 8px apart, the version Google evaluates is the cramped one.

How to detect it

You do not have to guess. A few tools that actually surface this:

• Lighthouse / PageSpeed Insights: run the mobile audit and look for "Tap targets are sized appropriately." It lists the exact offending elements and their overlapping neighbors.
• Chrome DevTools: toggle device emulation, then use the element inspector. Chrome shows the computed box, and you can eyeball gaps against a 48px reference.
• Screaming Frog: pair a crawl with the PageSpeed Insights API integration to pull the tap-target audit across every URL at scale, so you find the templates that repeat the problem.
• Sitebulb: its mobile-friendly hints call out small tap targets page by page.
• Real devices: nothing beats loading the page on an actual phone and trying to tap your own footer with a thumb. If you fumble, so does everyone.

How to fix it, step by step

1. Set a minimum hit area. Give buttons and links a min-height and min-width of 48px, or at minimum 24px if you are only chasing WCAG 2.5.8. Use padding rather than shrinking text, so the visible element grows with the touch area.
2. Add real spacing. Put at least 8px, ideally more, between adjacent targets. For stacked nav links, generous vertical padding does double duty as the gap.
3. Expand the tappable zone, not just the icon. A 16px social icon can keep its look while getting a 48px padded wrapper that is the actual link. The finger target and the visual do not have to match.
4. Fix inline link clusters. Two links separated by a comma in body text are a classic offender. Increase line-height and, where you can, put them on separate lines or as spaced chips.
5. Re-test on mobile emulation. Re-run Lighthouse. The audit should pass, and the flagged elements list should be empty.

Good vs bad in practice

Reference: sizing targets

What "good" looks like

Good is boring: every button and link on the mobile layout is comfortably tappable on the first try, Lighthouse's tap-targets audit is green, and you never think about it again. If you handle it at the design-system level, once your base button and link components carry the right min-height and spacing, the whole site inherits it and this check quietly disappears across thousands of pages.

FAQ