Touch target size: the 24 and 44 pixel minimums

What a touch target is

A touch target is the region that reacts to a tap: a button, a link, a checkbox, anything with a click handler. WCAG sets two thresholds for it. Success criterion 2.5.8 Target Size (Minimum), Level AA, asks for 24 by 24 CSS pixels. Success criterion 2.5.5 Target Size (Enhanced), Level AAA, asks for 44 by 44.

Size comes from the element’s box. Padding enlarges the target without enlarging the text, while font size changes both, since an inline link’s box is derived from its content. The AA criterion also has a spacing exception: an undersized target passes when a 24 pixel circle centered on it does not intersect another target, nor the circle of another undersized target.

What squirrel checks

One check, touch-targets, at severity warning. It reads inline style attributes only, so it never needs a stylesheet or a rendered page.

• Warn when a <button>, <a>, <input type="submit">, <input type="button"> or [role="button"] has an inline style declaring a width or height below 44 pixels. The match is an unanchored search for an integer followed by px, rem or em, so min-width: 20px counts and width: 1.5rem is not measured at all. rem and em are converted at 16 pixels to the unit. Width and height are counted separately, so one element can add two to the tally. Report message: N element(s) with potentially small touch targets, with the value Ensure minimum 44x44px touch targets. The check emits no items, only the count.
• Info whenever the tally is zero, with the message Touch target sizes require CSS analysis and the value Verify buttons/links are at least 44x44px.

The rule uses 44 pixels, the enhanced threshold, as its cutoff. An info result means no undersized inline dimension was found, which is not the same as the page passing: a target sized by a stylesheet or a utility class is invisible to this check.

How to fix it

.icon-button {
  min-width: 44px;
  min-height: 44px;
  padding: 12px;
}

Set the minimum on the interactive element itself, and grow it with padding rather than font size so the label stays the size you designed.

The common false positive is an element with a small inline width that sits inside generous padding, where the real hit area is fine. squirrel only sees the declared width, so check the rendered box before changing anything.

Enable / disable

Disable this rule

[rules]
disable = ["a11y/touch-targets"]

Disable all Accessibility rules

[rules]
disable = ["a11y/*"]

Enable only this rule

[rules]
enable = ["a11y/touch-targets"]

enable replaces the default ["*"], so this is the only rule selected. Leave disable out: a rule that matches any disable pattern is skipped even when enable names it. Only an enabled setting under a rule’s own [rule_options] table overrides both lists.

Related rules

• mobile/tap-targets: the same defect from the mobile usability side.
• a11y/link-in-text-block: inline links that are hard to see rather than hard to hit.
• a11y/zoom-disabled: a viewport that stops users enlarging a target they cannot hit.
• mobile/font-size: text too small to read on the same screens.

Accessibility findings ship in every audit next to the SEO, performance and agent experience rules. See Website security scan with AI for how an agent works through a report.

References

• Understanding SC 2.5.8 Target Size (Minimum), W3C
• Understanding SC 2.5.5 Target Size (Enhanced), W3C

Check your site

Run squirrel audit https://example.com and open the Accessibility section of the report. The finding is a per-page count of undersized inline dimensions, not a list of elements. Signed-out local audits need no account and cost nothing. Signed-in audits spend credits.