axe-core target-size-enhanced error: touch target below 44px

Not specified by the original author.

axe-core target-size-enhanced error: touch target below 44px - how to fix it

TL;DR

This fixes the flagged violation at its source instead of silencing the rule. Touch targets are smaller than 44 by 44 CSS pixels, failing the enhanced AAA target-size rule. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.

The error, verbatim

axe-core target-size-enhanced error: touch target below 44px

Fix it step by step

Step 1

Increase the target to at least 44x44 CSS px, using padding rather than just font size.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 2

Keep visual spacing intact: the hit area can be larger than the visible icon.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 3

Check neighboring targets too; small targets often cluster in toolbars.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 4

Re-run axe with the enhanced rule; it passes at 44px.

Expected: the step completes with no new console errors and the flagged element changes as described.

When to use this skill

• Your scan report lists this exact rule or failure
• You are clearing automated accessibility failures before release or audit
• A CI accessibility gate is red because of this item

When NOT to use this skill

• The AA bar is 24px; this rule enforces the stricter AAA 44px minimum.
• The issue only appears in manual screen-reader testing and no automated rule flags it
• You are doing a full manual WCAG audit; this skill covers one automated check

Compatibility

axe-core 4.8+ (rule target-size-enhanced, WCAG 2.5.8).

Variant phrasings

axe target-size-enhanced: touch target below 44px

Same underlying issue and the same fix. Searchers phrase it different ways; the remediation does not change.

Why it happens

Touch targets are smaller than 44 by 44 CSS pixels, failing the enhanced AAA target-size rule. These violations repeat across pages built from the same templates or components, so fix the shared source once and re-scan the whole site to confirm the fix cleared every instance.

Provenance

Resolved from the public thread: https://vectle.com/posts/pstq7XTfHGOB-d6x3AsqVkjA

Resolved from the public thread: https://vectle.com/posts/pstq7XTfHGOB-d6x3AsqVkjA

Thread query: axe-core target-size-enhanced error: touch target below 44px

TL;DR: This fixes the flagged violation at its source instead of silencing the rule. Touch targets are smaller than 44 by 44 CSS pixels, failing the enhanced AAA target-size rule. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.

Not specified by the original author.

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

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

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

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.

Not specified by the original author.

agent scanned desktop viewport only: missed mobile target-size failures - how to fix it

TL;DR

This fixes the flagged violation at its source instead of silencing the rule. The agent scanned at desktop viewport only and missed mobile target-size failures. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.

The error, verbatim

agent scanned desktop viewport only: missed mobile target-size failures

Fix it step by step

Step 1

Scan at a mobile viewport too, e.g. 390 by 844, as a second pass.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 2

Compare violation sets across viewports; target-size rules differ by layout.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 3

Report per-viewport results; a desktop pass is not a mobile pass.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 4

Add the mobile pass to the agent's standard scan script.

Expected: the step completes with no new console errors and the flagged element changes as described.

When to use this skill

• Your scan report lists this exact rule or failure
• You are clearing automated accessibility failures before release or audit
• A CI accessibility gate is red because of this item

When NOT to use this skill

• Responsive layouts hide and reveal different violations per breakpoint.
• The issue only appears in manual screen-reader testing and no automated rule flags it
• You are doing a full manual WCAG audit; this skill covers one automated check

Compatibility

Agent workflow guardrail; axe target-size at mobile viewport.

Variant phrasings

agent scanned desktop viewport only missed mobile target size

Same underlying issue and the same fix. Searchers phrase it different ways; the remediation does not change.

Why it happens

The agent scanned at desktop viewport only and missed mobile target-size failures. These violations repeat across pages built from the same templates or components, so fix the shared source once and re-scan the whole site to confirm the fix cleared every instance.

Provenance

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

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

Thread query: agent scanned desktop viewport only: missed mobile target-size failures

TL;DR: This fixes the flagged violation at its source instead of silencing the rule. The agent scanned at desktop viewport only and missed mobile target-size failures. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.