WCAG 2.2の達成基準「2.4.8 位置」は、閲覧中のページがウェブサイト内のどこにあるのかを利用者が確認できるようにする基準です。
現在地が分かれば、利用者は一つ上の階層へ戻ったり、関連するページへ移動したりしやすくなります。
この記事では、Level AAAの「2.4.8 位置」を満たすための考え方と、パンくずリスト、ナビゲーション、サイトマップ、ページタイトルを使った実装例を整理します。
WCAG全体の考え方を先に確認したい場合は、WCAG 2.2の基本を解説した記事も参考になります。
「2.4.8 位置」が求める情報
ここでいう現在地情報とは、ページ名を表示するだけでなく、そのページがサイトの階層やナビゲーションのどこに属するのかを判断できる情報です。
たとえば「製品詳細」という見出しだけでは、そのページがどの製品カテゴリに属するのか分からない場合があります。
「ホーム > 製品一覧 > 製品詳細」という経路も示せば、利用者はページの位置と戻り先を把握できます。
実装方法は一つに限られません。
サイトの構造に合わせて、次の方法を単独または組み合わせて使います。
| 方法 | 伝えられる情報 | 向いている場面 |
|---|---|---|
| パンくずリスト | 現在のページまでの階層 | カテゴリや階層があるサイト |
| ナビゲーションの現在地表示 | 主要メニュー内の現在位置 | 項目数が限られたサイト |
| サイトマップ | サイト全体の構造 | ページ数やカテゴリが多いサイト |
| ページタイトルと見出し | 閲覧中のページ名 | すべてのページ |
実装方法
パンくずリストで階層を示す
パンくずリストは、ホームから現在のページまでの階層を順番に並べたナビゲーションです。
利用者は現在地を確認できるだけでなく、途中の階層へ直接戻れます。
パンくずを含む情報設計は、ナビゲーションと情報設計のアクセシビリティガイドでも詳しく解説しています。
HTMLの例
<nav aria-label="パンくずリスト">
<ol>
<li><a href="/">ホーム</a></li>
<li><a href="/products">製品一覧</a></li>
<li>製品詳細</li>
</ol>
</nav>最後の項目を現在のページとし、それ以前の項目を移動先として示すと、階層と戻り道を一つのまとまりで伝えられます。
ナビゲーションで現在の項目を示す
主要メニューでは、閲覧中の項目をほかの項目と区別します。
色や太字だけでは違いが伝わらない場合があるため、次の例では「現在のページ」という文字も添えています。
HTMLの例
<nav aria-label="主要メニュー">
<ul>
<li><a href="/" class="nav-item">ホーム</a></li>
<li><a href="/about" class="nav-item">会社概要</a></li>
<li>
<span class="nav-item current">製品一覧（現在のページ）</span>
</li>
<li><a href="/contact" class="nav-item">お問い合わせ</a></li>
</ul>
</nav>CSSの例
.nav-item.current {
font-weight: bold;
color: #007bff;
text-decoration: underline;
}見た目を強調すると同時に、文字としても現在地を示すことが確認のポイントです。
サイトマップで全体像を示す
サイトマップは、サイト内の主要なページを階層ごとに並べた案内ページです。
現在のページだけでなく、ほかにどのようなカテゴリやページがあるのかも把握できます。
HTMLの例
<section>
<h2>サイトマップ</h2>
<ul>
<li><a href="/">ホーム</a></li>
<li>
<a href="/products">製品一覧</a>
<ul>
<li><a href="/products/product1">製品1</a></li>
<li><a href="/products/product2">製品2</a></li>
</ul>
</li>
<li><a href="/about">会社概要</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</section>実際のサイト構造と同じ順序でページをまとめると、利用者が目的の場所を探しやすくなります。
ページタイトルと見出しを具体的にする
ブラウザのタブに表示されるページタイトルと、本文の最初の見出しには、閲覧中のページを特定できる名前を付けます。
「詳細」だけではなく、「製品Aの詳細」のように対象を含めると、単独で読んでも内容を判断できます。
ページタイトルの例
<head>
<title>製品Aの詳細 - 製品一覧 - サイト名</title>
</head>ページ見出しの例
<main>
<h1>製品Aの詳細</h1>
</main>タイトルと見出しの表記を揃えると、ブラウザのタブ、検索結果、ページ本文のあいだで同じページ名を確認できます。
よくある失敗と改善方法
現在地を示す情報がない
メニュー、パンくずリスト、サイトマップのいずれにも現在地の手掛かりがないと、利用者はページの位置や戻り先を判断できません。
サイトの階層がある場合はパンくずリストを設け、主要メニューでは閲覧中の項目を区別します。
色の違いだけで現在地を示す
現在の項目だけを別の色にしても、その違いを認識しにくい利用者には情報が伝わりません。
強調表示に加えて、文字でも「現在のページ」と分かるようにします。
ページ名が抽象的である
「詳細」「情報」「こちら」といった表現だけでは、ページを単独で開いたときに対象を特定できません。
ページタイトルと見出しに「製品Aの詳細」のような具体的な対象名を含めます。
表示とサイト構造が一致しない
パンくずリストやサイトマップの順序が実際の構造と異なると、現在地の説明がかえって分かりにくくなります。
カテゴリやページ構成を変更したときは、現在地を示す表示も同時に見直します。
確認方法
画面を見ながら確認する
- 下位階層のページを開き、パンくずリストやメニューから現在地を判断できるか確認します。
- パンくずリストの順序がサイトの階層と一致しているか確認します。
- 主要メニューで現在の項目がほかの項目と区別されているか確認します。
- ページタイトルと最初の見出しから、閲覧中のページを特定できるか確認します。
- サイトマップのリンクと階層が実際のページ構成と一致しているか確認します。
スクリーンリーダーで確認する
パンくずリスト、現在のメニュー項目、ページ見出しを順に読み上げ、画面を見なくても現在地を判断できるか確認します。
読み上げ環境の基本は、スクリーンリーダーの仕組みと実装ポイントで確認できます。
自動テストツールと手動確認を組み合わせる
AxeやWAVEなどのツールでナビゲーション要素を検証し、その後に実際の表示と読み上げで現在地が理解できるかを確認します。
ウェブアクセシビリティの確認を進める順序は、ウェブアクセシビリティチェックの進め方も参考になります。
実装時のチェックリスト
- 現在のページがサイト内のどこにあるか分かる。
- パンくずリストの階層と実際のサイト構造が一致している。
- メニューの現在地を色だけに頼らず伝えている。
- ページタイトルと最初の見出しが具体的である。
- サイトマップが現在のページ構成を反映している。
- 画面表示とスクリーンリーダーの両方で確認している。
現在地を複数の手掛かりで伝える
「2.4.8 位置」への対応では、利用者がページ名だけでなく、サイト内の階層や戻り先まで理解できることが必要です。
パンくずリスト、主要メニュー、サイトマップ、具体的なページタイトルをサイトの構造に合わせて組み合わせ、画面表示と読み上げの両方で確かめます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティを提供しています。
アクセシビリティ向上にご興味がある方は、サービスの詳細をご覧ください。