axe-core skip-link error skip link target not focusable failed

axe-core skip-link error skip link target not focusable failed - how to fix it

TL;DR

A skip link that points at a non-focusable target fails silently: keyboard users activate it and focus stays on the link. Give the target tabindex="-1" so it can receive programmatic focus, for example [main id="main" tabindex="-1"]. Keep the skip link visually hidden until focused, and test it with a keyboard from the top of the page.

The skip link is the cheapest accessibility feature on a page and the most embarrassing to get wrong. It is also the feature most likely to be broken by third-party scripts: consent banners, chat widgets, and A/B testing tools inject focusable elements before it. Re-verify skip link behavior after every third-party addition, not just at launch.

The verbatim error looks like this:

axe-core 4.x
Rule: skip-link (moderate)
"Ensure all skip links have a focusable target"

Element: [a href="#main" class="skip-link"]Skip to main content[/a]
  Target [main id="main"] is not focusable; activating the link moves nothing.

Steps

1. Reproduce with the single rule:

npx @axe-core/cli https://example.com/ --rules skip-link

Expected: the skip link is listed because its target cannot receive focus.

2. Check the target element. [main], [div id="main"], and most landmarks are not focusable by default, which is the usual cause.
3. Make the target focusable:

[a href="#main" class="skip-link"]Skip to main content[/a]
[main id="main" tabindex="-1"]...[/main]

tabindex="-1" allows programmatic focus without adding the target to the tab order.

4. Re-run the focused scan. Expected output: 0 violations for skip-link.
5. Keyboard-test from a fresh page load: press Tab once, confirm the skip link becomes visible, activate it, and confirm focus lands at the start of the main content.
6. Audit what comes before the skip link in the final rendered DOM. View source is not enough; scripts inject content. Use devtools to inspect the first tabbable elements on a fresh load with all third-party scripts running.
7. Style the skip link to be visually hidden but not display:none, and reveal it on focus:

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
}

A skip link nobody can see when focused helps nobody.

When to use

• Axe flags skip-link on a skip navigation link.
• A page has a skip link but keyboard users report it does nothing.
• An audit lists a non-focusable skip target as a moderate violation.

When not to use

• The page has no skip link at all (add one as the first focusable element).
• The skip link points at the wrong landmark (fix the href target).
• The target is inside a modal or hidden region (restructure; the main content must exist on page load).

Why it happens

Skip links exist so keyboard users can bypass repeated navigation. When the target is not focusable, the browser may scroll visually but focus stays behind, so the next Tab press sends the user right back into the nav they tried to skip. tabindex="-1" is the standard fix because it enables focus without polluting the tab order.

Skip links date to the earliest web accessibility guidance, and every accessibility checklist mentions them, which is why pages have them and why they are often broken: they were added to satisfy a checklist, then never tested. The tabindex="-1" requirement is the detail that checklist-driven implementations miss, because the link appears to work visually (the page scrolls) while focus stays behind.

Edge cases

• Single-page apps that replace [main] on route change must re-apply tabindex="-1" to the new target or move focus to the new view's heading instead.
• The skip link itself must be the first tabbable element. Consent banners or chat widgets injected before it break the pattern.
• Do not hide the skip link with display:none; use the visually-hidden-until-focused pattern so it appears on keyboard focus.
• If the main landmark has an accessible name via aria-label, keep it; the skip target fix is independent.
• Multiple skip links (to main content, to navigation, to search) are fine; each target needs tabindex="-1".
• In SPAs, route changes should move focus to the new view's heading or main landmark. A skip link alone does not handle route-change focus.
• Do not point the skip link at an element inside a collapsed accordion or tab. The target must be visible and focusable on load.

Provenance

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