Skip link
The first link on the page, hidden above the viewport until it receives keyboard focus.
Examples
Skip link
Click into the preview and press Tab: the link slides in from the top.Anatomy
a.skip-link[href="#main"] | The first focusable element in <body>. Fixed to the top-start corner, translated out of view until :focus-visible. |
main#main | The target. Any element with the matching id works; <main> is the usual one. |
Accessibility
- Put it first in
<body>, before the navbar and sidebar, so it is the first tab stop. - It stays in the accessibility tree while hidden: screen readers list it like any link.
- If the target is not focusable by default and focus seems to stay put in some browsers, add
tabindex="-1"to it.
| Key | Effect |
|---|---|
| Tab | From the top of the page, the first press focuses the skip link and slides it into view. |
| Enter | Follows it: focus moves to the target, past the navigation. |