Tap Targets Too Small and Close Together: How to Fix It

What this check flags

This audit item fires when our crawler finds interactive elements on a mobile rendering of your page that are smaller than the recommended tap size, or that sit so close to a neighbor that a fingertip would cover both at once. The check models the page at a mobile viewport width, measures the tappable box of each link, button, input, or icon control, then compares it against Google's mobile usability guidance and the WCAG target size criterion.

It is flagged as a real usability problem because it directly affects whether a person can use your page on a phone. A desktop cursor is a single pixel, but a finger pad covers roughly 9 to 10 millimeters of screen.

The size and spacing rule

There are two numbers worth knowing.

Google's mobile guidance recommends a tap target of at least 48 by 48 CSS pixels, with at least 8 pixels of spacing between adjacent targets. That 48 pixel figure maps to about 9 millimeters, close to an average finger pad, so a tap lands cleanly without catching a neighbor. The 48 pixels applies to the tappable area, not the visible graphic. A link whose text is only 14 pixels tall still passes if padding expands the clickable region to 48 pixels.

The accessibility floor comes from WCAG 2.5.8 Target Size (Minimum), a Level AA criterion added in WCAG 2.2. It requires targets of at least 24 by 24 CSS pixels, OR at least 24 pixels of spacing to every adjacent target if the element itself is smaller. Think of 24 pixels as the minimum and 48 pixels as the comfortable target to aim for.

/* Comfortable target that meets Google's 48px guidance */
.tap-target {
  min-height: 48px;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* A small 16px icon padded up to a 24px WCAG-minimum box */
.icon-button {
  padding: 4px;        /* 16 + 4 + 4 = 24px tappable */
  box-sizing: content-box;
}

Who it hurts

Everyone taps the wrong link sometimes, but small targets punish some users far more than others. People holding a phone one handed, anyone with larger fingers, and users in a hurry all suffer the classic fat finger miss. The bigger impact is on people with motor impairments, hand tremor, or reduced dexterity, who cannot place a fingertip with pixel precision. For them a cramped link cluster is not a minor annoyance, it is a wall. Generous targets help every visitor and are essential for some.

Where it usually breaks

Dense link lists. Stacked text links with little vertical padding, such as related posts, tag clouds, or table of contents blocks, leave almost no gap between consecutive tap zones.

Tiny icon buttons. Share icons, close buttons, star ratings, and quantity steppers are often sized to the icon graphic alone, ending up well under 24 pixels with no padding.

Footer link clusters. Footers cram many small links into tight columns. On a phone these collapse into a wall of barely separated text where every tap is a gamble.

How to fix it

The fix is almost always about size and space, not redesign.

1. Add padding to grow the tappable area. Padding expands the clickable box without changing how large the text or icon looks. Apply it to the link or button itself so the whole padded region responds to a tap.

2. Set a minimum height and width. Use min-height and min-width to guarantee a floor regardless of content. Pair it with a flex display so short labels still fill the box.

3. Add spacing between neighbors. Margin or gap keeps adjacent targets apart so one tap cannot land on two. In lists, increase line height or row padding to open vertical gaps.

/* Dense link list, opened up for thumbs */
.link-list a {
  display: block;
  min-height: 48px;
  padding: 12px 16px;   /* grows the tappable row */
  line-height: 1.5;
}
.link-list a + a {
  margin-top: 8px;      /* 8px gap between neighbors */
}

After editing, test at a real mobile width, and make sure your page declares a proper viewport meta tag so the browser does not silently scale the layout.

How to diagnose it

Lighthouse, built into Chrome DevTools, is the quickest way to confirm and locate the issue. Open DevTools, switch to the Lighthouse panel, select the Mobile device option, run an audit, and look for the tap target warning. Lighthouse lists each failing element and the neighbor it overlaps, so you can jump straight to the offending markup. DevTools device emulation also lets you toggle a mobile viewport and probe spacing with the element inspector.

Common mistakes

Sizing the icon instead of the target. Making the SVG bigger fixes nothing if the clickable element around it stays small. Pad the button, not just the graphic.

Confusing the two thresholds. Hitting the 24 pixel WCAG floor satisfies accessibility but still feels cramped. Aim for 48 pixels where you can.

Forgetting spacing. Two perfectly sized 48 pixel buttons jammed together still cause mis taps. Size and spacing are separate requirements.

FAQ