パンくずリスト

パンくずリスト（breadcrumb）とは？

パンくずリストは、「ホーム ＞ 商品一覧 ＞ シューズ ＞ ランニング」のように、いまサイトのどの階層にいるかを示し、上の階層へ素早く戻れるようにするナビゲーションです。 ページ上部によく置かれます。

見た目はただのリンクの並びですが、支援技術には 「これはナビゲーションで、順序のあるリストで、最後が現在地」という構造を 正しく伝えることが大切です。

なぜアクセシビリティが大事なの？

• スクリーンリーダー利用者は、<nav> でラベル付けされていれば ランドマーク移動でパンくずに一発でジャンプできます。<ol> なら「リスト 4項目」と読み上げられ、階層の深さも分かります。
• 最後の項目を aria-current="page" にすると「現在のページ」と読み上げられ、いまどこにいるかが明確になります。リンクにしないことで「同じページへの無意味なリンク」も避けられます。
• 区切りの「>」や「/」をテキストで入れると、 一文字ずつ読み上げられて耳障りです。CSS の擬似要素で描けば読み上げられません。

ライブデモ（推奨実装）

下が APG に沿ったパンくずです。リンクは Tab で順に移動でき、 最後の「ランニング」は現在地なのでリンクになっていません。

キーボード操作

必要な WAI-ARIA / ロール

実装：推奨パターン（Good）

マークアップ:

<nav aria-label="パンくずリスト">
  <ol>
    <li><a href="/">ホーム</a></li>
    <li><a href="/products">商品一覧</a></li>
    <li><a href="/products/shoes">シューズ</a></li>
    <!-- 現在地はリンクにせず aria-current="page" を付ける -->
    <li><a href="/products/shoes/running" aria-current="page">ランニング</a></li>
  </ol>
</nav>

区切り文字は CSS で描く（テキストにしない）:

/* 区切り文字は CSS の擬似要素で描く（テキストとして読み上げさせない） */
nav[aria-label="パンくずリスト"] ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
}
nav[aria-label="パンくずリスト"] li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--text-muted);
}

アンチパターン（Bad）

下は <div> とリンク、テキストの「>」だけで作ったパンくずです。見た目は同じですが、ナビゲーションでもリストでもなく、現在地も伝わりません。

<!-- ❌ div と「>」テキストだけ -->
<div class="crumbs">
  <a href="/">ホーム</a> &gt;
  <a href="/products">商品一覧</a> &gt;
  <a href="/products/shoes">シューズ</a> &gt;
  <span>ランニング</span>
</div>
<!-- nav も ol/li も無く、現在地も伝わらない -->

実装チェックリスト

• 外側を <nav aria-label="…"> で囲んでいる
• 中身は <ol> > <li> の順序付きリスト
• 各階層は <a href>（キーボードで移動できる）
• 現在地は aria-current="page" を付け、リンクにしていない
• 区切り文字は CSS の擬似要素で描き、テキストにしていない
• フォーカスリングを消していない

原文（英語）:Breadcrumb Pattern — W3C APG（新しいタブで開きます）