A skip link is an in-page anchor, usually the very first focusable element, that lets keyboard and screen-reader users jump straight to the main content and bypass repeated navigation. It satisfies WCAG 2.4.1 Bypass Blocks.

Why does my skip link fail 'keyboard-reachable'?

Most commonly because it is styled display:none or visibility:hidden to hide it visually, which also removes it from the tab order. Use a visually-hidden (off-screen clip) pattern that becomes visible on :focus instead.

Where should the skip link go in the markup?

It should be one of the first focusable elements in the DOM, before the header and navigation, so a keyboard user reaches it on the very first Tab press. The validator checks its position in the focus order.

Does the target need to be a specific element?

The href must point at an element id that exists, ideally your main content landmark — a , role="main", or the page's first heading. The validator confirms the target exists and notes whether it is a sensible landmark.

No. Parsing uses your browser's native HTML parser. Nothing is sent to a server, so you can validate internal or staging markup safely.

Skip-Link Validator — Gera Tools

The skip-to-content link is the smallest piece of accessibility code with the biggest daily impact for keyboard and screen-reader users — and it is also one of the most commonly failed WCAG criteria (2.4.1 Bypass Blocks). Teams either omit it, point it at an id that no longer exists, or hide it so thoroughly with display:none that keyboard users can never reach it. Paste your HTML and this validator checks the whole chain.

How it works

The validator parses your pasted markup with the browser’s native HTML parser and runs a series of checks that mirror what a real keyboard user experiences:

Present — it finds the most likely skip link: an in-page anchor (<a href="#...">) whose text mentions “skip” / “main content” or whose target id looks like main content.
Target exists — it confirms an element with that id actually exists in the document, so the link goes somewhere.
Has text — the link must have discernible text for both sighted and screen-reader users.
Keyboard-reachable — it checks the link is not removed from the tab order via display:none, visibility:hidden, hidden, aria-hidden, or a negative tabindex.
First in tab order — it confirms the link is one of the first one or two focusable elements, so the user hits it immediately.

Any element that is display:none is invisible to keyboard users too, which is the trap behind most broken skip links.

The correct pattern

The accessible approach is a link that is visually hidden but still focusable, revealing itself on focus:

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

<a class="skip-link" href="#main">Skip to main content</a>
...
<main id="main"> ... </main>

Tips

Point the link at your <main> landmark, not a wrapper div, so the jump lands on meaningful content.
Never use display:none to hide a skip link — that also hides it from the keyboard. The off-screen position:absolute clip pattern keeps it focusable.
Test it for real: load the page, press Tab once, and confirm the link appears and works. Parsing here is all local to your browser.