CodePark<body>
<a class="skip-link" href="#main">Skip to main content</a>
<header>… logo and 30 nav links …</header>
<main id="main" tabindex="-1">…</main>
</body>
.skip-link { position: absolute; top: 0; left: 0;
transform: translateY(-120%); }
.skip-link:focus { transform: translateY(0); }
A skip link is the first link on the page. It jumps keyboard users past the header and navigation, straight to the main content. Without it, a keyboard user presses Tab through 30 nav links on every page. WCAG 2.4.1 Bypass Blocks asks for a way to skip repeated blocks.
How to build it:
- Put an
<a href="#main">as the first focusable element in the<body>. - Give the main content a matching
id, usually on<main>. - Hide the link off screen, and show it when it gets focus. Don't use
display: none, because then it can't get focus at all. - Add
tabindex="-1"to the target. This makes sure focus really moves there in every browser, so the next Tab continues from the main content.
Landmarks like <main> and <nav> also help. Screen reader users can jump between them with a shortcut. But keyboard users without a screen reader still need the skip link.
In a single-page app, a hash link can clash with the router. You may need to handle the click and call focus() on the target yourself.
- A skip link lets keyboard users jump past repeated navigation to the main content.
- It must be the first focusable element on the page.
- It is hidden off screen and becomes visible when it gets focus.
- The target gets an
idandtabindex="-1"so focus really moves there. - Landmarks help screen reader users, but keyboard-only users still need the skip link.