# 検索もサイトマップもない、メニューだけのサイト
Source: https://easeweb.dev/learn/multiple-ways
Topics: メニューとナビゲーション > ページを見つける方法が複数ある (WCAG 2.4.5)
The fix: どのページにも、メニューのほかにもう1つの行き方を用意します。すべてのページを見つけられるサイト内検索をヘッダーに置くか、どのページのフッターからもサイトマップへリンクするか、関連するページどうしをリンクして、どのページにも複数の場所から行けるようにします。
Test with: keyboard, screen reader
References: https://www.w3.org/WAI/WCAG22/Understanding/multiple-ways.html https://www.w3.org/WAI/WCAG22/Techniques/general/G161 https://www.w3.org/WAI/WCAG22/Techniques/general/G63 https://www.w3.org/WAI/WCAG22/Techniques/general/G125 https://www.w3.org/WAI/WCAG22/Techniques/general/G126 https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/search https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/search.html
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
## 場面
ある生活雑貨のショップは300ほどの商品を扱い、メニューのShopの下に、Kitchen、Table、Bath、Bedroomと分けています。それぞれを開くと、さらにカテゴリーが並びます。リネンのナプキンを探す人は、リネンのティータオルがあるKitchenを開き、次にリネンのシーツがあるBedroomを開きます。ナプキンはTableのLinenにあります。ヘッダーに検索欄はなく、フッターにはDelivery、Returns、Contact usはあってもサイトマップはありません。トップページにはいくつかのおすすめ商品が出ていますが、ナプキンはありません。ナプキンにも、ほかのすべての商品、カテゴリー、お手入れガイド、規定のページにも、行く方法はメニューしかありません。
## 確認できる問題
レベルAAの達成基準2.4.5「複数の手段」は、一連のページの中で、あるページを見つける方法が複数あることを求めています。W3Cの十分な達成方法は、その方法を挙げていて、サイトにはそのうち2つ以上が必要です。関連するページへのリンク、目次、サイトマップ、サイト内検索、全ページへのリンクの一覧、ごく小さなサイトではトップページから全ページへのリンクです。この例では、どのページも行き方がメニューの1つだけなので、すべてのページが満たしていません。トップページのおすすめ商品は、その数点への2つ目の行き方にはなりますが、残りの商品にはなりません。
この基準には例外が1つあります。購入手続きの配送の段階や注文完了のページのように、手順の途中や結果のページには、2つ目の行き方は要りません。商品、カテゴリー、ヘルプのページは手順の途中ではなく、どこからでも来られます。
## 利用者への影響
メニューは誰か一人の分け方で、同じように分ける人にしか役立ちません。ごく小さなサイトなら求められることは少なく、トップページから3、4ページすべてにリンクしていれば、トップページとの間のリンクで足りることがあるとW3Cは述べています。
## 自動チェックとAIの限界
この問題は「ないこと」で、どのページにも写りません。どのページにも動くメニューがあるため、axeなど1ページずつ調べるツールは何も見つけず、2.4.5を扱うルールもありません。EaseWebの診断は1回の実行で調べたページを横断して見て、どのページにもサイト内検索もサイトマップへのリンクもない場合、指摘ではなく、確認が必要な項目として挙げます。2つ目の行き方は、関連するページどうしのリンク、全ページの一覧、実行で開かなかった検索かもしれず、それがすべてのページに届いているかは人にしか判断できないからです。検索が実際に人の使う言葉で見つけられるかも、人が試す必要があります。AIのコードアシスタントに「ナビゲーションを改善して」と頼むと、メニューの階層を増やすことがありますが、それでも行き方は1つのままです。
## 修正前：メニューだけ
```html
…
```
メニュー自体はよく作られていますが、どのページへ行く方法もこれしかありません。ショップがナプキンをTableに分類していると知らない人は、見つかるまでカテゴリーを1つずつ開くしかありません。
## 修正後：ヘッダーのサイト内検索
```html
```
検索は共通のヘッダーにあるので、どのページでも同じ場所にあり、`search` 要素がそれを検索のランドマークにするため、スクリーンリーダー利用者はそこへ移動できます。メニューと合わせて、どのページにも2つの行き方ができます。ただし、役立つのは結果が出る範囲までです。すべての商品、カテゴリー、お手入れガイド、規定のページを、タイトルでも、訪問者がそれを呼ぶ言葉でも見つけられる必要があります。
## 修正後：どのページからもリンクしたサイトマップ
```html
```
```html site-map.html
Site map
…
Help
```
サイトマップは、見出しの下に実際のリンクを並べた1枚のふつうのページで、どのフッターからもリンクされるため、載せたすべてのページへの2つ目の行き方になります。満たすのは、そろっている間だけです。すべてのページか、セクション内の全ページへリンクする、すべてのセクションのページを載せ、メニューと同じデータから作って、新しいページが漏れないようにします。メニューと同じカテゴリーで分けられているので、ナプキンがどのカテゴリーにあるか推測できない人の助けにはならず、すべてのカテゴリーを一度に見渡せるようになるだけです。
## 修正後：関連するページどうしのリンク
```html
```
商品のページから関連する商品やガイドへリンクするので、ティータオルのページにいる人は、メニューを使わずにナプキンへたどり着けます。満たすのは、どのページもこうして少なくとも1つのほかのページからリンクされている間だけで、それには手間がかかります。新しい商品、規定のページ、関連するもののない商品は、メニューからしか行けないままです。また、目当てに近いところから始める人にしか役立ちません。
## どの方法を選ぶか
3つとも、すべてのページに届いていれば2.4.5を満たします。サイト内検索を使ってください。ショップの分け方を知らなくても、自分の言葉でページを見つけられる唯一の方法で、索引に入ればすぐにすべてのページに届きます。サイトマップと関連ページのリンクは、そろっている間だけ満たし、どちらもショップ自身のカテゴリーに沿っています。検索に加えて置く価値はあり、特にサイトマップは、ショップ全体を一度に見せ、入力なしで使えます。
## 実装の判断
検索が本当に2つ目の行き方になるかは、何を見つけられるかで決まります。
- 人が探しそうなページをすべて索引に入れる。商品だけでなく、カテゴリー、お手入れガイド、Journalの記事、ヘルプのページも。
- ショップの言葉だけでなく、訪問者の言葉にも合わせる。表記の揺れ、ひらがなとカタカナ、よくある誤字、同じ物の別の呼び方。
- 何も見つからないときは、そう伝え、空のページではなく、カテゴリーやサイトマップを示す。
検索結果のページは、ページタイトルと結果の先頭で件数を伝えます。入力に合わせて結果が変わる場合の伝え方は、[件数が読み上げられない検索・絞り込み結果](/ja/learn/search-results)で説明しています。ヘッダーは共通なので、検索はどのページでも同じ場所に置きます。ページによって場所が変わると一貫性が崩れることは、[ページによって順序や名前が変わるナビゲーション](/ja/learn/consistent-navigation)で説明しています。
虫めがねのアイコンを押してから検索欄が出る作りでもかまいません。アイコンが「検索」という名前のボタンで、開いたときに欄へフォーカスが移れば問題ありません。
検索エンジン向けの `/sitemap.xml` は、人のためのサイトマップではありません。ページを見つける方法には数えられず、フッターからリンクしても誰の助けにもなりません。
パンくずリストはページの位置を示し、上の階層へリンクしますが、まだ見つけていないページへは導かないため、それだけでは2つ目の行き方になりません。カテゴリーのページの絞り込みや並べ替えも、そのカテゴリーを見て回る一部で、別の行き方ではありません。
トップページからも互いのメニューからも全ページにリンクしている3、4ページのサイトは、すでに複数の行き方を持っています。このガイドが扱うのは、メニューがパズルになるほど大きなサイトです。
## 修正の確認
1. メニューの奥にある商品、お手入れガイド、規定のページを含めて5ページを無作為に選ぶ。それぞれにメニューからたどり着き、次にメニューを使わない別の方法でたどり着く。
2. 訪問者が使う言葉で検索する。別の呼び方、表記の揺れ、誤字、商品の正式な名前。正しいページが出るか、結果がないときに行き先が示されるか確認する。
3. サイトマップがある場合、メニューやページの一覧と比べる。どのセクションもあり、どのページも載っているか、サイトマップに載っているセクションのページからリンクされている。テスト用のページを加えて、載ることを確認する。
4. スクリーンリーダーで、検索のランドマークへ移動するか、フッターからサイトマップを開き、メニューを開かずに商品へたどり着く。
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。メニュー、検索の索引、サイトのセクションを変更した際は、再度確認します。
## 制限
このサンプルは、どのサイトでも同じ結果になることを保証するものではありません。2.4.5が求めるのは複数の行き方で、よい行き方ではありません。役立つものを何も見つけない検索も形式上は満たしますが、それを必要とする人には役立ちません。購入手続きのような手順の途中は対象外なので、基準を満たすために支払いの段階へ検索を置く必要はありません。サイト全体を、使う人、特にメニューが苦手な人と一緒に確認してください。
---
このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）