Design Pattern
パンくずリスト
パンくずリストは、現在のページがサイト階層のどこにあるかを示すナビゲーションです。nav と ol / li を使い、aria-current で現在位置を明示するのが基本です。
いつ使う / 使わない
使うべきとき
- サイト階層が深く、上位ページへ戻る導線を提供したい場合
- カテゴリや一覧から詳細へ入る構造で、現在位置を明確にしたい場合
- 検索結果以外にも複数の到達経路があるページで、補助的なナビが必要な場合
使わないべきとき
- 単純な 1 階層構造で、現在位置が自明な場合
- 実際の情報構造と異なる疑似的な階層を見せたいだけの場合
- 履歴的な戻る導線として使いたい場合 → ブラウザバックとは目的が異なる
構造（Anatomy）
1 ナビゲーションコンテナ（nav 要素）
2 順序付きリスト（ol / li 要素）
3 リンク（上位階層へのナビゲーション）
4 セパレーター（階層間の区切り記号）
5 現在のページ（リンクなし、aria-current で明示）
- nav — パンくず全体を囲むランドマーク。用途が分かる aria-label を付ける
- ol / li — 階層順を表すため、順序付きリストでマークアップする
- リンク — 上位階層ページへの移動手段。現在ページ以外をリンクにする
- セパレーター — 装飾として扱い、スクリーンリーダーには読み上げさせない
- 現在のページ —
aria-current="page"で明示し、通常はリンクにしない
HTML 構造
重要なポイント
<nav>要素にaria-label="パンくず"などを付けて用途を明示する- 順序関係が重要なので
<ol>を使う - 最後の項目には
aria-current="page"を設定する - セパレーターは CSS 疑似要素か
aria-hidden付き要素で表現する
CSS 実装
スタイル設計のポイント
- Flexbox で横並びにし、折り返しにも対応できるようにする
- 現在のページはリンク色や背景、太字で区別する
- セパレーターはテキストノードではなく疑似要素で描くと読み上げ制御しやすい
- モバイルでは行の詰まりを避け、十分な余白と視認性を確保する
アクセシビリティ
WCAG 2.4.8 現在位置
aria-current="page" により、現在のページがプログラム的にも視覚的にも判別できます。
WCAG 1.3.1 情報及び関係性
<ol> を使うことで、階層と順序の関係を支援技術に伝えられます。
キーボード操作
- Tab で各リンクにフォーカス移動（現在ページは通常スキップ）
- Enter でリンク先に遷移
- スクリーンリーダーはランドマークとリスト構造をあわせて把握できる
ライブデモ
基本パンくず
シンプルなセパレーター付きの基本形です。
アイコン付き
ホームアイコンとアイコンセパレーターを使ったバリエーションです。
カスタムスタイル
背景色や角丸を加えて現在位置を強調した例です。
よくある間違い
div でマークアップする
nav と ol を使わないと、ナビゲーションランドマークと階層構造の意味が失われます。
現在のページに aria-current がない
最後の項目が現在位置だと支援技術に伝わらず、現在地の把握が難しくなります。
セパレーターが読み上げられる
「>」や「/」をそのまま入れると読み上げノイズになるため、装飾として扱う必要があります。
ul を使う
パンくずは順序が重要なので、順序なしリストではなく順序付きリストを使うのが適切です。