Components
Skip link
The first tab stop of a page: a link that skips the navigation and lands on the content — hidden until it is focused.
Web only — React, from @krizaka/ui/skip-link. Stable: its API only changes in a major version.
Why it is here. Every app shell that keeps its own layout — Orochia, Orazaka, Yazakia, Yororis (the accessibility pass, krizaka-ui#134); MarketingLayout and AppShell already use it.
When to use
- At the top of every application shell that keeps its own navigation (
MarketingLayoutandAppShellalready include it). - On any page where several navigation stops come before the content.
When not to use
- To jump inside a long page (a contents list).Use instead: Table of contents
- In a native app: screen readers have their own rotor and headings.Use instead: Tab bar
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { SkipLink } from "@krizaka/ui/skip-link";Examples
Default
Press Tab: the link appears; Enter lands on the content.
Skip to contentThe content starts here.
Props
A "skip to content" link: the first tab stop, hidden until focused; Enter moves focus to the target.
| Prop | Type | Default | Description |
|---|---|---|---|
href | `#${string}` | #content | The content to land on: # and its id. The element becomes focusable (tabindex="-1") when it is not. |
Accessibility
- WCAG 2.4.1 Bypass Blocks. A visually hidden link is still read by screen readers as a link to the content.
- Focus really moves, even when a router intercepts hash links.
Keyboard
| Keys | Action |
|---|---|
| Tab | The first stop: the link appears as a pill above everything, in the brand ring. |
| Enter | Moves focus to the target, which becomes focusable (tabindex="-1") when it is not. |
Best practices
- Make it the very first focusable element, before the header.
- Pass the label already translated (“Skip to content”), and point
hrefat the element that holds the content (<main id="content">). - One per page. It is a link, so it stays in the page's history; the target takes focus.
Related components
Generated from the code of @krizaka/ui 3.6.0: its meta.ts, its examples and its types.Edit this documentation on GitHub