【実務・中級編】aria-current属性による現在位置の明示 – HTML実践ガイド

なぜ「今いる場所」を伝えるのがプロの仕事なのか？ナビゲーション実装の作法

フロントエンド開発の現場で、意外と見落とされがちなのが「ナビゲーションの現在地表示」です。CSSでなんとなく色を変えて、「はい、完成」としていませんか？

ビジュアルだけで「ここが現在のページです」と伝えるのは、実は半分しか仕事をしていません。視覚情報に頼れないユーザーや、支援技術（スクリーンリーダー）を利用するユーザーにとって、CSSによる色変えだけではその意味が伝わらないからです。

今回は、実務で明日から即座に使える、`aria-current=”page”` を活用したアクセシブルなナビゲーション実装について、技術の裏側から解説します。

—

aria-current=”page” とは何か？

`aria-current` は、ナビゲーションのセット内で「現在地」を明示するための属性です。値として `page` を指定することで、ブラウザや支援技術に対して「このリンク先が、今ユーザーが閲覧しているページそのものである」というセマンティックな情報を伝えます。

ブラウザはどう処理しているのか

ブラウザのアクセシビリティツリー（ブラウザがOSに伝えているDOMの構造図）において、`aria-current=”page”` が設定された要素は、単なるリンクとしてではなく、「現在の文脈としてのリンク」という特別なノードとして扱われます。

例えば、スクリーンリーダー（NVDAやVoiceOverなど）は、この属性を検知すると、「現在のページ」といった補助的な情報を読み上げます。これにより、ユーザーは自分がメニューの中のどこにいるのかを迷うことなく把握できるのです。

—

現場で使える！堅牢な実装サンプル

では、実際のコードを見ていきましょう。ただ属性を付けるだけでなく、CSSによる装飾とCSSの属性セレクタを組み合わせるのが、今のベストプラクティスです。

HTML構造

CSSの工夫（属性セレクタを活用する）

ここで重要なのは、HTMLに付与した属性をCSSのフックとして使うことです。クラスを付け替えるよりも、属性の状態に応じてスタイルを適用する方が、ロジックとマークアップの疎結合を保てます。

.nav-list a {
text-decoration: none;
color: #333;
}

/ 属性セレクタを使用して現在地をスタイルする /
.nav-list a[aria-current=”page”] {
color: #007bff;
font-weight: bold;
/ 視覚的にも「現在のページ」であることを強調する /
border-bottom: 2px solid #007bff;
}

/ 擬似クラスとの併用で、よりリッチなUXを /
.nav-list a:not([aria-current=”page”]):hover {
text-decoration: underline;
}

—

実務でハマらないための「心得」

1. リンク先と現在地を混同しない

`aria-current` は、あくまで「現在のページ」を示すものです。「現在のセクション」や「現在のステップ」など、状況に応じて `step` や `location` といった他の値も存在しますが、Webサイトのナビゲーションであれば原則として `page` を使います。

2. 「現在地」のリンクは無効化すべきか？

よく議論になるのが、「現在のページのリンク自体を無効化（``タグを外す）すべきか」という点です。
結論としては、リンクは残したまま `aria-current=”page”` を付与するのが今の主流です。