今いるページをナビゲーションに示す：現在地とフォーカスを分ける

案内ページを開いているのに、メニューを見ると今どこにいるか分からない。今いるページをナビゲーションに示すには、現在地の印と、キーボードで操作中の場所を別に扱います。色の変更だけでなく、HTMLにも現在のページを記述しましょう。

題材は架空の資料室の三ページです。リンクとCSSのクラスを少し書ける人向けに、静的なHTMLのナビゲーションを作ります。エディターとブラウザーを用意してください。ページを切り替えるアプリの実装や、スクロール位置に連動する目次は扱いません。

ページの現在地は、フォーカスが動いても残す

資料室のページを「展示」「利用案内」「アクセス」とします。利用案内を開いたときは、ナビゲーションの利用案内に現在地の印が必要です。一方、Tabキーでアクセスへ移っただけでは、まだ開いているページは利用案内のままです。

この二つを同じ背景色だけで表すと、操作するたびに現在地が変わったように見える場合があります。今回は現在地に「現在のページ」という文字と太字を使い、キーボード操作の対象には外側の枠を使います。異なる意味に、異なる表示を割り当てます。

HTMLでは該当するリンクへaria-current="page"を付けます。MDNのaria-currentの説明で、関連する項目の中の現在地を示し、一組の中で現在の項目を一つにする考え方を確認できます。pageはページを指す値です。

これはリンクを押せなくする属性でも、ページを移動させる処理でもありません。今回の例では現在地のリンクも同じページへのリンクとして残します。クリック後の行き先を変えず、その行き先が今開いているページだと伝えるために使います。

利用案内のリンクに、現在地を一つ付ける

新しい練習用フォルダに、次の全体をguide.htmlとして保存します。まず利用案内だけを開き、文字と属性の対応を確認します。展示とアクセスのリンク先は、この後で同じフォルダへ作ります。既存サイトのファイルを上書きする練習ではありません。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>利用案内｜架空の資料室</title>
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.8; }
    main, nav { max-width: 45rem; margin-inline: auto; }
    nav ul { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0; list-style: none; }
    nav a { display: inline-block; padding: 0.5rem; color: #174ea6; }
    nav a[aria-current="page"] { font-weight: bold; background: #fff0dd; }
    nav a:focus-visible { outline: 3px solid #174ea6; outline-offset: 3px; }
  </style>
</head>
<body>
  <nav aria-label="資料室の主なページ">
    <ul>
      <li><a href="exhibits.html">展示</a></li>
      <li><a href="guide.html" aria-current="page">利用案内<span>（現在のページ）</span></a></li>
      <li><a href="access.html">アクセス</a></li>
    </ul>
  </nav>
  <main>
    <h1>利用案内</h1>
    <p>架空の資料室の練習ページです。</p>
  </main>
</body>
</html>

navには、このナビゲーションを区別する名前を付けています。CSSはaria-current="page"を持つリンクを選んで現在地の見た目を付けます。別のcurrentクラスも同時に管理する構成にせず、属性と装飾が離れにくい形にしました。

「現在のページ」の文字も残しているため、色を使わずに読んでも該当する項目を見分けられます。この文字とaria-currentによる読み上げが重なって聞こえる環境もあり得るので、実際の読み上げ結果は別途確認します。属性があることだけで、すべての環境の伝わり方を確認済みとはしません。

W3C APGのパンくず例も、現在の文書を指すリンクへaria-current="page"を付けています。ここではパンくずの階層ではなく、同じ階層の三ページへ応用した練習例です。

複製した二ページでは、印と本文を一組で移す

guide.htmlを同じフォルダへ二つ複製し、exhibits.htmlとaccess.htmlにします。展示ではtitleとh1を展示に変更し、利用案内からaria-currentと「現在のページ」のspanを外して展示へ移します。アクセスでも同様です。リンクの並び順とhrefは三ページで共通にします。

最初の失敗は、本文だけをアクセスへ変えて、利用案内の印を残すことです。アクセスの内容を読んでいるのに、ナビゲーションは利用案内が現在地だと伝えます。修正では開いたファイル名、h1、印を付けたリンクのhrefを三点で照合します。

再確認は、access.htmlを直接開き、h1がアクセスで、aria-currentを持つリンクもaccess.htmlを指すことです。ナビゲーションから移動してきた場合だけでなく、直接開いた場合にも同じ現在地が出る構成にします。

二つ目の失敗は、新しい印を足すだけで古い印を外さないことです。一組のナビゲーションに二つの現在地が残ります。修正では三つのリンクを確認し、属性と表示文を今回の一項目だけへ集めます。再確認では、現在地の数が一つであることと、その一つが正しい行き先であることを両方見ます。

ページ名の取り違えが多ければ、titleをページごとに確認する記事と合わせて一覧表を作れます。今回はタブ名だけでなく、本文とナビゲーションの対応まで点検します。

別のリンクへTabで移り、二つの位置を見分ける

利用案内を開き、Tabキーでアクセスのリンクへ進みます。この時点の期待結果は、アクセスにフォーカスの枠があり、利用案内の「現在のページ」は残っていることです。Enterを押して移動した後に、現在地がアクセスへ変わります。

もしTabを押すたび現在地の文字が移るなら、操作対象と閲覧中のページを混同した処理がないか調べます。静的な三ページでは、フォーカスの移動でaria-currentを書き換えるJavaScriptは不要です。フォーカス表示の点検はキーボードの現在位置の記事へ進めます。

また、aria-currentを付けるためにhrefを削除したり、role="button"を追加したりする必要はありません。この例ではページへの移動という役割を維持します。現在地をリンクにしない設計を選ぶなら、そこがTabの移動先ではなくなることも含め、サイト全体の方針として決めます。

タブの選択や記事の所属を、ページの現在地と混ぜない

画面内のパネルを切り替えるタブには、選択を表す別の設計が必要です。aria-current="page"を付けたリンクだけで、タブ操作が完成するわけではありません。今回の対象は、独立したHTML文書へ移る通常のナビゲーションです。

同様に、展示の詳細ページを開いたとき、親の「展示一覧」は今の文書そのものではありません。所属カテゴリを強調したいことと、現在のページを示すことを区別します。詳細ページにはパンくずなどで現在の文書を示す案を考え、親リンクへ無条件にpageを付けないようにします。

ヘッダーとフッターに同じナビゲーションがある場合は、それぞれの組の中で現在地を確認します。「文書全体で属性が一つ」という条件にして、もう一方の案内を消す必要はありません。この練習では一組だけなので、一組三リンクの対応に絞れます。

移動先の見出しと、現在地の印を照合する

三ページを作り、ファイル名、h1、現在地のhrefを一行ずつ書きます。解答は展示・利用案内・アクセスがそれぞれ自分のファイルを指す三行です。次を確認してください。

• 各ページを直接開いても、一組のナビゲーションに現在地が一つだけある。
• 別のリンクへTabで移っても現在地は変わらず、フォーカス枠を区別できる。
• Enterで移動すると、移動先のh1と現在地のリンクが一致する。
• 狭い画面で折り返しても「現在のページ」の文末とフォーカス枠を確認できる。

読み上げを使える場合は、リンク名と現在地の情報も聞いて記録します。使えない場合は未実施と残しましょう。アクセシビリティの無料レッスンで操作を点検するときも、閲覧しているページと、次に操作するリンクを別々に説明できることが今回の完成条件です。