2.4.8 現在位置

要件

ウェブページの集合の中で、ユーザーが現在位置しているページを特定できるように、メカニズムを提供すること。

内容のポイント

項目	内容
「現在位置」とは？	ユーザーがどのページにいるのか、サイト全体のどこに位置しているかを把握できる情報のこと
想定されるUI	パンくずリスト（breadcrumb）、ナビゲーションハイライト、ページタイトルなど
対象となる状況	ウェブサイト全体が複数の階層やカテゴリに分かれているような構造的な場合

OKな実装例（HTML）

<nav aria-label="パンくずリスト">
  <ol>
    <li><a href="/">ホーム</a></li>
    <li><a href="/product">製品情報</a></li>
    <li aria-current="page">高性能モデルA</li>
  </ol>
</nav>

• aria-current=”page” により、支援技術でも現在位置が認識できる
• パンくず形式でページ階層が分かりやすい

他にも使われる手段

方法	内容
パンくずリスト	よくある手法。階層構造と現在位置を明示
グローバルナビの現在ページの強調	現在のカテゴリを色や太字で強調
サイドバーやタブの現在位置強調	UI上で「今どこか」が分かる視覚的表示
<title> 要素や見出しによる文脈	ページタイトルと見出しで明示することも補助的に有効

NGな例

例	なぜNGか
パンくずがない or 階層構造が不明瞭	自分が今どの階層にいるかが不明になる
色やデザインだけに頼って「今ここ」表示	色弱の方などには認識しにくい（補助的にaria-currentなどが必要）
ナビゲーション上で全ての項目が同じ表示	どれが現在位置か分からない

利点

• ユーザーの現在地を明示し、迷子になることを防止
• 関連ページへの再訪問・回遊性の向上
• スクリーンリーダー利用者が、ページの文脈を把握しやすくなる
• 情報構造を理解しやすく、ユーザー満足度とUXの向上

チェックリスト

• パンくずリストや現在位置表示があるか？
• 現在位置が視覚的にも認識できるか？
• 支援技術でも現在位置が伝わるか？（例：aria-current）
• 誤認しやすいナビゲーションになっていないか？

まとめ

まとめ	内容
達成基準	2.4.8 現在位置
レベル	AA
要件	ページ内において現在位置を分かるようにする
代表的実装	パンくずリスト・aria-current・ナビゲーションの強調
利点	ユーザーの操作性向上・回遊性アップ・支援技術対応

特に階層構造のあるBtoBサイトや製品情報ページ、FAQページなどでは、現在位置の可視化が有効です。

一覧に戻る