Skip Link
ProAn anchor link that is the very first focusable element in the DOM, visually hidden until it receives keyboard focus. When activated, it jumps the user past the header and navigation directly to the main content area. Essential for keyboard and screen reader users who would otherwise have to tab through dozens of navigation links on every page load.
2 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Single "Skip to main content" link targeting the <main> element. | Use on every page as the first focusable element in the document. |
Usage Guidelines
Place the skip link as the very first focusable element in the DOM.
Place the skip link after the header — it must come before all navigation.
Target the <main> element or a container with id="main-content".
Hide the skip link from screen readers with display:none — use a visually-hidden technique that preserves focusability.
Make the link visible on focus with a smooth slide-in animation.
Forget to add a matching id on the target element.
Use clear, action-oriented text — "Skip to main content".
Use vague link text like "Skip" without specifying the destination.
Code
Design Tokens
Accessibility
- Must be the very first focusable element in the DOM — before any header or navigation.
- Visually hidden off-screen by default but never with display:none or visibility:hidden, which would remove it from the tab order.
- Target element (<main> or #main-content) should have tabindex="-1" so it can receive focus programmatically.
- Meets WCAG 2.4.1 (Bypass Blocks) at Level A — this is a baseline requirement, not optional.
- Text should describe the destination — "Skip to main content", not just "Skip".