# パンくずリストもメニューの現在地表示もない下層ページ

Source: https://easeweb.dev/learn/site-location
Topics: メニューとナビゲーション > どのページもサイト内の位置を示している (WCAG 2.4.8)
The fix: どのページにも、属するセクションを示します。見出しの上にページのセクションで終わるパンくずリストを置くか、メニューのセクションのリンクにaria-currentを付けてメニューの現在地の見た目を出すか、ページのタイトルにもセクション名を入れます。タイトルだけでは、伝わるのはほぼスクリーンリーダー利用者に限られます。
Test with: keyboard, screen reader, zoom
References: https://www.w3.org/WAI/WCAG22/Understanding/location.html https://www.w3.org/WAI/WCAG22/Techniques/general/G65 https://www.w3.org/WAI/WCAG22/Techniques/general/G128 https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA26 https://www.w3.org/WAI/WCAG22/Techniques/general/G127 https://www.w3.org/WAI/WCAG22/Techniques/general/G63 https://shopify.dev/docs/api/liquid/objects/link https://baymard.com/blog/implementing-mobile-hierarchy-breadcrumbs

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

## 場面

生活雑貨のショップ「Fernhill」は、商品ページをランディングページとしてデザインしています。訪れる人の多くは検索エンジンや広告から商品ページに直接来るため、商品との間に何も置かない方針です。ヘッダーの下には大きな写真、商品名、価格、「かごに入れる」ボタンが並びます。パンくずリストは、写真の上を散らかすものとして外しました。ヘッダーのメニュー（キッチン、テーブル、バス、ベッドルーム）には現在地の見た目があり、リンクの下にバーを引く形で、カテゴリーのページ用に描かれています。テーブルのページでは、テーブルに下線が付きます。

リネンのナプキンを検索した人が、「リネンのナプキン 4枚組」のページに着きました。ほかのテーブルリネンも見たいし、どこで見つけたかも覚えておきたいところです。ところが、このナプキンがテーブルの商品だと示すものは、ページのどこにもありません。パンくずリストはなく、バーの付いたメニューのリンクもなく、ブラウザーのタブには「リネンのナプキン 4枚組 – Fernhill」とあるだけです。バーはデザインにあるものの、ページのアドレスがメニューのリンクと一致したときにしか表示されず、商品のアドレス /products/linen-napkins はどのリンクとも一致しません。スクリーンリーダーの利用者には、読み込み時に同じタイトルが読まれ、続いてメニューのただの四つのリンクが聞こえます。

## 確認できる問題

達成基準2.4.8「現在位置」（レベルAAA）は、一連のページの中で利用者が今どこにいるかという情報を得られることを求めています。解説書は、その目的を、利用者がサイトの中で自分の位置をつかめるようにすることだとし、恩恵を受ける人として、注意の持続時間が短く混乱しやすい人を挙げています。十分な達成方法は、パンくずリスト（G65）、サイトマップ（G63）、ナビゲーションバーでの現在地の表示（G128）、`aria-current` による現在の項目の指定（ARIA26）、そしてページがサイト全体のどこにあるかを示すタイトル（G127）です。どれか一つで足ります。この商品ページには、そのどれもありません。パンくずリストはなく、メニューにも目印がなく、タイトルはページと店の名前を示すだけで、その間のセクションは示しません。

メニューの現在地の見た目は、アドレスの比較で決まります。ショップのプラットフォームもCMSもルーターも、ページ自身のアドレスを持つリンクに目印を付けます。Shopifyのテンプレートでは、リンクの `current` はページのパスがリンクのアドレスと一致するときに、`active` はパスがリンクのアドレスを含むときにtrueになり、Shopifyがテーマ作りの手本として公開しているDawnは、これらの値からメニューのリンクに下線と `aria-current="page"` を付けます。商品のパス /products/linen-napkins は /collections/table と一致せず、含んでもいないため、テーブルのリンクに商品ページで目印が付くことはありません。デザインファイルでは、うまく働くカテゴリーのページでこの状態を見せ、商品ページは単独で描くので、商品ページでは一度も表示されないことに誰も気づきません。

## 利用者への影響

