Touch target size

What it is

A touch target is the area a user can tap, click, or otherwise activate to trigger a control — a button, a link, a checkbox, an icon. The target is not just the visible glyph; it is the full hit area the browser registers as activating the control.

WCAG 2.2 introduced a new Level AA success criterion, 2.5.8 Target Size (Minimum), that requires interactive targets to be at least 24×24 CSS pixels. The older Level AAA criterion, 2.5.5 Target Size (Enhanced), asks for 44×44 CSS pixels. Apple's Human Interface Guidelines recommend 44pt, and Material Design recommends 48dp.

Why it matters

Small targets are easy to miss. That penalises:

• Users with motor impairments — Parkinson's, tremors, arthritis, limited fine-motor control.
• Users on small phones, or holding a phone one-handed on a commute.
• Older users, whose pointing precision declines with age.
• Anyone tapping while walking, in a moving vehicle, or wearing gloves.

Mis-taps are not just annoying. They can submit the wrong form, open the wrong link, or trigger destructive actions like "delete".

How to implement

Set a minimum size on every interactive element:

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

For icon-only buttons that must look small, expand the hit area with padding rather than shrinking the target:

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 10px; /* hit area extends past the 24px icon */
  background: transparent;
  border: 0;
}

<button class="icon-button" aria-label="Close dialog">
  <svg width="24" height="24" aria-hidden="true">…</svg>
</button>

If a target genuinely must be smaller than 24 CSS px — for example, a dense data table — WCAG 2.5.8 allows it as long as a 24 px diameter circle around the target's centre does not overlap any other target. The spacing alone satisfies the criterion.

Inline links inside running prose are exempt from both criteria. A link in a sentence is sized by the line-height of the paragraph, and forcing 44 px around each one would wreck typography.

Common mistakes

• Setting font-size but no min-height on a button, so its hit area collapses on short labels.
• Tiny close (×) icons in dialogs and toasts, 16 px or less, with no padding.
• Stacking small icon buttons (share, like, bookmark) directly next to each other with no spacing.
• Wrapping a small icon in a link without giving the <a> a block-level layout — the link only hits the glyph.
• Removing padding "to make the design tighter" and shipping a button you can only tap with a stylus.

Verification

• Inspect the element in DevTools. Read the computed width and height (or the bounding box). Both must be at least 24 CSS px; aim for 44.
• On a real phone, try tapping every primary control with a thumb, one-handed. If you miss, it is too small.
• Run axe DevTools or Lighthouse — both flag WCAG 2.5.8 failures.
• For dense UIs, draw a 24 px circle around each target's centre and check no two circles overlap.