Touch targets and pointer types: sizing controls for fingers and mice

What it is

A pointer target is the area that reacts to a click or tap. WCAG 2.2 success criterion 2.5.8 Target Size (Minimum), level AA, requires that target to be at least 24 by 24 CSS pixels, with listed exceptions: spacing (an undersized target is acceptable if a 24-pixel circle centred on it does not intersect another target or another such circle), equivalent (the same function is available through a target on the page that does meet the size), inline (targets inside sentences or constrained by the line height of surrounding text), user agent control (default-rendered controls not styled by the author) and essential. The older 2.5.5 Target Size (Enhanced), level AAA, asks for 44 by 44 CSS pixels with a similar exception list.

CSS can tell what is pointing. The pointer media feature reports the primary input's accuracy: none, coarse (limited accuracy, such as a finger on a touchscreen) or fine (an accurate device such as a mouse); any-pointer covers all available inputs. The companion hover feature reports whether the primary input can conveniently hover.

Why it matters

Fingers are wide and imprecise, tremor and low vision make small targets hard, and dense toolbars are where mis-taps happen. Hover-only affordances (menus that open on mouseover, tooltips holding required information) are unreachable on a touch screen.

How to apply

• Give interactive controls a minimum box of 24 by 24 CSS pixels through min-width/min-height or padding, and aim higher for primary actions; icon-only buttons are the usual offenders.
• Where targets sit in a row (pagination, toolbar icons), either enlarge them or space them so the 24-pixel circles do not overlap, using gap rather than margin on the last item.
• Under @media (pointer: coarse) increase padding on controls, checkboxes and list rows, and widen sliders' thumbs; under (pointer: fine) a denser layout is acceptable.
• Never rely on hover alone: anything shown on hover must also appear on focus and on tap, and @media (hover: none) can switch a hover menu to a click-to-open one.
• Make the whole row or card the target when it is the obvious tap area, without letting nested controls overlap it.

Pitfalls

CSS pixels are not device pixels; the 24-pixel minimum is independent of screen density. The inline exception covers targets inside a sentence or constrained by the line height of surrounding text, not icons in a toolbar or list. Enlarging the clickable area with transparent padding changes layout; a ::before pseudo-element with negative insets enlarges the hit area without moving neighbours. Devices with both touch and mouse report the primary pointer only; check any-pointer if either matters.