All Touch Targets Must Be 24px Large, or Leave Sufficient Space

Web accessibility guidelines state that touch targets such as link, buttons, and icons must have sufficient size and spacing in order to “be easily activated without accidentally activating an adjacent target.”

Why It Matters

When touch targets are too small or too close together, it becomes difficult for users with mobility issues to activate them.

People who use a mobile device where the touch screen is the primary mode of interaction as well as people with hand tremors and those who have difficulty with fine motor movements won’t be able to engage with touch targets if they are placed too closely together or if they’re too small.

Fixing the Issue

Touch targets must be at least 24 by 24 CSS pixels in size. Size is determined by the largest unobscured area of the touch target. If the size of the target is insufficient, then it must 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.

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