Skip link
Usage
Every Fleetline page starts with a skip link so keyboard and switch users can jump past the top navigation straight to the content. It's invisible until focused.
- Make it the first focusable element in
<body>. - Label: "Skip to main content". Add more only for big landmarks ("Skip to search", "Skip to vehicle list").
- Give the target
tabindex="-1"so focus actually moves there in every browser.
Anatomy
- Link —
<a class="skip-link" href="#main">, clipped off-screen until focused - Target —
<main id="main" tabindex="-1">
Examples
This page's own skip link is the real thing: press Tab from the top. The demos below render a frozen copy in place (.skip-link--preview), made inert so they don't add tab stops.
Skip link
Nothing shows until the link receives keyboard focus. Press Tab once after this page loads to see the real one at the top of the window.
Several skip links are fine on dense dispatch screens; each shows when focused.
<body>
<a class="skip-link" href="#main">Skip to main content</a>
<header class="top-nav">…</header>
<main id="main" tabindex="-1">…</main>
</body>API
| Hook | Values | Purpose |
|---|---|---|
.skip-link | block class | Hidden until focused, then fixed at the top inline-start corner above sticky headers |
.skip-link--preview | docs-only modifier | Render in flow inside a demo |
.is-focus-visible | docs-only class | Freeze the visible state |
Do and don't
<a class="skip-link" href="#main"> as the first element of <body>.
.skip-link { display: none }
display: none — it then never receives focus.Accessibility
| Key | Behavior |
|---|---|
| Tab (first press) | Focuses and reveals the skip link |
| Enter | Moves focus to #main; the next Tab continues from there |
- WCAG 2.4.1 Bypass Blocks. The link is clipped (not
display:none), so it stays in the tab order. - When visible it uses the primary action colors (4.5:1) and sits at
--z-tooltip, above sticky headers. - Forced colors: adds a 2px border.
Tokens
| Custom property | Purpose |
|---|---|
--color-action-primary-bg | -fg | Visible colors |
--z-tooltip | Stays above sticky headers and overlays |
--elevation-overlay | Shadow |
--space-2 | -4, --button-radius | Position, padding, shape |
--focus-ring-* | Focus ring |