Touch Target Size: Bigger is Better, Spacing is Key

WHY IT EXISTS Users with motor impairments like hand tremors, or anyone using a less precise input like a finger on a phone, struggle to accurately hit small, tightly packed controls. This leads to errors, frustration, and inaccessible interfaces. The goal is to make activating any control easy and reliable for everyone.

THE MENTAL MODEL Every interactive element has a minimum 'activation zone' of 24x24 CSS pixels. You can satisfy this in two ways: either make the button itself that large, or use a smaller button surrounded by enough empty space. Think of a 24-pixel diameter 'no-fly zone' centered on each target; these zones must not overlap.

HOW IT WORKS The W3C's WCAG 2.2 guideline (Success Criterion 2.5.8) states that the size of a target for pointer inputs must be at least 24 by 24 CSS pixels. The key exception is spacing. If a target is smaller, you can draw a 24-pixel diameter circle centered on its bounding box. If that circle doesn't intersect with another target or another undersized target's circle, it passes. This allows for designs with smaller visual elements as long as they are not crowded.

WHEN TO USE IT Apply this rule to all interactive elements: buttons, standalone icons, form controls, and any clickable component. It is a fundamental accessibility requirement (Level AA) for any modern UI, especially on mobile and touch-based devices where pointer accuracy is lower. It is most critical for primary actions on a screen.

WHEN NOT TO USE IT The rule has specific exceptions. First, for links within a sentence or block of text, where size is constrained by the line-height. Second, for controls whose size is determined by the browser (user agent) and not modified by you, like the default days in a date picker. Third, when an equivalent, larger control for the same function exists on the page. Finally, when a specific small presentation is essential for conveying information, like individual data points on a dense map.

ONE CANONICAL EXAMPLE Imagine a mobile app's bottom navigation bar with five small icons, each 20x20 pixels. To comply, you can't just place them side-by-side. You must ensure there's enough space between them so that a 24-pixel circle centered on one icon's bounding box doesn't touch the 24-pixel circle of its neighbor. The safer, and often better, solution is to simply make the clickable area of each icon at least 24x24 pixels, even if the visual glyph inside is smaller.