Small Touch Targets

Your clickable elements are too small. Trying to tap them is like pressing elevator buttons wearing oven mitts — frustrating and full of misfires.

What is this?

Try pressing an elevator button while wearing oven mitts. You will hit the wrong floor, miss entirely, or press two buttons at once. That is exactly the experience your visitors have when your buttons, links, and interactive elements are too small. Touch targets are the tappable/clickable areas of interactive elements. When they are under 44x44 pixels, fingers (and even mouse cursors) struggle to hit them accurately. This is not just a mobile problem — it affects anyone with motor difficulties, large fingers, or a bumpy bus ride.

Why it matters

For your visitors: Small touch targets cause mis-taps, accidental clicks on the wrong element, and the special frustration of tapping a tiny "X" to close a popup and accidentally clicking the ad behind it instead. On mobile (which is probably over half your traffic), this is the difference between a smooth experience and rage-closing the browser.
For your business: Every mis-tap is a moment of friction. Friction kills conversions. If your "Add to cart" button is too small, people buy less. If your navigation links are tiny, people explore less. Mobile users with a bad tap-target experience bounce at significantly higher rates. Google also factors touch target size into its mobile usability assessment, which affects search rankings.
The standard: WCAG 2.5.8 (Target Size Minimum) requires interactive elements to be at least 24x24 CSS pixels, with a strong recommendation of 44x44 pixels. Apple's Human Interface Guidelines specify a minimum of 44x44 points. Google's Material Design recommends 48x48dp. The consensus is clear: bigger is better for anything people need to tap.

Properly sized touch targets

<button style="min-height: 44px; min-width: 44px; padding: 12px 24px;">
  Add to cart
</button>

<nav>
  <!-- Links with enough padding to be tappable -->
  <a href="/about" style="display: block; padding: 12px 16px;">
    About
  </a>
</nav>

Tiny, untappable elements

<!-- This icon button is 24x24 — good luck tapping it -->
<button style="width: 24px; height: 24px; font-size: 12px;">
  ✕
</button>

<!-- These links are too close together with no padding -->
<nav style="font-size: 11px;">
  <a href="/about">About</a> | <a href="/contact">Contact</a>
</nav>

How to fix it

React / Next.js

The fix is mostly CSS. Set minimum sizes on all interactive elements and add enough padding to text links.

// src/app/globals.css — add these base styles
// If using Tailwind v4, add to your global layer:

@layer base {
  /* Ensure all buttons and inputs meet minimum touch target size */
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  select {
    min-height: 44px;
    min-width: 44px;
  }
}

For icon buttons that need to look small but tap big, use padding to expand the touch area:

// src/components/icon-button.tsx
interface IconButtonProps {
  onClick: () => void;
  label: string;
  children: React.ReactNode;
}

export function IconButton({ onClick, label, children }: IconButtonProps) {
  return (
    <button
      onClick={onClick}
      aria-label={label}
      className="flex h-11 w-11 items-center justify-center text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-white"
    >
      {/* Icon can be 20px — the tappable area is 44px */}
      {children}
    </button>
  );
}

For navigation links, add padding instead of relying on text size alone:

<nav className="flex gap-1">
  {links.map((link) => (
    <Link
      key={link.href}
      href={link.href}
      className="px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800"
      // py-2 (8px top + 8px bottom) + text line height ≈ 44px total
    >
      {link.label}
    </Link>
  ))}
</nav>

Plain HTML

<style>
  /* Global minimum touch targets */
  button,
  [role="button"],
  a,
  input,
  select,
  textarea {
    min-height: 44px;
  }

  /* For icon buttons: pad the touch area, not the visual */
  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
  }

  /* For text links in nav */
  nav a {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    /* Total height with line-height will be ~44px */
  }
</style>

The golden rule: the visual size of an element can be small, but the tappable area must be at least 44x44 pixels. Use padding to bridge the gap.

High impact — navigation~2 paws

The cat has toe beans, not surgical instruments. Make your buttons big enough for real fingers.

How the cat scores this

The scanner measures the computed size of all interactive elements — buttons, links, inputs, selects, and elements with click handlers. Any interactive element with a bounding box smaller than 44x44 CSS pixels gets flagged. The scanner also checks spacing between adjacent touch targets (elements closer than 8px apart are flagged as "too close") because even properly-sized targets cause mis-taps when crammed together. Icon buttons without sufficient padding are a common offender.