Ensure Touch Targets Have Sufficient Size and Space

Casandra Visser

Author

Yotam Flohr

Researcher

Ritvik Shrivastava

Expert

July 29, 2024

Disabilities affected: Blind Low vision Mobility

Standards: WCAG 2.2 Level AA

Touch targets must be at least 24 by 24 CSS pixels in size. If the size of the target is insufficient, it needs to be possible to draw a virtual circle centered on the target with a diameter of 24 pixels that does not intersect any other targets, nor any of the circles on other undersized targets.

Why It Matters

Sufficient touch target spacing ensures it can “be easily activated without accidentally activating an adjacent target.” When touch targets are too small or too close together, it becomes difficult for users to activate them.

Fixing the Issue

Check the unobscured size of the touch target and the distance to other touch targets.

Good Code Example

Code example

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

Copy

Bad Code Example

Code example

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

Copy