検索エンジン、広告、共有されたリンクなど、外から直接来ることが多いのは、商品ページ、ヘルプ記事、ブログ記事、ドキュメントのページです。Baymard Instituteは2020年に、調査対象のショップのモバイルサイトの65%で商品ページにパンくずリストがなかったと報告しています。デスクトップでは20%でした。スマートフォンではメニューもボタンの奥に畳まれるため、画面に見えている範囲には、位置を示すものが何もないことも珍しくありません。

## 自動チェックとAIの限界

ページの要素に誤りはありません。リンクには名前があり、タイトルも空ではなく、見出しもあります。足りないのはセクションを示すものですが、スキャンはサイトのセクションを知りません。この診断では、3つ以上のリンクを持つメニューがあるトップページ以外のページで、パンくずリストがなく、メニューのどのリンクにも `aria-current` がなく見た目も隣のリンクと同じで、タイトルの部分が3つ未満なら、`ew:location-manual-check` として確認に回します。見出しや内容がすでにページの位置を示しているかどうかは、人にしか判断できないためです。AIのコーディングツールに商品ページを頼むと、デザインのとおりに作ります。デザインにパンくずリストがなければ、作りません。

## 修正前：セクションを示すものを何も描いていない商品ページ

```html
<head>
  <title>Linen napkins, set of 4 – Fernhill</title>
</head>
<body>
  <header>
    <a href="/">Fernhill</a>
    <nav aria-label="Main">
      <ul>
        <li>
          <a href="/collections/kitchen">Kitchen</a>
        </li>
        <li>
          <a href="/collections/table">Table</a>
        </li>
        <li>
          <a href="/collections/bath">Bath</a>
        </li>
        <li>
          <a href="/collections/bedroom">Bedroom</a>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Linen napkins, set of 4</h1>
    …
  </main>
</body>
```

```css
/* The bar under the menu link for the page you are on. */
nav a[aria-current="page"] {
  border-bottom: 3px solid currentColor;
}
```

- 見出しの上にパンくずリストがありません。
- メニューのバーは、メニューがアドレスへリンクしているカテゴリーのページでしか表示されないため、ここではどのリンクにも付きません。
- タイトルは商品と店の名前を示すだけで、テーブルを示しません。

## 修正後：セクションで終わるパンくずリスト

```html
<head>
  <title>Linen napkins, set of 4 – Fernhill</title>
</head>
<body>
  <header>
    <a href="/">Fernhill</a>
    <nav aria-label="Main">
      <ul>
        <li>
          <a href="/collections/kitchen">Kitchen</a>
        </li>
        <li>
          <a href="/collections/table">Table</a>
        </li>
        <li>
          <a href="/collections/bath">Bath</a>
        </li>
        <li>
          <a href="/collections/bedroom">Bedroom</a>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <nav class="breadcrumbs" aria-label="Breadcrumb">
      <ol>
        <li>
          <a href="/">Home</a>
        </li>
        <li>
          <a href="/collections/table">Table</a>
        </li>
      </ol>
    </nav>
    <h1>Linen napkins, set of 4</h1>
    …
  </main>
</body>
```

```css
/* The bar under the menu link for the page you are on. */
nav a[aria-current="page"] {
  border-bottom: 3px solid currentColor;
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumbs li + li::before {
  content: "";
  display: inline-block;
  height: 0.8em;
  margin-right: 0.5rem;
  border-right: 1px solid currentColor;
  transform: rotate(15deg);
}
```

1. 見出しの上に、ホームから商品の属するセクションまでのパンくずリストを置きます。ホームとテーブルです。ページに着いた人は、どこにいるかがすぐに分かり、クリック一つで上の階層へ移れます。
2. パンくずリストはセクションで終え、商品名は見出しに任せます。1行違いで同じページ名を二度示さずに済みます。
3. パンくずリストを「Breadcrumb」という名前の `nav` に入れ、番号付きリストにします。スクリーンリーダーはナビゲーションとして読み上げ、ランドマーク一覧に載せ、いくつの階層があるかも伝えます。
4. 区切りは細い線を傾けて描き、パンくずの間にスクリーンリーダーが読む文字を置きません。

これで修正前の問題は直り、2.4.8を満たします。デザインは描かれたとおりのままで、見出しの上に小さな文字の控えめな1行が加わるだけです。スマートフォンでは隠さず、折り返して表示します。

## 修正後：メニューでのセクションの目印

