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 を参照してください。

関連 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）。

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.

Accessibility

Keyboard Interactions

Key	Description
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 件）。