ナビゲーションメニュー
nav
<nav> はサイト内の主要なナビゲーションリンクをグループ化するセマンティックな要素。 スクリーンリーダーはランドマークとして認識し、ユーザーがナビゲーションへ素早くジャンプできる。
デモ：水平ナビゲーション（ヘッダー型）
「ホーム」に aria-current="page" が付いており、現在のページであることを示しています。
<nav aria-label="メインナビゲーション">
<ul>
<li><a href="/" aria-current="page">ホーム</a></li>
<li><a href="/products">製品</a></li>
<li><a href="/pricing">料金</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>デモ：垂直ナビゲーション（サイドバー型）
メインコンテンツエリア。サイドバーの「ダッシュボード」が現在のページです。
<nav aria-label="サイドバーナビゲーション">
<ul>
<li><a href="/dashboard" aria-current="page">ダッシュボード</a></li>
<li><a href="/profile">プロフィール</a></li>
<li><a href="/settings">設定</a></li>
<li><a href="/notifications">通知</a></li>
</ul>
</nav>デモ：パンくずナビゲーション
<!-- パンくずには aria-label="パンくず" と ol を使う -->
<nav aria-label="パンくず">
<ol>
<li><a href="/">ホーム</a></li>
<li aria-hidden="true">›</li>
<li><a href="/categories">カテゴリ</a></li>
<li aria-hidden="true">›</li>
<!-- 現在のページには aria-current="page" -->
<li><a href="/current" aria-current="page">現在のページ</a></li>
</ol>
</nav>区切り文字（›）にはaria-hidden="true" を付けて スクリーンリーダーから隠します。CSS の ::before で区切り文字を追加する方法も一般的です。
NEWaria-current="page" — 現在のページを示す
ナビゲーション内で現在表示しているページのリンクにはaria-current="page" を付けます。 スクリーンリーダーが「現在のページ」として読み上げ、視覚的なスタイルと同等の情報をユーザーに伝えます。
<!-- aria-current="page" で現在ページを示す -->
<nav aria-label="メインナビゲーション">
<ul>
<li><a href="/" aria-current="page">ホーム</a></li>
<li><a href="/about">概要</a></li>
</ul>
</nav>
/* CSS で aria-current="page" のスタイルを当てる */
[aria-current="page"] {
font-weight: bold;
color: #1d4ed8;
border-bottom: 2px solid currentColor;
}
/* aria-current は "page" 以外の値も使える */
/* "step" : ウィザードの現在ステップ */
/* "date" : カレンダーの選択日 */
/* "true" : その他の文脈での「現在」 */比較：nav vs div（セマンティックな要素 vs 汎用要素）
視覚的には <div> で同じレイアウトを作れますが、<nav> を使うことでセマンティックな意味が加わります。
| 項目 | <nav> | <div> |
|---|---|---|
| ARIAランドマーク | ✅ navigation ロールを持つ | ❌ ランドマークなし |
| スクリーンリーダー | ナビゲーションとして認識・ジャンプ可能 | 認識されない |
| SEO | ナビゲーションとして解釈される可能性 | 意味を持たない |
| スタイリング | div と同様（ブロック要素） | 同上 |
| 適切な用途 | 主要なナビゲーションリンク群 | 意味のないグループ化 |
<!-- ❌ div を使った場合（セマンティクスなし） -->
<div class="nav">
<a href="/">ホーム</a>
<a href="/about">概要</a>
</div>
<!-- ✅ nav を使った場合（スクリーンリーダーがランドマークとして認識） -->
<nav aria-label="メインナビゲーション">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">概要</a></li>
</ul>
</nav>
<!-- ⚠️ nav はすべてのリンクに使うわけではない -->
<!-- フッターの著作権リンクや、記事内のリンクには使わない -->
<!-- 「主要なナビゲーション」にのみ使う -->Tips複数の nav 要素には aria-label が必須
1ページに複数の <nav> 要素を使う場合（例：ヘッダーナビ＋サイドバーナビ＋パンくず）、 それぞれに aria-label を付けて区別します。 付けないと、スクリーンリーダーが「ナビゲーション、ナビゲーション、ナビゲーション」と読み上げてしまいます。
<!-- 複数の nav には aria-label で名前を付ける -->
<header>
<nav aria-label="メインナビゲーション">
<!-- グローバルメニュー -->
</nav>
</header>
<aside>
<nav aria-label="サイドバーナビゲーション">
<!-- カテゴリ一覧など -->
</nav>
</aside>
<main>
<!-- 記事内の目次 -->
<nav aria-label="目次">
<ol>...</ol>
</nav>
</main>
<footer>
<nav aria-label="パンくず">
<ol>...</ol>
</nav>
</footer>
<!-- aria-labelledby で見出しを参照する方法も使える -->
<nav aria-labelledby="sidebar-heading">
<h2 id="sidebar-heading">カテゴリ</h2>
<ul>...</ul>
</nav>まとめ
| ポイント | 詳細 |
|---|---|
| セマンティクス | 主要なナビには <nav> を使う（div ではなく） |
| 複数 nav の区別 | 各 <nav> に aria-label を付ける |
| 現在ページ | 現在のページのリンクに aria-current="page" |
| パンくず | aria-label="パンくず" + <ol> を使う |
| 区切り文字 | パンくずの区切り文字に aria-hidden="true" |
🤖 AIプロンプトテンプレート
以下について、AIへの質問プロンプト例を示します。 - `<nav>` と `<div>` の違いを、アクセシビリティ・SEO の観点から教えてください。 - 1 ページに複数の `<nav>` を使う場合、`aria-label` を付けるべき理由と具体的な例を教えてください。 - `<ul>` と `<ol>` のどちらを使うべきか、ナビゲーションメニューとパンくずリストで考え方は違いますか？ - `aria-current="page"` を付けることで、スクリーンリーダーにどんな情報が伝わりますか？ - パンくずリストのマークアップで区切り文字（›）に `aria-hidden="true"` を付ける理由を教えてください。
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。