Why Touch Targets Must Be Large and Well Spaced

Touch targets that are too small or too close together are difficult to activate accurately. WCAG 2.5.8 ensures that users can reliably activate controls without accidentally triggering adjacent targets.

This requirement applies primarily to touch and coarse pointer input, but it benefits all users who struggle with precise motor control.

What Is a Touch Target

A touch target is the interactive area that responds to pointer input, such as:

• Buttons
• Links
• Icon buttons
• Form controls
• Any clickable or tappable region

The visual size of an element is not always the same as its interactive (hit) area. WCAG evaluates the unobscured interactive area, not how large the element appears visually.

WCAG Success Criterion

2.5.8 Target Size (Minimum) — Level AA

Touch targets must be at least 24 × 24 CSS pixels, or have sufficient spacing so that they can be activated without accidentally activating an adjacent target.

This requirement allows flexibility: Targets may be smaller only if adequate spacing is provided.

What This Criterion Requires

A touch target passes if either condition is true:

• The unobscured interactive area is at least 24 × 24 CSS pixels, or
• A virtual circle with a 24-pixel diameter, centred on the target, does not intersect:
  • Another target, or
  • The virtual circle of another undersized target

This means spacing can compensate for size, but overlapping or crowded targets fail.

Correct Markup Examples

Touch target meets minimum size

<button style="font-size: 24px">Submit</button>

The interactive area meets the minimum 24 × 24 CSS pixel requirement.

Touch target is small but sufficiently spaced

<button>+</button>
<button style="margin-left: 10px">Adjacent Target</button>

Although the first button is small, the spacing prevents accidental activation of the adjacent target.

Incorrect Markup Examples

Touch target is too small and too close to another target

<button id="target">+</button>
<button style="margin-left: -10px">Adjacent Target</button>

The target:

• Is smaller than 24 × 24 CSS pixels, and
• Does not have enough spacing to prevent overlap

This fails WCAG 2.5.8.

Why This Matters

Touch targets must be easy to activate without precision. When targets are too small or crowded, users may:

• Activate the wrong control
• Abandon the task due to repeated errors
• Be unable to use the interface at all

Adequate target size or spacing reduces accidental activation and improves reliability.

Who Benefits

This criterion benefits, among others:

• Users on mobile devices where touch is the primary input
• Users with motor impairments or hand tremors
• Users operating devices in unstable environments (e.g., public transport)
• Mouse users with limited fine motor control
• One-handed users
• Users with large fingers or who tap with knuckles or partial contact

Common Implementation Mistakes

• Increasing icon size but not the clickable area
• Relying on visual whitespace instead of actual spacing
• Allowing targets to overlap at certain screen sizes
• Assuming margin always counts (it doesn’t if hit areas overlap)
• Shrinking targets on mobile while keeping desktop sizes large

How to Test Target Size

1. Inspect the element’s clickable bounding box in browser dev tools
2. Confirm the unobscured hit area is at least 24 × 24 CSS pixels, or
3. Check that sufficient spacing exists between adjacent targets
4. Test using touch simulation or a coarse pointer
5. Verify targets do not overlap at any responsive breakpoint

If you cannot confidently tap one target without risking another, the criterion is not met.

Relationship to Other Target Size Criteria

• WCAG 2.5.5 Target Size (Enhanced) — Level AAA
  Requires 44 × 44 CSS pixels with fewer exceptions
• WCAG 2.5.8 Target Size (Minimum) — Level AA
  Allows smaller targets if spacing compensates

This criterion balances accessibility with design flexibility.

Rule Description

Touch targets must be at least 24 × 24 CSS pixels, or be sufficiently spaced so that a 24-pixel virtual activation area does not overlap adjacent targets.

Algorithm

• Check the unobscured size of the touch target
• If smaller than 24 × 24, check spacing
• Fail if activation areas intersect

Wrapping Up

WCAG 2.5.8 prevents interfaces from relying on precision tapping. Targets may be small only when spacing makes them safe to activate. If users must carefully aim to avoid mistakes, the design fails the criterion. Adequate size or spacing ensures predictable, reliable interaction, especially on touch devices.