Composants
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 uniquement — React, depuis @krizaka/ui/skip-link. Stable : son API ne change qu’à une version majeure.
Pourquoi il est là. Every app shell that keeps its own layout — Orochia, Orazaka, Yazakia, Yororis (the accessibility pass, krizaka-ui#134); MarketingLayout and AppShell already use it.
Quand l’utiliser
- 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.
Quand ne pas l’utiliser
- To jump inside a long page (a contents list).À la place : Table of contents
- In a native app: screen readers have their own rotor and headings.À la place : Tab bar
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { SkipLink } from "@krizaka/ui/skip-link";Exemples
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 | Défaut | Description |
|---|---|---|---|
href | `#${string}` | #content | The content to land on: # and its id. The element becomes focusable (tabindex="-1") when it is not. |
Accessibilité
- 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.
Clavier
| Touches | 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. |
Bonnes pratiques
- 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.
Composants liés
Générée depuis le code de @krizaka/ui 3.6.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub