WCAG 2.2の達成基準3.2.3「一貫したナビゲーション」は、複数のページで繰り返されるナビゲーションを、登場するたびに同じ相対的な順序で示すことを求めるレベルAAの達成基準です。
メニューや検索などの位置関係を予測できれば、利用者はページを移動するたびに操作方法を覚え直さずに済みます。
ここでは、基準の対象と「同じ相対的な順序」の意味を整理し、実装例からテスト手順までを説明します。
達成基準3.2.3が対象とするもの
この達成基準を正しく読むには、対象となるページとナビゲーションの範囲を先に区別する必要があります。
- ウェブページの集合：共通の目的を持ち、同じ組織や制作者が管理する一連のページです。サイト内でも、目的やテンプレートが明確に異なるページ群は別の集合になる場合があります。
- ナビゲーションメカニズム：メインメニュー、パンくずリスト、サイト内検索、スキップリンクなど、利用者が目的のページや場所へ移動するための仕組みです。
- 同じ相対的な順序：繰り返される項目どうしの前後関係が変わらないことです。別の項目を途中に追加したり、一部の項目を表示しなかったりしても、残る項目の前後関係が同じなら相対的な順序は保たれます。
たとえば、「ホーム、サービス、会社情報、お問い合わせ」という主要項目が複数ページに現れるなら、その四項目の前後関係をページごとに入れ替えないようにします。
一方、サービスページだけで「料金」を「サービス」の直後に追加しても、四つの主要項目の相対的な順序が変わらなければ、この達成基準に反するとは限りません。
求められる一貫性と求められない同一性
「一貫したナビゲーション」は、すべてのページを完全に同じ見た目にする規定ではありません。
| 確認する点 | 求められる状態 | 誤解しやすい点 |
|---|---|---|
| メニュー項目 | 繰り返される項目の前後関係を保つ | 全ページで項目数まで同じにする必要はない |
| ページ固有の項目 | 既存項目の相対的な順序を崩さずに追加する | サブナビゲーションの追加自体は禁止されていない |
| ページ構造 | 繰り返されるナビゲーションを予測しやすく配置する | この達成基準だけでヘッダー、本文、フッターの全構造を固定するわけではない |
| 利用者による変更 | 利用者が設定や適応機能を使って変更した順序は例外として扱う | 制作者側の都合による予告のない並べ替えは例外にならない |
利用者が自分で順序を変更した場合は例外ですが、Cookieやローカルストレージを使うこと自体が達成条件になるわけではありません。
設定の保存方法は、必要な利用体験、同意管理、セキュリティなどを踏まえて別途設計します。
実装時に順序を保つ方法
共通コンポーネントで一元管理する
同じメニューをページごとに手入力すると、更新時に一部のページだけ順序が変わりやすくなります。
CMSの共通メニュー、テンプレート、共有コンポーネントなど、一か所の変更を対象ページへ反映できる仕組みにまとめると、順序の不一致を防ぎやすくなります。
<nav aria-label="メインナビゲーション">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/services/">サービス</a></li>
<li><a href="/company/">会社情報</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>追加項目を入れても既存項目を並べ替えない
ページ固有のサブメニューを追加するときは、共通項目の前後関係を維持します。
次の二つの並びでは、「ホーム、サービス、会社情報、お問い合わせ」の相対的な順序が同じです。
- 通常ページ：ホーム → サービス → 会社情報 → お問い合わせ
- サービス詳細：ホーム → サービス → 料金 → 会社情報 → お問い合わせ
これに対して、「ホーム、会社情報、サービス、お問い合わせ」とページごとに並べ替えると、利用者が覚えた位置関係を使えなくなります。
見た目と操作時の順序を確認する
CSSで見た目だけを並べ替える実装では、画面上の順序とキーボードやスクリーンリーダーでたどる順序が食い違うことがあります。
視覚的な配置だけで判断せず、実際の操作順序も確認すると、利用者によってナビゲーションの受け取り方が変わる問題を見つけやすくなります。
利用者にとっての利点
一貫した順序は、以前のページで覚えた位置や操作手順を次のページでも使えるようにします。
- 画面拡大を利用する人は、画面の一部しか見えない状態でも、手掛かりをもとに目的の項目を探しやすくなります。
- 認知や学習に困難がある人は、ページごとの予期しない変化に対応する負担を減らせます。
- スクリーンリーダーやキーボードを利用する人は、繰り返される項目の順序を予測しやすくなります。
WCAG 2.2の全体像を先に確認すると、この達成基準がウェブアクセシビリティ全体で果たす役割も理解しやすくなります。
よくある失敗と修正方法
ページごとに主要項目を並べ替える
トップページでは「ホーム、サービス、会社情報」の順なのに、下層ページでは「会社情報、ホーム、サービス」の順にすると、同じ項目を探す位置が変わります。
共通メニューのデータとテンプレートを一元化し、対象ページ群で同じ順序を参照するように修正します。
現在地を目立たせるために項目を先頭へ移す
現在表示しているページへのリンクを強調することと、その項目を先頭へ移動することは別の操作です。
現在地は選択状態や見た目で示し、共通項目の順序は保ちます。
自動検査だけで適合を判断する
達成基準3.2.3は複数ページの関係を確認するため、単一ページの自動検査だけでは相対的な順序の一致を判定しきれません。
axeやWAVEなどの検査ツールは各ページのマークアップ上の問題を探す補助として使い、最終的には対象ページを比較して確認します。
手動テストの進め方
W3Cの達成方法G61に沿って、次の順に確認します。
- 共通の目的やテンプレートを持つページ群から、代表的なページを選びます。
- 各ページで繰り返されるメインメニュー、検索、パンくずリスト、スキップリンクなどを一覧にします。
- 各ナビゲーションが、ほかの繰り返し要素に対して同じ相対的な順序で現れるかを比較します。
- 各メニュー内のリンクや操作項目について、繰り返される項目の前後関係が同じかを比較します。
- ページ固有の項目が追加または省略される場合も、共通項目の相対的な順序が保たれているかを確認します。
- 利用者が順序を変更できる機能がある場合は、変更が利用者の操作で始まり、その後の表示が意図どおりかを確認します。
公開時の一度だけでなく、メニューやテンプレートを変更したときにも同じテストを行います。
継続的な確認の組み立て方は、Webアクセシビリティの試験と改善を継続する方法でも解説しています。
実装と検証で押さえる点
- 対象となるページ群と、そこで繰り返されるナビゲーションを特定します。
- 共通項目の相対的な順序を保ち、ページ固有の項目はその前後関係を崩さずに追加します。
- 利用者が始めた変更と、制作者側の都合による順序変更を区別します。
- 共通コンポーネントで順序を管理し、複数ページを手動で比較します。
当社では、ウェブアクセシビリティを導入しやすくするUUU ウェブアクセシビリティを提供しています。サイトのアクセシビリティ改善を検討している方は、サービスの詳細をご覧ください。