この記事でわかること

  • ページの探し方について定めた、WCAGの達成基準2.4.5の内容
  • 2つ以上の道として使える方法(検索・サイトマップ・関連リンクなど)
  • 手続きの途中や結果のページが対象外になる理由
  • 小さなサイトで、各ページへたどり着ける道を数えた結果

講座を紹介するサイトで、「Webデザイン基礎」の講座の説明のページが、メニューの「講座の一覧」を開いてからでないと見つからないとします。メニューの構造が分かりにくい人や、画面を拡大して長いメニューを追うのが大変な人は、そのページを探し出せないかもしれません。この記事では、目的のページへたどり着く道を複数用意する方法を、WCAG 2.2の達成基準2.4.5を軸に整理します。

当たった資料は、W3Cの達成基準2.4.5の解説(Understanding)と、技法G125・G63・G161・G126・G185で、どれも2026年11月1日に原文で確かめました。例の講座の教室は説明のために作った架空のサイトで、特定の道具や講座を勧めるための記事ではありません。

先に結論: メニューのほかに、検索かサイトマップを用意する

ページの集まりの中で、あるページを見つける方法を2つ以上用意します。 よく使われるのは、メニューに加えて、サイト内検索と、全ページを一覧にしたサイトマップを置く形です。申し込みの確認画面のような、手続きの途中や結果のページは対象外です。

方法 どんなときに向くか
サイト内検索 ページが多く、探したい言葉が決まっているとき
サイトマップ サイト全体の構成を一度に見たいとき
関連するページへのリンク 読んでいる内容の続きや詳しい説明へ進むとき
トップページから全ページへのリンク 数ページの小さなサイトのとき

ページの探し方に関わる基準(2.4.5)

WCAG 2.2の達成基準2.4.5(レベルAA)は、ページの集まりの中であるページを見つける方法が、2つ以上あることを求めています。ただし、手続きの結果や、手続きの途中のステップのページは除きます。

解説では、ねらいを、利用者が自分に合ったやり方で内容を探せるようにすることだとしています。目の見えにくい人は、画面の拡大や読み上げで大きなメニューを順に追うより、検索を使うほうが目的の場所へ行きやすいことがあります。認知に障害のある人は、いくつものページをたどるより、サイト全体を見渡せる目次やサイトマップを好むことがある、としています。

2つ以上の道として使える方法

解説は、十分な技法として、次の6つのうち2つ以上を使うことを挙げています。

  • 関連するページへのリンク(G125)
  • 目次(G64)
  • サイトマップ(G63)
  • サイト内検索(G161)
  • 全ページへのリンクの一覧(G126)
  • トップページから全ページへのリンク(G185)

小さなサイトでも、何らかの道案内を用意します。解説では、3〜4ページのサイトなら、すべてのページをトップページからリンクし、トップページとの間を行き来できるようにするだけで足りることがあるとしています。

技法G63では、サイトマップをサイトの中で使えるように、少なくとも、サイトマップに載っているどのページにもサイトマップへのリンクを置く、としています。技法G161のサイト内検索は、サイトの構造を理解したりたどったりしなくても、言葉で内容を探せる方法です。

対象外: 手続きの途中と結果のページ

基準でいう手続きは、ある作業を終えるために、どれも欠かせない一連の操作のことです。解説では、口座間の振込を終えるまで、振込の確認の画面へたどり着く方法がほかにない例を、対象外の例として挙げています。検索して初めて出る検索結果のページも、同じく対象外です。

講座の申し込みなら、申し込みの入口のページは一覧に載せ、入力の後に出る確認の画面は載せない、という扱いになります。

書き方の例: メニューに加えて、検索とサイトマップへのリンクを全ページに置く

次のHTMLは、どのページにも共通で置く上下の部分の例です。メニューのほかに、サイト内検索の入力欄と、サイトマップへのリンクを置いています。

<header>
  <nav aria-label="メイン">
    <a href="/">ホーム</a>
    <a href="/courses/">講座の一覧</a>
    <a href="/access/">教室への行き方</a>
  </nav>
  <!-- 2つ目の道: 言葉で探すサイト内検索 -->
  <form role="search" action="/search/" method="get">
    <label for="site-q">サイト内を検索</label>
    <input type="search" id="site-q" name="q" autocomplete="off">
    <button>探す</button>
  </form>
</header>

<main>(ページごとの内容)</main>

<footer>
  <!-- 3つ目の道: どのページからもサイトマップへ -->
  <a href="/sitemap/">サイトマップ(全ページの一覧)</a>
</footer>

サイトマップのページには、手続きの途中や結果のページを除いた全ページへのリンクを並べます。検索の結果のページから、目的のページへリンクで移れるようにしておきます。

手順: 自分のサイトで、たどり着く道を確かめる

  1. 主なページを書き出す: トップ、一覧、詳しい説明、問い合わせなど、利用者が探しに来るページを拾います
  2. 手続きのページを分ける: 申し込みや購入の途中・確認・完了の画面は、対象外として分けておきます
  3. メニュー以外の道を試す: 各ページへ、検索・サイトマップ・関連リンクのどれかでもたどり着けるかを確かめます
  4. サイトマップへのリンクを見る: サイトマップを置くなら、どのページにもサイトマップへのリンクがあるかを見ます
  5. 足りない道を足す: 1つの道しかないページがあれば、サイトマップに載せる、関連するページからリンクするなどして、道を増やします

試した結果

上のHTMLを、架空の講座の教室の小さなサイト(ホーム・講座の一覧・講座の説明2つ・教室への行き方・よくある質問・サイトマップ・申し込みの入口・申し込みの確認の9ページ)に組み込みました。自分のPCの中だけで見られるようにして、画面を出さずに動かすChromeで開き、各ページへたどり着ける道を数えました。比べるために、メニューと一覧のリンクだけの版も作りました。

  • 上のHTMLの版では、「Webデザイン基礎」の講座の説明のページへ、講座の一覧のリンク、サイトマップ、サイト内検索の3つの道でたどり着けました
  • サイト内検索で「行き方」を探すと、結果のページに「教室への行き方」へのリンクが出て、そこから移れました
  • 9ページのどれにも、下の部分にサイトマップへのリンクがありました。サイトマップからは、サイトマップ自身と確認の画面を除く7ページへ直接移れました
  • 申し込みの確認の画面は、サイトマップにも、「申し込み」で検索した結果にも出ませんでした
  • メニューと一覧のリンクだけの版では、講座の説明のページへの道は、講座の一覧のリンクの1つだけでした

試したのは、作業用のMacのChrome 156を画面なしで動かした環境です。スクリーンリーダーを使った確認はしていないので、見たのはページ同士のリンクと検索の結果までです。

自分で直すか、相談するかの判断

目安は、「使っている道具に、サイト内検索やサイトマップを置く機能があるか」です。ブログやホームページを作る道具の多くには、検索の部品やページの一覧を出す機能があり、設定や部品の追加で直せます。

検索の仕組みを自分で用意する必要があるときや、ページの数が多く一覧の作り方から考え直すときは、制作を頼んだ会社や、サイトを管理している人に相談します。学びながら直したいときは、Webデザインの講座で質問できる時間に、自分のサイトの道案内を見てもらうのも一つの方法です。

つまずきやすいところ

まとめ

  • ページの集まりの中で、あるページを見つける方法を2つ以上用意します
  • メニューに加えて、サイト内検索やサイトマップを置く形がよく使われます
  • 手続きの途中や結果のページは対象外です
  • 主なページごとに、メニュー以外の道でもたどり着けるかを確かめます