Glossary / Touch target sizing
Touch target sizing
Touch target sizing concerns the size and spacing of interactive areas so users can activate them without excessive precision. People with tremors, limited dexterity, large fingers, low vision, or small touchscreens can accidentally activate adjacent controls. A large visual icon with a tiny hit area is still a small target. Design the whole interactive region to be generous, while respecting layout constraints and other input methods.
WCAG 2.2 and design guidance
- WCAG 2.2 SC 2.5.8 Target Size (Minimum), Level AA, requires pointer targets to be at least 24 × 24 CSS pixels, unless an exception applies.
- Exceptions include sufficient spacing (24px-diameter circles centered on undersized targets do not intersect), an equivalent compliant target, inline text links, user-agent-controlled sizing not modified by the author, and essential presentation.
- SC 2.5.5 Target Size (Enhanced), Level AAA, uses 44 × 44 CSS pixels with its own exceptions. It is a useful design target for frequently used or consequential actions.
- CSS pixels are not physical screen pixels; zoom, density, and input precision differ. Minimum conformance is not a user-experience ideal.
- Do not space targets only with transparent padding if hit testing still overlaps neighboring controls. Ensure focus indicators and visual affordances match the real hit area.
- Pointer events include mouse, touch, stylus, and alternative pointing devices; do not assume touch alone.
Implementation and test
Set minimum inline/block dimensions or padding on the actual button/link, and keep adequate separation between adjacent controls. For icon buttons, enlarge the button box, not merely the icon. Test dense toolbars, pagination, close icons, checkboxes, map markers, and mobile layouts. Verify target boundaries in browser tools, including responsive modes, and test with touch/zoom. Provide an alternate list/search interaction for spatial interfaces where small targets are essential.
Interview questions
- What is WCAG 2.2 AA’s minimum target size? 24 by 24 CSS pixels or meet an allowed exception, including sufficient spacing.
- What is the AAA enhanced size? 44 by 44 CSS pixels, with its criterion-specific exceptions.
- Does a 24px icon satisfy the requirement? Only if the pointer target itself is adequately sized or a spacing exception applies.
- Why aim larger than AA? Better accuracy and comfort for many users, especially on touch and for people with motor impairments.
- How do you handle a dense map? The essential exception may apply, but provide alternative controls or a list/search mode when practical.