Skip Nav

キーボード操作時のみ視覚的に現れる「本文へスキップ」リンクです（WCAG 2.1 SC 2.4.1 Bypass Blocks）。fandhe-frontend-headless-ui の skip_nav mod は link / content の 2 anatomy パーツを提供し、href に任意スキームを受け付けず常に #<id> フラグメントのみを組み立てます。Themes 版と異なり focus 時のみ表示する CSS を持たず、構造とフォーカス移動属性のみを担います。

スタイル済みの表示例は Skip Nav を参照してください。

アクセシビリティ・参考サイトとの対応

anatomy は chakra-ui の SkipNavLink/SkipNavContent と一致します（Ark UI・Radix Primitives・Radix Themes には該当部品がありません）。
role/aria-* はいずれも、参照サイト（chakra-ui）・本実装ともに出力しません。一方 data-* は本実装が data-scope="skip-nav"/data-part="link"（content は data-part="content"）を常に出力します（参照サイトの data-* 相当は無し）。この data-scope/data-part は role/aria-* の代替ではない独自フックであり、下記 Custom CSS の属性セレクタが依拠します。
chakra-ui の SkipNavContent が出力する inline outline: 0 は装飾のため採用していません（Themes 版が CSS で提供します）。
href/id/tabindex は呼び出し側 attrs に同名キーが含まれていても fail-closed に除去します。chakra-ui は id/tabIndex を呼び出し側から上書きできますが、本実装は意図的により厳格な挙動を採っています。
キーボード操作は独自のキーリスナを持たず、ネイティブ <a> の挙動（Tab でフォーカス → Enter でフラグメント遷移 → content へのフォーカス移動）に委ねます。link はページのできるだけ先頭に置いてください。
自前 CSS で組み立てる最小例はこのページ下部の Examples 節（「Custom CSS」）を参照してください。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Main content starts here.

Features

link / content の 2 anatomy パーツで WCAG 2.1 SC 2.4.1 Bypass Blocks を実現する（skip_nav.rs:1-14）。
link は任意の URL を呼び出し側から受け取らず、常に #<id>（フラグメントのみ）を内部で組み立てるためスキーム注入経路を持たない（skip_nav.rs:16-22,77-91）。
content は id/tabindex を、link は href を、それぞれ呼び出し側 attrs に同名キー（大文字小文字を無視）があっても fail-closed に除去してから合成する（skip_nav.rs:24-32,82-108）。
DEFAULT_ID 定数（"fandhe-skip-nav"）を提供し、ページ全体に 1 個だけ配置する典型利用を想定する（skip_nav.rs:71-75）。
chakra-ui（唯一の参照軸、Ark UI は該当ページ 404・Radix Primitives / Radix Themes に該当部品なし）と突合済み（イシュー #1663）。anatomy / data-* / ARIA は増減なし。chakra-ui の SkipNavContent が出力する inline outline: 0 は装飾のため headless 層では非採用（docs/policy/intentional-non-adoption.md §3.25 規則 2、Themes 版が CSS で担当）。

Anatomy

link
content

API Reference

Arguments

Name	Type	Default	Description
`link: id`	`&str`	`skip_nav::DEFAULT_ID`	スキップ先 id。href="#<id>" として出力する（skip_nav.rs:81-91）。
`content: id`	`&str`	`skip_nav::DEFAULT_ID`	id 属性値。link の href と対にする（skip_nav.rs:100-108）。

Examples

Custom id

DEFAULT_ID ではなく呼び出し側指定の id（"primitives-main"）を使う例です。

Skip to primitives content

Primitives content starts here.

Custom CSS

利用者が data-scope/data-part 属性セレクタで見た目を当てる最小例です。headless-ui 自体はスタイルを持ちません。

Skip to content (custom CSS)

Content reachable via the styled skip link.

CSS

[data-scope="skip-nav"][data-part="link"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
[data-scope="skip-nav"][data-part="link"]:focus-visible {
  clip: auto;
  width: auto;
  height: auto;
  position: fixed;
  top: 1rem;
  left: 1rem;
  padding: 0.5rem 0.75rem;
  background: #fff;
  outline: 2px solid #2563eb;
}
[data-scope="skip-nav"][data-part="content"] {
  outline: none;
}

Accessibility

Keyboard Interactions

Key	Description
Tab (link)	独自のキーリスナを持たず、link はページ先頭に置かれた通常の <a> としてブラウザの既定 Tab 順序に従いフォーカス可能になる（chakra-ui docs の「できるだけ DOM 先頭に置く」前提と一致、イシュー #1663 突合結果）。
Enter (link, focused)	ネイティブのフラグメント遷移で href="#<id>" へジャンプする。独自のキーイベントリスナは持たずブラウザ既定動作に委ねる（skip_nav.rs:16-22、イシュー #1663 突合結果）。
Tab (content, after link activation)	content は tabindex="-1" を固定出力するため通常の Tab 順序には含まれず、link クリック後のプログラム的フォーカス移動のみを許可する（skip_nav.rs:93-108）。

WAI-ARIA

Attribute	Description
(該当なし)	link/content は固有の role/aria-* を出力しない（skip_nav.rs 全文の非テスト行で role/aria- grep 0 件）。chakra-ui も role/aria-* を付与せず整合する（イシュー #1663 突合結果）。