Skip link
The first link of a page, shown while it has focus, that jumps past the navigation.
On this page
A skip link is the first link of a page. It jumps past the navigation to the content, so a reader who uses the keyboard does not tab through every link of the header on every page. It is in the document for everyone and on the screen only while it has focus: nobody who uses a pointer sees it.
Skip link
<a class="skip" href="#content">Skip to content</a><header class="navbar"> <a class="navbar-brand" href="#home">Atlas</a> <nav class="navbar-nav" aria-label="Main"> <a class="navbar-link" href="#projects" aria-current="page">Projects</a> <a class="navbar-link" href="#deployments">Deployments</a> <a class="navbar-link" href="#settings">Settings</a> </nav></header><main class="p-lg" id="content" tabindex="-1"> <h1 class="heading">Projects</h1> <p class="lead lead-sm">Fourteen projects in three teams.</p></main>#Markup
Two things make it work:
- The link is the first focusable element of the page, before the header, and its
hrefis the id of the main region. - The target has
tabindex="-1". A fragment link scrolls to its target in every browser, but focus moves there only if the target can take focus; without it the next Tab goes back to the header the reader just skipped.
Write what the link does in its text: "Skip to content". A page with a long sidebar may offer a second one, "Skip to navigation", after the first.
#How it shows
At rest the link is above the top edge of the viewport, transparent, and cannot be pressed, but it keeps its place in the tab order: an element that is display: none would be skipped itself. On focus it drops in 8px from the top corner as a small control of ink, over a sticky navbar and anything else on the page. --skip-layer is the z-index it stands at.
It stands in a corner of the viewport because that is its job, so it is one of the few components that place themselves. On a phone with a notch it keeps clear of the safe area.
#Accessibility
- Every page with navigation before its content needs one. WCAG 2.4.1, Bypass Blocks, asks for a way past content that repeats on every page, and a skip link is the usual way to meet it.
- The link is shown on
:focus, not only on:focus-visible, so it also appears for a reader who reaches it with a switch or a screen reader's own navigation. - With reduced motion it appears in place, without the drop.
- Name the target with a heading or
aria-labelwhen the page has more than one<main>-like region, so the place a reader lands in says what it is.
#Classes
| Class | Description |
|---|---|
skip | The link, on an anchor that points at an id: fixed 8px inside the top corner as a small control of ink, out of sight until it has focus. A long label wraps inside the viewport |
#Custom properties
| Property | Default | Description |
|---|---|---|
--skip-layer | 1000 | The z-index it stands at, over a sticky navbar |