Navigation

Accessible Skip Link

A visually-hidden link at the very top of the page that lets keyboard users jump past repeated blocks, like navigation, straight to the main content.

Last verified against WCAG 2.2 and WAI-ARIA APG 1.2 on 2026-07-02.

Implementation

A skip link is just a native anchor whose href points at the id of the main content region, there's no ARIA and no JavaScript widget, so the native and custom approaches are identical. The only two details that matter: hide it until it's focused (using an off-screen technique, never display:none), and give the target tabindex="-1" so activating the link moves focus there rather than only scrolling. This very site's header implements one you can try right now, press Tab once on any page.

Main content

Press Tab from the very top of this demo: the “Skip to main content” link appears first. Activating it moves focus straight here, bypassing the five demo navigation links above.

<!-- The FIRST focusable element in the document, before header/nav. -->
<a href="#main" class="skip-link">Skip to main content</a>

<header> <!-- logo + site navigation --> </header>

<!-- tabindex="-1" lets activating the link move keyboard FOCUS to
     <main> (not just scroll it into view). The next Tab then continues
     from here, past the repeated navigation. No ARIA needed, it's a
     plain anchor. -->
<main id="main" tabindex="-1">
  ...
</main>

Required roles, states & properties

Required roles, states, and properties
Element	Attribute	Why
Skip link	<a href="#main">	A plain anchor pointing at the main region's id. No ARIA is needed, the First Rule of ARIA applies; a native link already exposes the right role and keyboard behavior.
Target region	<main id="main"> + tabindex="-1"	The id is the link's destination; tabindex=-1 makes the region programmatically focusable so activating the link moves focus there. Without it, some browsers only scroll and leave focus stranded in the nav.
Skip link	sr-only until :focus (CSS, not ARIA)	The link is hidden off-screen so it doesn't affect the visual layout, and revealed on :focus so keyboard users see it. It must never use display:none or visibility:hidden, which would also remove it from the focus order.

Keyboard interaction model

Keyboard interaction model
Key	Behavior
`Tab (first press on the page)`	Focuses the skip link, which becomes visible as the very first stop, before the logo, header, and navigation.
`Enter`	Follows the link, moving focus to the main content region and bypassing all repeated navigation.
`Tab (again, after skipping)`	Continues from inside the main content, it does not jump back to the top of the navigation.

Focus management rules

The skip link is the first focusable element in the DOM, before the logo, header, and navigation.
Its target carries tabindex="-1" so activating it moves focus (not just scroll) into the main region; the next Tab continues from there.
It is visually hidden until focused, then shown with a clear, high-contrast focus style so sighted keyboard users can see it.

WCAG 2.2 success criteria mapping

WCAG 2.2 success criteria that apply to this component
SC	Name	Level	Why it applies
2.4.1	Bypass Blocks	A	A mechanism (such as a skip link or landmarks) is available to bypass blocks of content repeated on multiple pages.
2.1.1	Keyboard	A	All functionality is operable through a keyboard interface with no specific timing.
2.4.3	Focus Order	A	Focusable components receive focus in an order that preserves meaning and operability.
2.4.7	Focus Visible	AA	Any keyboard-operable UI has a visible focus indicator.

Find what you need, instantly