LEARN BY EXAMPLE

3.2.3 一貫したナビゲーション レベル AA

ページを移っても、共通のメニューを同じ順序でたどれるようにする。

概要

同じウェブページ一式の複数のページで繰り返すナビゲーションは、ほかの共通部品やメニュー項目に対して、相対的に同じ順序で出現するようにします。ただし、利用者が順序の変更を始めた場合は除きます。

ページを移っても、同じメニューをたどる

講座を選んだあと、申込方法やよくある質問を調べる場面です。サイト名・検索欄・メニューと、その中のリンクの順序を比べます。

利用者が困る例 ページごとに共通部分の順序が変わる

覚えた手がかりを使えず、メニューを探し直す。
サイト名や検索欄との前後関係も、メニュー内のリンクの順序も変わっています。

改善した例 共通部分を同じ順序で表示する

図内のメニューを選んで、ページ表示を切り替えられます。

講座サイト

講座一覧

写真入門、文章の書き方などの講座を紹介。

講座サイト

申込方法

希望する講座を選び、申込フォームに入力する手順を紹介。

講座サイト

よくある質問

スマートフォンからの申し込みや、申込後の確認方法を紹介。

共通部分:サイト名 → 検索欄 → メニュー
リンク:講座一覧 → 申込方法 → よくある質問

前のページで覚えた順序を使って、次の案内を探せる。
表示中の項目は、順序を変えずに文字と枠でも示します。

図:同じ講座サイトの共通部分を比較。「利用者が困る例」は静止図です。「改善した例」では、別ページに当たる内容を図内で切り替えます。メニューのリンクはキーボードでも選べ、検索欄は静止した表示です。

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

画面を拡大している人が、PCで講座サイトを開き、講座の内容を読んでから申込方法を調べようとしています。「講座一覧」のページでは、サイト名、検索欄、共通メニューの順に並んでいます。しかし「申込方法」へ移ると、メニューがサイト名や検索欄より前に移動し、メニュー内のリンクの順序も変わります。

利用者は、前のページと同じ場所を探しても目的の項目を見つけられず、見える範囲を動かして探し直す必要があります。スクリーンリーダーで順に読む人も、覚えた順序を頼りに次のリンクを探せなくなります。

達成するための改善例

同じサイトの各ページで、サイト名、検索欄、共通メニューの順序をそろえます。メニュー内も「講座一覧」→「申込方法」→「よくある質問」の順に保ち、現在のページを示すために項目を先頭へ移すことはやめます。

画面に表示する順序と、読み上げやキーボードでたどる元のHTMLの順序の両方を確認します。利用者は、前のページで覚えた手がかりを使って、同じメニューを見つけられます。

図の「改善した例」では、メニューのリンクを選ぶと図内のページ表示が切り替わります。表示中のページを文字でも示し、どのページへ移っても共通部分の順序が変わらないことを確認できます。

確認のポイント

  • 共通のメニューがある複数のページを比べたとき、ほかの共通部品との前後関係は保たれていますか。
  • 同じメニューのリンクは、ページが変わっても相対的に同じ順序で並んでいますか。
  • 見た目だけでなく、元のHTMLを読む順序でも、共通部分の順序が保たれていますか。
  • 詳細なメニュー項目を追加・削除しても、残る共通項目同士の順序は変わりませんか。
  • サイトが自動的に順序を変えている場合と、利用者が並べ替えなどの設定を選んだ場合を区別していますか。

条件と補足

対象は、同じページ一式で繰り返すナビゲーション

共通の目的を持ち、同じ制作者・グループ・組織が作ったページの集まりを「ウェブページ一式」と呼びます。この基準は、その中の複数のページで繰り返されるナビゲーションを扱います。

すべてのページに、必ず同じメニューを置くという要件ではありません。繰り返し表示するメニューやその項目があるとき、その相対的な順序をそろえます。

「相対的に同じ順序」は、同じ座標という意味ではない

間に項目を追加したり、一部の項目を省いたりしても、残る共通項目同士の前後関係を保つことはできます。例えば「講座一覧」と「申込方法」の間に、講座の種類を選ぶ詳細メニューを加える場合です。

画面幅に合わせてメニューを折り返したり、縦に並べたりすることを、一律に禁止する基準でもありません。各ページの共通部分を比べ、表示や読む順序の中で関係が保たれているかを確認します。

利用者が始めた順序の変更

利用者が自分に合う並び順を設定するなど、変更を自ら始めた場合には例外があります。単にリンクを選んで別ページへ移ったことと、メニューの並べ替えを選んだことは区別します。

関連する基準との違い

この基準は、繰り返すナビゲーションの順序を扱います。同じ機能のボタンやリンクを一貫した名前・記号などで識別できるようにすることは、3.2.4「一貫した識別性」で確認します。

一つのページの中で、意味や操作を保つ順序でキーボードのフォーカスを移すことは、2.4.3「フォーカス順序」でも確認します。順序をそろえるために、見た目だけをCSSで並べ替えればよいとは限りません。

参照資料

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