```html
<head>
  <title>Linen napkins, set of 4 – Fernhill</title>
</head>
<body>
  <header>
    <a href="/">Fernhill</a>
    <nav aria-label="Main">
      <ul>
        <li>
          <a href="/collections/kitchen">Kitchen</a>
        </li>
        <li>
          <a href="/collections/table" aria-current="true">Table</a>
        </li>
        <li>
          <a href="/collections/bath">Bath</a>
        </li>
        <li>
          <a href="/collections/bedroom">Bedroom</a>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Linen napkins, set of 4</h1>
    …
  </main>
</body>
```

```css
/* The bar under the menu link for the page you are on, or for its section. */
nav a:is([aria-current="page"], [aria-current="true"]) {
  border-bottom: 3px solid currentColor;
}
```

1. リンクとアドレスが一致するページに目印を付けるだけでなく、ページが属するセクションを決める規則もテンプレートに持たせます。商品ページなら、その商品のメインのカテゴリーです。
2. そのセクションのリンクに `aria-current="true"` を付けます。スクリーンリーダーはそこに来たときに現在の項目だと伝えます。`"page"` はセクション自体のページに残すので、二つが混ざることはありません。
3. メニューにすでにあるバーを、どちらの値からも描くようにします。セクションのリンクにも同じ見た目が付き、見た目とコードが別のリンクを示すこともなくなります。

これで修正前の問題は直り、2.4.8を満たします。カテゴリーのページ用にすでに描かれているバーを使うので、デザインは変わりません。そのバーが、セクションの中のどのページにも表示されるようになります。スマートフォンではメニューを開くまでボタンの奥にあるため、開いたメニューにも同じ目印を描く必要があります。

## 修正後：タイトルにセクション名を入れる

```html
<head>
  <title>Linen napkins, set of 4 – Table – Fernhill</title>
</head>
<body>
  <header>
    <a href="/">Fernhill</a>
    <nav aria-label="Main">
      <ul>
        <li>
          <a href="/collections/kitchen">Kitchen</a>
        </li>
        <li>
          <a href="/collections/table">Table</a>
        </li>
        <li>
          <a href="/collections/bath">Bath</a>
        </li>
        <li>
          <a href="/collections/bedroom">Bedroom</a>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Linen napkins, set of 4</h1>
    …
  </main>
</body>
```

```css
/* The bar under the menu link for the page you are on. */
nav a[aria-current="page"] {
  border-bottom: 3px solid currentColor;
}
```

1. タイトルを、具体的なものから大きなものへの順に書きます。商品、そのセクション、店の順です。スクリーンリーダーはページの読み込み時にタイトルを読むので、ページのほかの何よりも先にセクションが伝わります。

これはG127の方法で2.4.8を満たしますが、これだけでは足りません。タイトルが表示されるのはブラウザーのタブだけで、そこでも数語で切れることが多く、スマートフォンのブラウザーではページを開いている間はふつう表示されないため、画面を見て使う人の目にはほとんど触れません。それでも、ほかの二つの修正のどちらかと一緒に行う価値はあります。デザインに何の負担もなく、ブックマークや履歴にもセクション名が残ります。

## どの方法を選ぶか

三つとも2.4.8を満たします。パンくずリストを使ってください。すべての階層を示し、利用者がすでに見ている見出しのそばにあり、どの画面幅や拡大率でも見えるのはこれだけです。メニューの目印は一番上のセクションしか示さず、スマートフォンでは畳まれてしまい、タイトルはそれだけでは足りません。メニューでセクションを示す方法は、セクションが一階層しかなく、デザインにすでに現在地の見た目があるサイトに向いています。場所はまったく取りません。どちらを選んでも、タイトルにはセクション名を入れてください。

## 実装の判断

**商品がどのセクションに属するか。** 商品が複数のコレクションに入ることがあります。ナプキンならテーブルにもセールにも入ります。商品ごとにメインのセクションを一つ決め、ショップの管理画面で設定する商品タイプやカテゴリーのような一つの欄に持たせて、パンくずリスト、メニューの目印、タイトルをその欄から作ります。たまたまたどってきた経路からパンくずリストを作ってはいけません。G65はたどった経路を示すパンくずリストも認めていますが、検索エンジンから来た人には経路がないのでセクションが示されず、店内を見て回った人には、同じ商品でも人によって違うセクションが示されます。

