Target spacing

Success criterion 2.5.8, Target Size (Minimum), arrived with WCAG 2.2 and asks for 24 by 24 CSS pixels, which is the part everybody quotes. The part that decides most real toolbars is the spacing exception underneath it. An undersized target still passes if a 24 pixel diameter circle centred on it does not intersect another target, or the circle of another undersized target. So the criterion is not really a size rule at all: it is a rule that a control must own 24 pixels, either by being that big or by having that much clearance around it, and a row of 20 pixel icons set 8 pixels apart passes while the same icons packed edge to edge do not.

Drawing the circles is the fastest audit there is, and the number is about the pointer rather than the finger. Twenty four pixels is roughly what an imprecise mouse, a trackpad with a tremor, or a head pointer needs in order to land where it aimed; the finger number is 44 pixels, and it lives one level up in 2.5.5, Target Size (Enhanced), at AAA. The other exceptions are worth knowing because they are narrower than they sound. Inline covers a link inside a sentence, where line height decides the box and shrinking the text would be worse. Equivalent covers a small control that has a full sized twin somewhere else on the same page. Essential covers cases where the exact position is the point, such as a pin dropped on a map. User agent default covers anything you have not styled.

The most useful thing to know is that the criterion measures the target, which is the area that responds to the pointer, not the area that has paint on it. That makes hit slop a legitimate way to pass without redrawing a single icon: padding pushed out beyond the artwork enlarges the target itself, and 20 pixels of glyph inside a 24 pixel button is a pass. The catch is that grown areas which overlap trade taps between neighbours, so slop is only spacing spent in advance, and the same clearance has to exist either way. Where two grown areas would meet, the honest fix is a dead zone between them or a gutter big enough that no zone is needed.

Treat the number as a floor and not as a goal. Fitts’s law says acquisition time falls with size and rises with distance, and a control at exactly 24 pixels is still slow and still missed, particularly out at the reach limits of the thumb zone. It also travels with the rest of the pointer criteria: a control that is hard to hit is worse when it demands a sustained drag, which is what a dragging alternative and a generous drag threshold exist to soften. For the general question of how big a control ought to be, rather than how small it is allowed to be, see touch target size.