Fix Mobile Touch Targets

Make buttons and links tappable on mobile.

Touch targets need to be at least 44×44 pixels. Smaller buttons cause mistaps and frustration—and fail WCAG 2.1 compliance. Here’s how to audit and fix.

Minimum Touch Target Sizes

• WCAG 2.1 Level AAA: 44×44 CSS pixels minimum
• Apple HIG: 44×44 points
• Google Material: 48×48 dp (density-independent pixels)

44px is the consensus. Smaller targets cause errors, frustration, and accessibility failures.

The Problem Patterns

Checklists exist to catch the things you forget when you’re focused on the obvious. Work through them methodically.

1. Icon-Only Buttons

A 16px icon with no padding = 16px touch target. Too small.

/* Bad: Icon is the only target */
.icon-button {
  width: 16px;
  height: 16px;
}

/* Good: Padding expands the target */
.icon-button {
  width: 16px;
  height: 16px;
  padding: 14px; /* 16 + 28 = 44px total */
}

2. Inline Text Links

Links in body text are often too small vertically.

/* Good: Increase line height and vertical padding */
a {
  padding: 8px 0; /* Expands vertical tap area */
  display: inline-block;
}

3. Close-Together Buttons

Two buttons with 4px gap? Users hit the wrong one.

/* Bad: No breathing room */
.button-group button {
  margin: 2px;
}

/* Good: Adequate spacing */
.button-group button {
  margin: 8px;
}

Testing Touch Targets

Internal linking connects your content into a coherent structure that helps both users and search engines navigate your site effectively. A good linking strategy improves user engagement, distributes page authority throughout your site, and helps search engines understand which pages are most important to you.

Chrome DevTools

• Open DevTools and toggle device toolbar
• Select a phone viewport
• Hover over elements to see their size
• Actually try to tap things with your finger (on touchscreen laptop or real phone)

Lighthouse Audit

• Lighthouse > Accessibility > “Tap targets are not sized appropriately”

The Fixes

Add Padding (Not Min-Width)

/* Padding expands clickable area without changing visual size */
.small-button {
  padding: 12px 16px;
  min-height: 44px;
  min-width: 44px;
}

Invisible Tap Expansion

/* Expand hit area beyond visible element */
.icon-link {
  position: relative;
}
.icon-link::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
}

Responsive Scaling Patterns

Fixed pixel values break on different screen densities. Use these patterns to scale touch targets reliably across devices:

/* Base: 44px minimum, scales up on larger viewports */
.btn-touch {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 20px;
}

@media (min-width: 768px) {
  .btn-touch {
    min-height: 40px; /* Desktop can be slightly tighter */
    padding: 10px 16px;
  }
}

/* Navigation: stack vertically on mobile for bigger targets */
@media (max-width: 640px) {
  .nav-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .nav-links a {
    display: block;
    padding: 12px 16px;
    min-height: 44px;
  }
}

Form Input Sizing

Form inputs are frequent offenders. Checkboxes and radio buttons render at browser defaults (often 13x13px)—far below the 44px minimum. Here is a pattern that works:

/* Custom checkbox with adequate touch target */
input[type="checkbox"],
input[type="radio"] {
  width: 24px;
  height: 24px;
}

/* Wrap in label for larger hit area */
label.form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  min-height: 44px;
  cursor: pointer;
}

/* Select dropdowns and text inputs */
select, input[type="text"], input[type="email"] {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 16px; /* Prevents iOS zoom on focus */
}

The iOS zoom trap: If your input font-size is below 16px, iOS Safari zooms in when the user taps the field. This is disorienting and makes the form harder to use. Always set font-size: 16px or larger on mobile form inputs.

Quick Checklist

Work through each item systematically.

• All buttons at least 44x44px?
• Adequate spacing between targets (8px+)?
• Links in body text have vertical padding?
• Form inputs are tall enough to tap accurately?
• Tested on actual mobile device?

Confirming Touch Targets Meet 44px

• All touch targets are at least 44×44 pixels
• Adequate spacing between adjacent targets
• No accidental taps on wrong elements
• Tested on actual mobile device, not just emulator

Sources

• W3C – Understanding WCAG 2.1 Target Size
• Apple – Human Interface Guidelines: Accessibility
• Google Material Design – Accessibility Basics