Broken Skip Link

A broken skip link is a skip navigation link that exists in the DOM but does
not correctly move keyboard focus to the main content area when activated.
This is distinct from a missing skip link — the link is present and satisfies
automated accessibility checks, but fails in practice for keyboard users.
^[1]

---

Why skip links break

Skip links fail for several common reasons:

The target element is not focusable. Clicking an anchor link scrolls the
page to the target element, but for keyboard users focus must also move there.
If the target element — typically main — does not naturally receive focus and
does not have tabindex="-1", keyboard focus stays on the skip link while the
page scrolls. The next Tab press lands on the first link in the navigation,
not in the main content.
^[2]

The target id does not exist. The skip link href references an id that
does not exist in the DOM, or the id has been changed by a CMS or framework
rendering the link inoperable.

The skip link is display: none. The link has been hidden using display:
none or visibility: hidden, removing it from the accessibility tree entirely.
Sighted keyboard users cannot see it and screen reader users cannot reach it.

The skip link is not the first focusable element. Another element receives
Tab focus before the skip link, requiring the user to Tab past it to reach
the skip link — defeating the purpose.

---

How to detect it

Automated scanners detect the presence of a skip link but cannot verify it
works. To test manually:
^[3]

1. Load the page and immediately press Tab — the skip link should be the
   first element to receive focus and become visible
2. Press Enter to activate it
3. Press Tab again — focus should land inside the main content area, not
   back at the top of the navigation

---

How to fix it

The complete correct implementation:

Step 1: Place the skip link as the first element inside body

Step 2: Point it at the main content id

• a href="#main-content" class="skip-link" — Skip to main content — /a

Step 3: Add tabindex="-1" to the target element

• main id="main-content" tabindex="-1"

Step 4: Use off-screen CSS to hide it visually until focused

• .skip-link — position: absolute; left: -9999px
• .skip-link:focus — position: static (or bring back into viewport)

Never use display: none or visibility: hidden on a skip link.
^[1]

---

References

1. W3C Web Accessibility Initiative. Understanding Success Criterion 2.4.1: Bypass Blocks. https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html ↑
2. WebAIM. Skip Navigation Links. https://webaim.org/techniques/skipnav/ ↑
3. Accessible.org. Automated Scans and WCAG Criteria. https://accessible.org/automated-scans-wcag/ ↑