Rule library Viewport and targets

All touch targets must be 24px large, or leave sufficient space

target-sizeWCAG 2.2 AA

Ensure touch targets have sufficient size and space

Who this affects

Interactive targets are smaller than the 24×24 CSS pixel minimum, which makes them hard to hit for users with motor impairments and on touch screens.

How to fix it

Increase the clickable area to at least 24×24 px, or add spacing around it.

Effort Medium · ~1-2 h

Before and after

Fails

a.icon { width: 18px; height: 18px; }

Passes

a.icon { width: 18px; height: 18px; }
/* keep the visual size, grow the hit area */
a.icon::before {
  content: ""; position: absolute;
  inset: -3px; min-width: 24px; min-height: 24px;
}

Where this sits in the standard

WCAG success criterionLevelEN 301 549 clause
2.5.8 Target Size (Minimum)AA

EN 301 549 clause 9 applies these criteria to web content. The published version referenced by the European Accessibility Act is V3.2.1, which incorporates WCAG 2.1 level A and AA. More on the standard.

How to check it by hand

Zoom the page to 200% and then 400%. Text must reflow and remain readable without horizontal scrolling. On a phone, check that you can pinch to zoom at all.

Automated testing settles roughly a third of the WCAG success criteria. This rule is one an automated tool detects reliably — but a clean automated result is not proof of conformance.

Reference

Deque's technical write-up for this rule: target-size

See whether your site trips this rule

Paste a URL. We open it in a real browser, dismiss the cookie wall and run the full EN 301 549 rule set. No account, no card.

Run a free scan All rules