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

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