Skip Link
跳过链接
Aliases:跳过导航跳到主内容跳过链接一键跳正文skip navskip navigation
What is it
The first focusable element on the page — usually a visually hidden link. Keyboard users meet it on the first Tab, activate it, and land straight in the main content without walking every nav link. The mandatory escape hatch on nav-heavy sites; WCAG calls it "bypass blocks".
Name disambiguation
A skip link is not "back to top" — the skip link sits first in the document for keyboard users escaping nav; back-to-top sits at the bottom of long pages for scrollers.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Repeated page chrome with more than a handful of nav links
- SPAs where focus needs a resting place after route changes
- Headers crowded with search, login and locale switchers
✕ When not to use
- Navs with two or three links — bypassing costs more than it saves
- Shipping it as a permanent first nav item instead of a hidden link
- Targets without tabindex="-1" so the jump lands on an unfocusable node
Variants
Corner chip
左上角芯片
Appears top-left on focus — the common default
Full-width bar
全宽横条
Spans the header on focus — harder to miss
Persistent inline
行内常驻
Always-visible small link — costs a line of visual space
Implementation
clip-path:focusposition: absolutescroll-margin-topHide with `position:absolute` + `clip-path:inset(50%)` (or left:-9999px) and restore inside the viewport on :focus with solid contrast. Give the target main `tabindex="-1"` and scroll-margin-top to clear sticky headers. Place it first in <body>, before the header. SPAs can reuse it to park focus after route changes.
Platform API
<a href="#main">tabindexlandmark rolesIn code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| WCAG | 2.4.1 Bypass Blocks |
| WebAIM | Skip Navigation |
Related concepts
Make every feature operable by keyboard alone: Tab/Shift+Tab move focus in a sane order, composite widgets roam with arrow keys over a roving tabindex, Escape dismisses overlays and returns focus. The full focus discipline beyond the focus ring, codified in the ARIA APG.
AccessibilityUsed withA horizontal navigation bar pinned to the top of the page: brand on the left, primary links in the middle, search, actions and avatar on the right. It is the front door of a site — the 3–7 most important destinations compressed into one strip, folding into a hamburger menu on mobile. Usually kept visible with position: sticky.
ComponentsUsed withA visible outline marking the currently focused element, so users know where the next keystroke will land. Pointer users rarely need it, but keyboard and assistive-tech users must always see focus or they are operating blind. Usually driven by :focus-visible — shown for keyboard focus, silent for mouse clicks.
AccessibilityUsed withNot to be confused with
navbar is the long nav being skipped, not the skipping mechanism — making "skip nav" its first item defeats the point.