axe-core target-size error touch target smaller than 24px failed

axe-core target-size error touch target smaller than 24px failed - how to fix it

TL;DR

WCAG 2.2 requires pointer targets to be at least 24 by 24 CSS pixels, or to have enough spacing that a 24px circle centered on the target does not overlap another target. Enlarge small icon buttons with padding (keeping the visible icon small), for example padding the button to 24px while the icon stays 16px. Inline text links are excepted; dense icon toolbars are the usual offender.

Target size is the WCAG 2.2 criterion most likely to surprise established teams, because their interfaces were designed before it existed. Dense data tables, rich text editor toolbars, and pagination controls are the typical offenders. Treat the first audit as a design-system task: fix the icon-button and pagination components once, and most instances disappear.

The verbatim error looks like this:

axe-core 4.8+ (experimental)
Rule: target-size (serious)
"All touch targets must be 24px large or have sufficient space"

Element: [button class="icon-btn"] (16px by 16px)
  Target is smaller than 24px and adjacent targets are closer than 24px.

Steps

1. Reproduce with experimental rules enabled:

npx @axe-core/cli https://example.com/app --rules target-size

Expected: undersized adjacent targets are listed. If nothing appears, confirm experimental rules are enabled in your axe config.

2. Measure the flagged targets in devtools. The rule checks the rendered size, so padding, min-width, and min-height all count toward the 24px.
3. Enlarge with padding so the visual design barely changes:

.icon-btn {
  min-width: 24px;
  min-height: 24px;
  padding: 4px;
}

Alternatively, add spacing so the 24px circles around adjacent targets do not overlap.

4. Re-run the focused scan. Expected output: 0 violations for target-size.
5. Test on a real touch device: the targets should be tappable without zooming, and mis-taps on neighbors should drop.
6. Fix at the component level. Icon buttons, close buttons, and pagination links are shared components; one padding change fixes every instance:

/* design-system button base */
.ds-icon-button {
  min-width: 24px;
  min-height: 24px;
}

7. Re-audit dense UIs specifically: data-table row actions, editor toolbars, calendar pickers, and carousel controls. These pack small targets together and fail on both size and spacing.

When to use

• Axe flags target-size on icon buttons, close buttons, or pagination controls.
• A mobile audit reports undersized touch targets under WCAG 2.2.
• Users report mis-tapping adjacent controls on touch devices.

When not to use

• The target is an inline text link inside a paragraph (excepted by the criterion).
• The control is a native checkbox, radio, or select that the browser sizes (focus on custom-styled replacements).
• The target is overlapped because of a layout bug (fix the layout; the size rule is secondary).

Why it happens

Small, crowded targets cause mis-taps for everyone and are a hard barrier for users with tremors or limited dexterity. WCAG 2.2 added this as AA (2.5.8 Target Size Minimum) because mobile usage made it unavoidable. Padding-based enlargement is the standard fix because it grows the hit area without changing the visual design.

WCAG 2.2 added target size because touch interfaces made small targets a mainstream barrier, not an edge case. Axe implemented it as an experimental rule, which means many teams have never seen it: their axe configs do not enable experimental rules. The violations have been there all along; the tooling just started reporting them.

Edge cases

• The rule is experimental in axe-core, so some CI pipelines skip it. Enable experimental rules explicitly or audit target sizes manually.
• Spacing alone can pass: two 16px buttons with 8px gaps between them satisfy the 'sufficient space' alternative.
• Targets inside a scrollable region that is itself the exception (inline) still count when they are controls, not text.
• Do not enlarge by scaling the visible icon alone; keep the design intact and grow the hit area with padding.
• Enable experimental rules in your axe config to see this rule at all. Without that flag, the audit silently skips it.
• The 24px minimum is CSS pixels, not device pixels. High-DPI screens do not change the requirement.
• Targets in a scrollable container that is itself small still count. Do not hide dense controls in scroll regions to dodge the rule.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_XGIyzL7oZNeJy8jtvNYQkA