サイトアイコン IT & ライフハックブログ｜学びと実践のためのアイデア集

現在位置が伝わるナビゲーション設計｜パンくず、aria-current、ページタイトルの実装

greeden
opened program for working online on laptop

Photo by Rodrigo Santos on Pexels.com

現在位置とは、利用者がいま見ているページやサイト内の階層、選択中のメニュー項目を把握するための手掛かりです。
現在位置が見た目だけで示されていると、画面を見ない利用者には同じ情報が伝わりません。

ページタイトル、パンくず、ナビゲーションメニューを組み合わせ、現在の項目をコードでも識別できるようにすると、利用者は移動先を判断しやすくなります。
一方、キーボードフォーカスは「いま操作できる要素」を示すものであり、サイト内の現在位置とは役割が異なります。

現在位置が必要になる場面

利用者は、必ずしもトップページから順番に移動するとは限りません。
検索結果や共有されたURLから下層ページへ直接入った場合でも、ページ名と階層が分かれば、内容の範囲や戻り先を判断できます。

現在位置の手掛かりは、次のような場面で役立ちます。

現在位置とキーボードフォーカスの違い

「現在のページ」と「現在の操作対象」は、どちらも現在という言葉を使いますが、別の情報です。
同じ見た目で表すと区別しにくいため、それぞれに適した表示とマークアップを用意します。

伝える情報 意味 主な表し方
サイト内の現在位置 いま表示しているページや階層 ページタイトル、パンくず、メニューの現在項目
キーボードフォーカス Enterキーなどで次に操作する要素 リンクやボタンの輪郭、下線、背景など

メニューの現在項目が強調されていても、Tabキーを押したときのフォーカス位置は別の項目へ移動します。
現在位置の印とフォーカスの印を両方表示し、どちらか一方で代用しないことが判断の基準になります。

現在位置を伝える実装方法

ページタイトルでページ名を伝える

HTMLのtitle要素には、そのページの内容や目的を識別できる名前を設定します。
ブラウザのタブを切り替えるときに区別しやすいよう、固有のページ名を先に置き、必要に応じてサイト名を続けます。

<title>ウィジェット製品情報｜サイト名</title>

ページ内には、同じ内容を示す分かりやすい主見出しも必要です。
WordPressでは投稿タイトルがページの主見出しとして表示される構成を確認し、title要素と主見出しの名前が大きく食い違わないようにします。

パンくずで階層を示す

パンくずは、ホームから現在のページまでの階層を順番に示すナビゲーションです。
リンクを並べるだけでなく、nav要素に用途が分かる名前を付け、階層を順序付きリストで表します。

<nav aria-label="パンくず">
  <ol>
    <li><a href="/">ホーム</a></li>
    <li><a href="/products/">製品情報</a></li>
    <li><span aria-current="page">ウィジェット</span></li>
  </ol>
</nav>

aria-current="page"は、その要素が関連項目の集合内で現在のページを表すことを支援技術へ伝えます。
一つのパンくずやメニュー内で複数の項目に付けず、現在の一項目に限定します。
実装の考え方は、W3Cのパンくずのデザインパターンでも確認できます。

ナビゲーションメニューは見た目とコードで示す

現在のメニュー項目は、太字や下線などで視覚的に区別し、リンクにはaria-current="page"を付けます。
色だけを変える方法では、色の違いを認識しにくい利用者や画面読み上げを利用する人に状態が伝わりません。

<nav aria-label="主要メニュー">
  <ul>
    <li><a href="/about/">会社情報</a></li>
    <li><a href="/products/" aria-current="page">製品情報</a></li>
  </ul>
</nav>
nav a[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 0.15em;
}

aria-currentは、見た目を自動で変える属性ではありません。
属性を状態の基準にしてCSSを適用すると、視覚表示と機械可読な状態を一致させやすくなります。

フォーカス表示は現在位置と分けて設計する

キーボードフォーカスは、キーボード操作が次に作用するリンク、ボタン、入力欄などを示します。
フォーカスの輪郭を消さず、背景や部品の色が変わっても見つけられる表示にします。

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

この例の色と太さが、すべてのデザインで十分とは限りません。
実際の背景、部品の境界、拡大表示で見え方を確認し、サイトの配色に合わせて調整します。
フォーカス表示の基準を詳しく確認する場合は、WCAG 2.2「2.4.13 フォーカスの外観」の解説も参照してください。

WCAG 2.2との対応関係

現在位置に関係する設計は、一つの達成基準だけで評価するものではありません。
ページ名、構造、フォーカス、サイト内の位置を分けて確認します。

達成基準 レベル この記事との関係
2.4.2 ページタイトル A ページの内容や目的を説明するタイトルを付ける
2.4.7 フォーカスの可視化 AA キーボードフォーカスが見える操作方法を用意する
2.4.8 位置 AAA 一連のページ内で利用者の位置を確認できる情報を用意する
1.3.1 情報及び関係性 A 見た目で示した構造や関係をコードまたはテキストでも伝える

位置に関する達成基準を詳しく読む場合は、サイト内のWCAG 2.2「2.4.8 位置」の解説を参照してください。

現在位置を確認するテスト手順

自動チェックは、属性の値や一部のマークアップ上の問題を見つける助けになります。
ただし、ページ名が内容を正しく説明しているか、パンくずの階層が実際の情報構造と一致しているかまでは、ツールだけで判断できません。

  1. ページタイトルを確認する：複数のページをタブで開き、タイトルだけで目的のページを区別できるか確認します。
  2. 下層ページへ直接入る：検索結果やURLから開いた想定で、主見出しとパンくずから現在位置を理解できるか確認します。
  3. キーボードだけで移動する：TabキーとShiftキーを使い、フォーカスが常に見え、移動順序を追えるか確認します。
  4. 画面読み上げで状態を聞く：パンくずのナビゲーション名、リスト構造、現在のページが伝わるか確認します。
  5. 見た目を変えて確認する：拡大表示や配色の変更後も、現在項目とフォーカスを区別できるか確認します。

WAVEやaxeなどの使い方を比較したい場合は、Webアクセシビリティチェックツールのガイドも役立ちます。
W3Cも、評価ツールだけではアクセシビリティ基準への適合を判断できず、知識を持つ人による評価が必要だと説明しています。

公開前の確認項目

現在位置は、一つの目印で伝える情報ではありません。
ページタイトルでページを識別し、パンくずで階層を示し、メニューで現在項目を伝え、フォーカスで操作対象を示すことで、それぞれの手掛かりが補い合います。

当社は、ウェブアクセシビリティの導入と運用を支援するUUU ウェブアクセシビリティウィジェットツールを提供しています。
アクセシビリティ改善を検討している方は、サービスの詳細をご覧ください。

モバイルバージョンを終了