axe-core focus-visible error: focus indicator missing on keyboard focus

axe-core focus-visible error: focus indicator missing on keyboard focus - how to fix it

TL;DR

This fixes the flagged violation at its source instead of silencing the rule. Keyboard focus has no visible indicator, so keyboard-only users cannot tell where they are. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.

The error, verbatim

axe-core focus-visible error: focus indicator missing on keyboard focus

Fix it step by step

Step 1

Restore a visible focus indicator: keep the default outline or style :focus-visible with a high-contrast ring.

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

Step 2

Never apply outline none globally; scope any reset to mouse-only states if you must.

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

Step 3

Tab through the page and confirm every interactive element shows the indicator.

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

Step 4

Re-run axe to confirm the rule passes.

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 focus style that only appears on mouse hover does not count; this is about keyboard focus.
• 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 focus-visible, WCAG 2.4.13).

Variant phrasings

axe focus-visible: no visible focus indicator on keyboard focus

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

Why it happens

Keyboard focus has no visible indicator, so keyboard-only users cannot tell where they are. 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__cnvUewVP-ONXhi7T-o6kA