Touch targets

What it checks#

WCAG 2.5.8 asks that anything a pointer presses is at least 24 by 24 CSS pixels, so people with a tremor or a large finger can hit it. Nitpique checks every link, button, form control and ARIA widget on the page against that minimum. A checkbox or radio counts together with its label. Disabled and hidden controls are skipped.

Use it#

1. Turn Nitpique on, open the side panel, choose Page, then Accessibility.
2. Touch targets says how many are too small, and shows the smaller ones as tiles, each drawn at its size inside the dashed 24 pixel minimum, too small first and the smallest area worst.
3. Hover a tile to outline the control on the page. Click it to select it, and its box model fills the Element tab.
4. Make it bigger, or give it room, and press Refresh to check again.

The Report menu under it copies or downloads the too-small targets as Markdown, each with its size and the CSS that brings it to the minimum, then the small ones the standard allows.

What the standard lets through#

Two kinds of small target are allowed, and the card counts them apart.

• Spaced out: a 24 pixel circle centred on the target reaches no other target, and no other small target's circle. Two small targets that merely touch are fine.
• Inline in text: a link in the middle of a sentence is exempt.

A target that fails has something else pressable too close to it, so the fix is a bigger target or more room.