Touch Target Size (WCAG 2.5.5)
WCAG 2.5.5 requires touch targets to be at least 44×44px. Small targets cause mis-taps, especially for users with motor impairments.
What is it?
WCAG Success Criterion 2.5.5 (Target Size — Enhanced) requires touch and pointer targets to be at least 44×44 CSS pixels, with exceptions for inline text links and targets with sufficient spacing. In WCAG 2.2, SC 2.5.8 (AA) requires a minimum of 24×24px with adequate spacing. The Apple Human Interface Guidelines specify 44×44pt and Android Material Design specifies 48×48dp as their respective minimums.
Why it matters
Motor impairments — whether permanent (Parkinson's disease, cerebral palsy), temporary (broken wrist), or situational (holding a phone one-handed on a moving train) — reduce pointing precision. Small touch targets cause mis-taps, accidental activations of adjacent elements, and repeated failed attempts that frustrate and exclude users. This is also why Fitts's Law is directly applicable here: target acquisition time and error rate are directly related to target size.
Best Practices
- Size all primary interactive elements to at least 44×44px. For high-frequency actions, go larger.
- When a visual element must be smaller (e.g., a 16px icon), extend the touch/click area using padding, after/before pseudo-elements, or a wrapping element — without changing the visual size.
- Ensure adequate spacing between adjacent targets. Targets at the 24×24px minimum need at least 24px of spacing on all sides (WCAG 2.5.8).
- Place the most frequently used actions in the thumb-zone on mobile — the lower third of the screen. Users can reach this area without repositioning their grip.
- For destructive actions, intentionally size them smaller and space them away from primary actions. This adds protective friction.
- Test touch target size by overlaying a 44×44px grid or using browser DevTools to inspect computed dimensions including padding.
- Icon-only buttons are especially prone to small targets. Always check the bounding box of the tappable area, not just the icon glyph.
- Navigation items in mobile bottom bars should fill their allocated space — the entire section between dividers should be tappable, not just the icon.
Common Mistakes
- Icon buttons with 16–20px icons and no padding around them — the tappable area is only as large as the icon.
- Checkbox and radio button inputs that are only as large as the visual indicator — the label text should also be tappable.
- Navigation links sized to fit text only — especially dangerous in mobile nav bars where items are close together.
- Close (×) buttons in modals that are small and positioned in a corner — frequently mis-tapped on mobile.
- Stacked list items with insufficient height — each item needs enough padding to reach the target minimum.
- Form submit buttons sized to fit their label only — the tappable area should be generously padded.
Checklist
Research & Theory
WCAG 2.1 SC 2.5.5 — Target Size (Enhanced, AAA)
44×44 CSS pixels minimum for all pointer targets, with exceptions for inline text links and equivalent alternative targets.
Why it's relevant
AAA level means it is aspirational but not legally required. However, Apple and Google's HIG and Material guidelines both mandate similar sizes, making it a practical standard.
WCAG 2.2 SC 2.5.8 — Target Size (Minimum, AA)
24×24 CSS pixels minimum with adequate spacing, or the target must be in a block-level context. Added in WCAG 2.2.
Why it's relevant
The new legally-required minimum in WCAG 2.2. Represents a floor, not a target — aim for 44×44px in practice.
Fitts's Law (1954)
Time to acquire a target = f(distance, size). Larger targets are acquired faster with fewer errors.
Why it's relevant
The scientific foundation for touch target size requirements. Not just about accessibility — it directly affects task efficiency for all users.
Real-World Examples
iOS Settings
Every list row is 44pt tall minimum. Switches, checkboxes, and disclosure indicators all have extended tap areas. Apple enforces this through App Store review.
Bottom navigation icons have generous padding extending the tap area across the full width of each tab section. Highly reliable despite close item proximity.
Twitter / X
Action buttons (Like, Retweet, Reply) below each tweet have extended hit areas that go well beyond the small icon glyphs — verified via DevTools inspection.