Skip to main content
SlapMyWeb
Slap a site

Accessibility fix

How to Fix Tap Targets That Are Too Small

Make buttons and links big enough and far enough apart to hit on a phone.

Difficulty
Easy
Impact
Medium
Time
30-60 min

Before

.icon-btn { width: 20px; height: 20px; }

After

.icon-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
Before and after code for: How to Fix Tap Targets That Are Too Small

Tap targets that are too small or too close together cause mis-taps on a phone. The practical minimum is about 44 by 44 CSS pixels with roughly 8 pixels between adjacent targets, and WCAG 2.2 sets 24 by 24 as an absolute floor. Padding the interactive element is the fix: enlarging the text is not.

Why it matters

Mis-taps are a conversion problem before they are an accessibility one: a link so close to another that reaching it is a lottery costs the visit. It disproportionately affects people with motor impairments and anyone using a phone one-handed.

How to fix it

  1. Find the offenders

    Icon-only buttons, links inside dense paragraphs, close pagination controls and footer link lists are the usual cases.

  2. Pad the interactive element

    Add padding to the anchor or button so its clickable box grows. Wrapping a small icon in a larger link is better than scaling the icon.

  3. Space adjacent targets

    Leave around 8 pixels between neighbours so a slightly off tap does not land on the wrong one.

  4. Test with a thumb, not a cursor

    Check on a real phone held one-handed. Targets in the top corners are hardest to reach even when they are large enough.

The code

Beforecss
.icon-btn { width: 20px; height: 20px; }
Aftercss
.icon-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

On your platform

WordPress

Theme footers and social icon rows are the usual culprits: often 16-pixel icons with no padding.

Next.js

Watch icon-only buttons built from a 16px lucide icon: the icon is not the target, the button around it is.

Sources

More fixes

Accessibility

How to Fix Low Color Contrast

Make text meet the WCAG 4.5:1 contrast ratio so it's readable for everyone.

Accessibility

How to Add Labels to Form Inputs

Associate a visible label with every input so screen-reader users can fill your forms.

Accessibility

How to Fix a Missing Lang Attribute

Declare the page's language so assistive technology pronounces it correctly.

Fixed that one.
Now find the rest.

A free audit ranks every issue on your site by the score points it costs, and links each one straight to its guide.

Run a free audit
Free foreverNo signupLive scan progress