Touch targets too small

WCAG 2.2, 2.5.8 Target Size (Minimum), Level AA: a target must be at least 24 by 24 CSS pixels, unless one of the exceptions applies.

The spacing exception is the important one: a smaller target passes if a 24-pixel circle centred on it does not intersect the circle of any adjacent target. Distance can substitute for size.

Inline targets are excepted — a link inside a sentence is constrained by the line height and is not expected to be enlarged.

There is also an exception where the target is a duplicate of another control on the same page that does meet the size, and one where the presentation is essential or legally required.

WCAG 2.1's 2.5.5 Target Size at Level AAA sets a larger 44 by 44 pixel minimum. The AA criterion is the one most organisations are held to.

Icon-only controls: a close cross, a social icon, a quantity stepper. The glyph is 16 pixels and the clickable area is the glyph.

Dense navigation. A footer with four columns of links at a tight line height puts a dozen targets within a thumb's width of each other.

Pagination controls, where page numbers are rendered as small text with no padding.

Checkboxes and radio buttons styled to be visually small, where the label is not associated so tapping the text does nothing.

Adjacent actions with different consequences — 'Save' beside 'Delete', 'Apply' beside 'Cancel' — which is where a missed tap is expensive rather than merely annoying.

The target is the element's rendered box, so the usual fix is padding rather than a larger glyph or larger text.

An icon button with a 16-pixel icon and 8 pixels of padding on each side is a 32-pixel target that looks unchanged.

For text links in a list, vertical padding on the anchor — rather than margin on the list item — enlarges the target. Margin adds space between targets without enlarging either, which satisfies the spacing exception but not the size one.

Associating a `<label>` with its checkbox makes the label text part of the target, which is usually the largest available increase for no visual change at all.

Where a control must stay visually tiny, a pseudo-element can extend the hit area beyond the visible box without altering the layout.

In the console at a mobile viewport: `[...document.querySelectorAll('a,button,input,select,[role=button]')].filter(el => { const r = el.getBoundingClientRect(); return r.width < 24 || r.height < 24; })`. That gives the targets below the AA minimum, before exceptions.

Then check the spacing exception for what it returns: two small targets far apart may pass, two small targets adjacent do not.

Test with a thumb on a real device rather than a cursor in an emulator. A mouse pointer is a single pixel and a thumb is roughly a centimetre, which is why emulator testing does not surface this.

Pay specific attention to pairs of adjacent controls with different outcomes. Those are the ones where a miss matters.

Add padding to the interactive element, not margin to its container. Padding enlarges the target; margin only separates it.

Set a minimum on interactive elements in the base stylesheet — `min-height` and `min-width` — so new components inherit the floor rather than each being fixed separately.

Associate every label with its control, which converts the label text into target area for free.

Space adjacent destructive and non-destructive actions further apart than the minimum, because the criterion is a floor and the cost of a miss is not uniform.

Leave inline links alone. The exception exists because enlarging a link inside a paragraph damages the paragraph, and the specification says so.

`mobile.touch_targets` measures the rendered size of the interactive elements on each crawled page at a mobile viewport and reports the ones below the minimum, with their dimensions.

`mobile.navigation` and `mobile.menu` cover the places where small targets cluster, which is where the finding is usually concentrated.

`mobile.forms` reports the form controls specifically, since a small control in a form costs a completion rather than a navigation.

The measurement is of size and position. Whether a given target qualifies for the inline or spacing exception is a judgement the report presents evidence for rather than making.