**アドレスバーは答えにならない。** /table/napkins/linen-napkins のようなアドレスはページの位置を示しますが、2.4.8の達成方法はどれもアドレスを使っておらず、読む人も少なく、スマートフォンのブラウザーはたいていドメインしか表示しません。/products/linen-napkins のように商品に階層のないアドレスを付けるプラットフォームでは、示すものはさらに少なくなります。

**構造化データは目に見えない。** JSON-LDのBreadcrumbListのような検索エンジン向けのパンくずのマークアップは、Googleのデスクトップの検索結果にパンくずを出すことがあるだけで、ページには出ません。表示するパンくずリストと一緒に入れるのはかまいませんが、その代わりにはなりません。

**スマートフォンのレイアウト。** スマートフォンでもパンくずリストを残します。長いときは隠さずに、下のデザインの案の一つのように、一つ上のセクションへのリンク一つに縮めます。セクション名を示すリンクが一つあれば、ページの位置は伝わります。スマートフォンのメニューでは、開いたメニューの中にもセクションの目印を描きます。

**コードを正しく書く。** パンくずリストには固有の名前が必要で、読み上げられる区切りがあってはいけません。クラスだけで目印を付けたメニューのリンクは、目で見る人にしか現在位置を伝えません。どちらも[現在のページを見た目だけで示すパンくずリスト](/ja/learn/breadcrumbs)と[現在のページを見た目だけで示すナビゲーション](/ja/learn/current-page)で扱います。どのページでも同じタイトルは、それより先にレベルAで不適合になります。[すべてのページで同じページタイトル](/ja/learn/page-title)を参照してください。

**サイトマップ。** G63は、2.4.8を満たすもう一つの方法としてサイトマップを挙げています。サイトマップはサイト全体を別のページに示すものなので、利用者はいったんページを離れ、そこで探す必要があります。[検索もサイトマップもない、メニューだけのサイト](/ja/learn/multiple-ways)で説明しているように、ページを見つける二つ目の手段としてのほうが役に立ちます。

## 修正の確認

1. 商品、記事、検索結果、ヘルプのページを含むすべてのページのテンプレートを挙げ、それぞれ1ページずつ開いて、パンくずリスト、メニューの目印、またはその両方で、どのセクションにあるかが示されているか確認する。
2. 検索エンジンや共有されたリンクから商品ページや記事ページを直接開き、メニューを開かず、アドレスも読まずに、ページの表示だけでどのセクションにいるかを言えるか確認する。
3. スクリーンリーダーで同じページを開き、読み込み時に読まれるタイトル、パンくずリスト、現在の項目として読まれるメニューのリンクのいずれかから、セクションが分かるか確認する。
4. スマートフォンの幅と400%の拡大で、パンくずリストが表示されたままか、メニューボタンを1回押すとセクションの目印が見えるか確認する。
5. 二つのコレクションに入っている商品をそれぞれのコレクションから開き、どちらからでもパンくずリスト、メニューの目印、タイトルが同じセクションを示すか確認する。

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。ページのテンプレートやメニューを変更した際は、再度確認します。

## 制限

このサンプルは、どのサイトでも同じ結果になることを保証するものではありません。扱っているのは、位置を何も示さないページです。現在位置の手がかりが役に立つのは、サイトのセクション分けが利用者にとって分かりやすいときだけです。誰も思いつかないカテゴリーをたどるパンくずリストでは、やはり迷います。これはサイトの構造の問題で、マークアップでは直せません。ページごとに順序や言葉が変わるパンくずリストやメニューには、別の問題があります。[ページによって順序や名前が変わるナビゲーション](/ja/learn/consistent-navigation)を参照してください。`aria-current="true"` の読み上げ方はスクリーンリーダーによって異なり、「現在」とだけ言うものもあります。利用者が使うスクリーンリーダーで確かめてください。

## スクリーンリーダーでの動き（EaseWebが実機で確認）

`aria-current="page"`: メニューやパンくずリスト、ページ送りで、今いるページへのリンクだと示します。

| スクリーンリーダー | ブラウザーとOS | Tabで移動 | 下矢印キー |
| --- | --- | --- | --- |
| NVDA | Chrome, Windows 11 | 未確認 | 未確認 |
| JAWS | Chrome, Windows 11 | 未確認 | 未確認 |
| VoiceOver | Safari, iOS | 未確認 | 未確認 |
| TalkBack | Chrome, Android | 未確認 | 未確認 |

https://easeweb.dev/ja/learn/screen-reader-support

---

このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）