Skip link

A link, as the first focusable element in the document, whose target is the main content: `<a href="#main">Skip to main content</a>`.

A corresponding `id` on the main content container, normally the `<main>` element.

Hidden until focused, using absolute positioning off-screen rather than `display: none` — which would remove it from the tab order entirely and defeat the purpose.

Visible when focused, with the same visibility requirements as any other focus indicator.

Text that says where it goes. "Skip to main content" is understood immediately; "Skip" alone raises the question of skipping to where.

A link that receives focus without any visible change leaves a sighted keyboard user with no idea where they are, and the first press of Enter takes them somewhere unexplained.

Sighted keyboard users are a substantial part of the audience for this feature — people with motor impairments, people using switch access, and people who simply prefer the keyboard.

WCAG's focus visible criterion applies to the skip link exactly as to anything else.

The common implementation moves it into view with a transition when it receives focus, which is both visible and unobtrusive.

A target with no `id`, or an `id` that changed when the template was refactored. The link then does nothing observable.

A target that is not focusable: browsers differ in whether focus follows the fragment to a non-focusable element. Adding `tabindex="-1"` to the target makes the behaviour consistent.

A client-side router intercepting the fragment navigation and handling it as a route change, which loses the focus move entirely.

Anything focusable before it in the document — a hidden search field, a cookie banner, a third-party widget — which means the skip link is no longer the first thing reached.

Load the page and press Tab once. The skip link should appear, visibly, as the first focused element.

Press Enter. Focus should move into the main content, and the next Tab should reach the first control there rather than returning to the navigation.

Test on pages other than the home page, since templates frequently differ.

Check that the target `id` exists in the rendered DOM, which is where a client-side rendered page can differ from its source.

On a long page with several repeated blocks — a filter sidebar, a large table of contents — a second skip link past that block is worth adding, since the criterion is about repeated blocks generally rather than about navigation specifically.