Small touch targets cause frustration for users with motor impairments, large fingers, or anyone using a mobile device in a hurry.

What's Happening

Interactive elements like buttons, links, or form controls are too small or too close together. WCAG 2.2 requires touch targets to be at least 24x24 CSS pixels, with the enhanced requirement being 44x44 pixels. When targets are smaller or overlap, users struggle to activate the right element.

Diagnose

1. Open DevTools and toggle device emulation (mobile view)
2. Use the Elements panel to inspect small interactive elements
3. Check computed dimensions in the Styles panel under "Computed"
4. Look for buttons, links, and inputs under 24px in either dimension

Run this in Console to find undersized targets:

document.querySelectorAll('a, button, input, select, textarea, [role="button"]').forEach((el) => {
  const rect = el.getBoundingClientRect()
  if (rect.width < 24 || rect.height < 24) {
    console.log(`${el.tagName}: ${rect.width.toFixed(0)}x${rect.height.toFixed(0)}px`, el)
  }
})

Fix

1. Increase Padding on Interactive Elements

The simplest fix adds padding to reach minimum size:

/* Before: Small tap target */
.icon-button {
  padding: 4px;
}

/* After: Accessible tap target */
.icon-button {
  padding: 12px;
  min-width: 44px;
  min-height: 44px;
}

2. Use min-height and min-width

For buttons and links, enforce minimum dimensions:

button,
a,
[role="button"] {
  min-height: 44px;
  min-width: 44px;
}

/* For inline links, ensure adequate line-height */
a {
  padding: 8px 0;
  display: inline-block;
}

3. Add Spacing Between Targets

When targets are close together, add margin:

.button-group button {
  margin: 4px;
  min-height: 44px;
  min-width: 44px;
}

/* Or use gap with flexbox */
.button-group {
  display: flex;
  gap: 8px;
}

Framework Examples

<template>
  <!-- Use min-h and min-w utilities -->
  <UButton class="min-h-11 min-w-11">
    <UIcon name="i-heroicons-heart" />
  </UButton>

  <!-- For icon-only buttons, ensure adequate size -->
  <button class="p-3 min-h-[44px] min-w-[44px]">
    <span class="sr-only">Like</span>
    <UIcon name="i-heroicons-heart" />
  </button>
</template>

For React with styled-components or CSS modules:

const IconButton = styled.button`
  min-height: 44px;
  min-width: 44px;
  padding: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
`

Verify the Fix

1. Run Lighthouse again and check the target-size audit
2. Test on an actual mobile device with your thumb
3. Verify you can tap each target without accidentally hitting adjacent elements
4. Check that focus rings are visible and sized appropriately

Common Mistakes

• Only sizing the icon, not the button — A 16px icon needs a 44px clickable area around it, not just a 16px button.
• Using pixel-perfect designs that ignore accessibility — Work with designers to ensure touch targets meet minimums in the design phase.
• Forgetting about links in body text — Inline links need adequate line-height or padding to be tappable. Consider padding: 8px 0 with display: inline-block.
• Dense navigation menus on mobile — Footer link lists and nav menus often cram items together. Use adequate padding and consider expanding touch areas.

Related Issues

Target size issues often appear alongside:

• Meta Viewport — Users who can't zoom need larger targets even more
• Tabindex — Interactive elements need both proper focus order and adequate size
• Color Contrast — Small, low-contrast targets are nearly unusable

Test Your Entire Site

Touch target issues multiply across sites with repeated UI patterns like navigation, footers, and card layouts. Unlighthouse audits every page on your site, helping you identify which templates and components need attention rather than checking pages one by one.

Related

• All Accessibility Issues
• Accessibility Overview