LEARN BY EXAMPLE

2.4.8 現在位置 レベル AAA

ページの集まりの中で、今どこを見ているか分かる情報を用意する。

概要

ウェブページ一式の中で、利用者が今どこにいるか分かる情報を利用できるようにします。パンくずリスト、現在の項目を示したナビゲーション、サイトマップなどが方法の例です。

講座名に加え、サイト内のどこにいるかを示す

PCやスマートフォンで、検索結果から講座サイトの「写真入門」を直接開いた場面です。同じ分野の講座を探すために、現在位置を確認します。

利用者が困る例 講座名だけで、分類が分からない

講座サイト

写真入門

構図や光の使い方を学ぶ講座です。

申込期限:11月30日

この講座はどのカテゴリにある?

今いるページと、ほかの講座との関係が分からない。
見出しはあっても、サイト内での現在位置の手がかりがありません。

改善した例 階層と現在のページが分かる

講座サイト

現在位置(サイトの階層)

  1. ホーム
  2. 講座一覧
  3. 写真
  4. 写真入門 現在のページ

写真入門

構図や光の使い方を学ぶ講座です。

申込期限:11月30日

「講座一覧」の「写真」カテゴリにいる。

写真カテゴリに属するページだと分かる。
同じ分野の講座を、どの分類から探せばよいか見当がつきます。

図:同じ講座ページに、サイトの階層と現在のページの情報を加えた比較。階層を文字で示す静止図です。パンくずリストや、現在位置を示すナビゲーションなども方法の例で、どのサイトも同じ表示にする必要はありません。

達成できないと起こる問題の例

いくつものページを行き来すると現在位置を見失いやすい人が、PCやスマートフォンで講座サイトを見ています。外部の検索結果から「写真入門」のページを開き、同じ分野の講座も探そうとしています。

ページには講座名と説明がありますが、サイトのどの分類に属するか、現在位置を知る手がかりがありません。利用者は「写真入門」を読んでいることは分かっても、どのカテゴリから関連する講座を探せばよいか分からなくなります。

達成するための改善例

同じページに「ホーム → 講座一覧 → 写真 → 写真入門」というサイトの階層を示し、「写真入門」が現在のページだと明示します。利用者は、講座一覧の中の写真カテゴリに属するページを読んでいると分かります。

実際のサイトでは、上位のカテゴリへ移動できるパンくずリストにしたり、現在の項目を示すナビゲーションを使ったりできます。現在位置と周囲のページの関係が分かることで、関連する情報を探しやすくなります。

確認のポイント

  • 見ているページが、ウェブページ一式の中のどこにあるか分かる情報がありますか。
  • 外部の検索結果や共有リンクから直接開いた場合も、現在位置を把握できますか。
  • パンくずリストやナビゲーションの表示が、実際のページの階層・経路・現在の内容に合っていますか。
  • 現在の項目を示す場合、色の違いだけでなく文字や状態の情報でも区別できますか。
  • ページ名に加え、分類や前後のページとの関係など、位置が分かる情報がありますか。

条件と補足

「ウェブページ一式」の中の位置

ウェブページ一式は、共通の目的を持ち、同じ制作者・グループ・組織が作ったページの集合です。講座一覧と各講座の詳細ページなどが例です。画面のスクロール位置や、利用者の地理的な現在地を求める基準ではありません。

図は、同じ講座ページに階層と現在のページの情報を加えた静止図です。サイト内を移動する操作は再現していません。

特定の表示方法を一律に求めるものではない

パンくずリストの設置が必須という基準ではありません。階層を示す、たどってきた経路を示す、サイトマップやナビゲーションに現在の項目を示すなど、ページ一式の構成に合う方法を選びます。

階層を示す場合は、そのサイトでの分類上の位置を示します。利用者が実際にたどった閲覧履歴と一致するとは限りません。どちらを示す情報なのか分かるようにし、現在のページとの関係を正しく伝えます。

現在の項目の表示には、文字の「現在のページ」や、対応する要素のaria-currentなどを使えます。属性を付けることだけで済ませず、示した項目と実際の内容が合っているかを確認します。

ページタイトルや移動手段との違い

2.4.2「ページタイトル」は、ページの主題や目的を説明するタイトルを求めます。「写真入門」というページ名が分かることと、それが講座一覧のどこに属するか分かることは別です。

2.4.5「複数の手段」は、ページ一式の中で目的のページへ到達する複数の手段を扱います。検索や一覧からページを見つけられても、表示後の現在位置が分かるとは限りません。2.4.8では、その位置の情報を利用できるか確認します。

参照資料

テクニックは達成する方法の例です。出典の最終確認: 2026-11-10。講座サイトとページの階層は、この教材のために作った架空の例です。