Buttons are too small to tap on phones

Applies to

every page

Typical severity

medium

Effect on conversions

medium

Effort to fix

Quick to fix

What to look for

Buttons, menu links and fields under 24×24px at 390px that fail WCAG 2.5.8's spacing exception.

Why it matters

On a phone, people tap with a fingertip, not a precise mouse pointer. When buttons and links are small and packed together, people hit the wrong one. They land on a page they didn't want, or nothing seems to happen. Either way the site feels broken.

This matters most in the places that earn you money: menus, add to basket buttons, form fields and footer links to contact details. It also matters more for anyone with a tremor, arthritis or limited dexterity, which is why WCAG 2.2 added a minimum target size at level AA.

What good looks like

We load the page at a 390px wide phone viewport and measure every button, button-styled link, navigation link and form field. A target passes if it is at least 24 by 24 CSS pixels. A smaller target still passes under WCAG 2.5.8's spacing exception: if a 24px circle centred on it does not overlap another target, or the 24px circle of another small target. We raise a finding when three or more targets fail both tests.

How to check it yourself

1. Open the page in Chrome and open developer tools (F12).
2. Click the device toolbar icon (or press Ctrl+Shift+M, Cmd+Shift+M on a Mac) and set the width to 390.
3. Use the element picker to hover over menu links, buttons and footer links. The tooltip shows each element's width and height in pixels.
4. Note anything under 24px in either direction, then check how close it sits to the next link or button.
5. Try it on a real phone too. Tap through the menu and footer with your thumb and note any mis-taps.

How to fix it

• Aim for 44 by 44px on mobile for main buttons and menu links. 24px is the legal minimum, not the target.
• Make links bigger with padding rather than larger text. Padding grows the tap area without changing the look much.
• Add space between links in lists, especially footer links and inline text links in a row.
• For small icon buttons (close, search, social icons), keep the icon the same size but give the button a larger box around it.
• Re-measure at 390px after the change.

/* Bigger tap area without bigger text */
.nav a,
.footer a {
  display: inline-block;
  padding: 12px 8px;
  min-height: 44px;
}

/* Icon button: small icon, large target */
.icon-button {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
}

Common mistakes

• Testing only on a desktop screen with a mouse, where small targets feel fine.
• Making the icon bigger but leaving the clickable area the same.
• Stacking footer links with no gap between lines.
• Forgetting form controls like checkboxes and radio buttons, which are tiny by default.

AgoraScan measures this automatically on every page it audits, on desktop and mobile.

Based on

• WCAG 2.2 success criterion 2.5.8 Target Size (Minimum)