SkipLink
A bypass link that jumps keyboard users straight to the main content, past the header and navigation. Hidden until focused, so it costs nothing visually and is the first thing Tab reaches. This site uses it — press Tab from the top of any page.
Click the box below, then press Tab. The link appears; press Enter to jump.
Navigation
Main content
Activating the link moves focus here, past the navigation above.
Import
import { SkipLink } from "@mikenotthepope/substrateui"Wiring the target
The link is only half of the pattern. Give the target element a matching id and tabIndex={-1} — without the negative tabindex, browsers scroll to the element but leave focus where it was, so the next Tab press returns to the navigation the user was trying to skip.
Add outline-none to the target as well. It receives focus programmatically rather than by keyboard, so a focus ring there is noise.
Placement
Render it as the first focusable element in the document, immediately inside <body> and before the header. Anything focusable above it has to be tabbed through first, which defeats the purpose.
Accessibility
This satisfies WCAG 2.4.1 Bypass Blocks (Level A), which requires a way past blocks of content repeated across pages — a header and a sidebar of 100+ links, in this site's case. It matters most for keyboard and switch-device users, for whom every repeated link is a keystroke on every page.
The link uses :focus rather than :focus-visible on purpose: it is only ever reached by keyboard, and Safari does not match :focus-visible on anchors it has moved focus to.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | "#main-content" | Fragment id of the element to jump to. |
children | ReactNode | "Skip to content" | The link label. Replace it to translate or reword. |
...a props | React.ComponentProps<'a'> | — | Forwarded to the anchor element. |