パンくずリスト
componentいま見ているページがサイトのどの階層にあるかを示す道しるべです。クリックすると上の階層のページに戻れます。
基本
4 階層。末尾が現在のページ
項目の状態
isCurrent による違い
使用例
ページ階層
機能
このコンポーネントの用途
現在のページ階層を示し、親階層へ戻れるようにするナビゲーション。
ページ内の節移動ではなくサイト階層のパス表示に使う。
使用法
推奨される使い方と、やりがちな NG パターン
OK
- ✓各項目は .link、現在ページは breadcrumb-current（リンクにせず aria-current="page"）。
- ✓区切りは chevron-right を breadcrumb-sep でラップ。
NG
- ✕現在ページをリンクにしない → aria-current="page" の breadcrumb-current。
- ✕階層が 1 つしかないページに無理に置かない → 階層がある時だけ使う。
末尾（現在地）はリンクにしない
現在地の示し方現在地は span.breadcrumb-current ＋ aria-current="page"。リンクにしない。
<li><span class="breadcrumb-current" aria-current="page">申請手続き</span></li>
現在地をリンクにしない。今いるページへのリンクは無意味で、現在地も示せない。
<li><a class="link" href="#">申請手続き</a></li> <!-- 現在地をリンク化 -->
パンくずリストのアクセシビリティ
<nav aria-label> ＋ <ol>／<li> のランドマーク構造で、現在地は aria-current="page"、区切り記号は aria-hidden にします。WCAG 2.2 全基準は アクセシビリティ ページを参照。
期待される配慮
Presentation / Adaptability / Interaction / Assistive Technology
階層をリンクの並びで示し、現在地は非リンクで明示。区切り記号（›）は装飾。
文字は rem / トークンで拡大に追従。狭幅では折り返す。
Tab で各リンクへ、Enter で遷移。リンクは下線とフォーカスで分かる。
nav[aria-label] でランドマーク化、ol/li で順序、aria-current="page" で現在地、区切りは aria-hidden。
DS が担保する機能
追加実装なしで満たされる
- ✓
<nav>＋<ol>／<li>のセマンティック構造 - ✓リンクは
.link（下線＋フォーカス）、現在地は.breadcrumb-current（非リンク・同サイズ） - ✓区切り記号は
.breadcrumb-sepでaria-hidden前提の設計
実装時の必須対応
プロダクト側で担保する
- !
<nav aria-label="パンくずリスト">で包む - !末尾（現在地）は非リンクにし
aria-current="page"を付ける - !区切り記号の要素に
aria-hidden="true"（読み上げノイズを防ぐ）
テスト方法
キーボード / スクリーンリーダー / 自動チェック
| キー | 動作 |
|---|---|
| Tab | 各階層リンクへ移動 |
| Enter | 上の階層へ遷移 |
- SRランドマーク「ナビゲーション: パンくずリスト」、現在地は「現在のページ」と読まれる
- 操作区切り記号が読み上げられない（
aria-hidden） - 自動axe / Lighthouse で nav ラベル・
aria-current・リンク名を確認
区切りは aria-hidden・現在地は aria-current
達成基準：WCAG 1.3.1 情報及び関係性 / 4.1.2 名前・役割・値
区切りは aria-hidden、現在地は aria-current="page"。
<li class="breadcrumb-sep" aria-hidden="true">›</li> <li><span class="breadcrumb-current" aria-current="page">サービス一覧</span></li>
区切り記号を読み上げ対象のまま（「> ホーム > サービス一覧」のように記号がノイズになる）、現在地に aria-current が無いと現在位置が伝わらない。
<li class="breadcrumb-sep">›</li> <!-- aria-hidden なし --> <li><span class="breadcrumb-current">サービス一覧</span></li> <!-- aria-current なし -->