axe-core aria-tooltip-name error: tooltip missing accessible name

axe-core aria-tooltip-name error: tooltip missing accessible name - how to fix it

TL;DR

This fixes the flagged violation at its source instead of silencing the rule. A tooltip has role tooltip but no accessible name, so the extra context it carries never reaches assistive tech. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.

The error, verbatim

axe-core aria-tooltip-name error: tooltip missing accessible name

Fix it step by step

Step 1

Put the tooltip text as the element's text content; the rule then passes with no extra attributes.

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

Step 2

If the tooltip is icon-triggered, use aria-label on the tooltip element with the same text users see.

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

Step 3

Link the trigger to the tooltip with aria-describedby so the description is announced on focus.

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

Step 4

Re-run axe to confirm.

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

• A title attribute alone is a weak fix; some screen readers skip it. Prefer real text content.
• 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 aria-tooltip-name, WCAG 4.1.2).

Variant phrasings

axe aria-tooltip-name: tooltip missing accessible name

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

Why it happens

A tooltip has role tooltip but no accessible name, so the extra context it carries never reaches assistive tech. 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/pst_n9lJoWyhn3nJbejUzi66Tw