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.

WebStableNavigation

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, Yasakia, 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 (MarketingLayout and AppShell already 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 tailwindcss

Styles

@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.

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 href at 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.

Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub