Visual cues
Touch targets need to be big enough
- Rule:
target-size - Severity: Serious
- WCAG level AA
Why it matters
A control smaller than 24 by 24 CSS pixels is hard to hit for anyone with a tremor, limited dexterity, or just a thumb on a moving train. Missed taps often trigger the control next to it.
How to fix it
- Make interactive targets at least 24 by 24 CSS pixels.
- Where the visible icon must stay small, add padding so the hit area grows without the design changing.
- Alternatively leave enough space around the target that the 24px circles do not overlap.
In markup
.icon-button { width: 18px; height: 18px; }.icon-button { width: 24px; height: 24px; } /* or add spacing around it */What the check cannot tell you
The rule allows exceptions the engine cannot always judge — an inline link in a sentence, or a target whose spacing is sufficient. Check the reported elements before treating them as failures.
The requirement behind it
This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:
- 2.5.8 Target Size (Minimum) (opens in new tab) — WCAG level AA
Further reading
Deque University on target-size (opens in new tab)
Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.
Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.