Accessibility Required Updated 2026-05-29

Touch target size

Interactive controls must be large enough to tap or click reliably. WCAG 2.2 sets a 24×24 CSS px minimum, with 44×44 CSS px as the enhanced target.

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.

Sources & further reading

WCAG 2.5.8 — Target Size (Minimum) Level AA — W3C
WCAG 2.5.5 — Target Size (Enhanced) Level AAA — W3C
Human Interface Guidelines — Layout — Apple
Material Design — Accessibility: Layout and typography — Google
WP Accessibility — WP Accessibility