Small touch targets are a failure. They frustrate users with motor impairments, large fingers, and anyone using a mobile device.

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. Aim for 44x44 pixels for better usability. Small or overlapping targets make it difficult 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

Add padding to reach the 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

Enforce minimum dimensions for buttons and links:

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

Add margin when targets are close together:

.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;
`

SEO impact: Core Web Vitals

Target size directly correlates with Interaction to Next Paint (INP) and Mobile Usability.

1. Mobile usability errors: Google Search Console has a specific error for "Clickable elements too close together." Pages with this error fail the "Mobile Friendly" test and lose mobile search rankings.
2. INP (Interaction to Next Paint): Users tap repeatedly or mistakenly tap adjacent elements when buttons are too small. Rage clicking and mis-clicking signal poor responsiveness and break your Core Web Vitals metrics.

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 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. Don't just size the icon.
• Using pixel-perfect designs that ignore accessibility: Touch targets must meet minimums. Don't sacrifice usability for "clean" design.
• Forgetting about links in body text: Inline links need adequate line-height or padding. Use padding: 8px 0 with display: inline-block.
• Dense navigation menus on mobile: Footer links and nav menus often cram items together. Use adequate padding to expand 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. Unlighthouse audits every page on your site to identify which templates and components need attention.