Touch Target Sizing

The Level AA requirement

WCAG 2.5.8 requires a target to be at least 24 by 24 CSS pixels or to satisfy the spacing alternative: a 24 CSS-pixel-diameter circle centred on the undersized target must not intersect another target or another such circle. “Target plus surrounding space reaches 24 pixels” is not the normative geometry test.

The criterion includes equivalent, inline, user-agent-control, and essential exceptions. A native checkbox or radio whose size has not been modified by the author can use the user-agent-control exception. The Level AAA 2.5.5 criterion uses 44 by 44 CSS pixels. Choosing 44 by 44 for authored controls is also a useful usability target, but it must be labelled as AAA or best practice rather than the AA minimum.

<div style="display:flex; gap:2px">
  <button style="width:16px; height:16px" aria-label="Close item 1">×</button>
  <button style="width:16px; height:16px" aria-label="Close item 2">×</button>
</div>

<!-- 44px is the enhanced target and a comfortable usability choice. -->
<div style="display:flex; gap:8px; flex-wrap:wrap">
  <button style="min-width:44px; min-height:44px" aria-label="Close item 1">×</button>
  <button style="min-width:44px; min-height:44px" aria-label="Close item 2">×</button>
</div>

Accessible names can be identical while target geometry differs. Measure the interactive bounding box in CSS pixels and inspect every adjacent target; screen-reader output does not validate pointer target size.

Exceptions

• Equivalent: another control on the same page performs the same action and meets the size requirement.
• Inline: the target is in a sentence or its size is otherwise constrained by surrounding non-target text.
• User-agent control: the browser determines the size and the author has not modified it.
• Essential: the exact presentation is essential or legally required for the information.

Resources

• Understanding 2.5.8 Target Size (Minimum) 
• Understanding 2.5.5 Target Size (Enhanced) 
• Pointer, Touch, Speech, and Motion