ナビゲーションと情報設計のアクセシビリティ完全ガイド：見出し・ランドマーク・パンくず・サイト内検索・ページタイトルで「迷わないWeb」を作る（WCAG 2.1 AA）
概要サマリー（先に要点）
- アクセシビリティの“体験の核”は、操作以前に 「いまどこで、何ができて、どこへ行けるか」 が分かることですの。
- そのために重要なのは ①ページタイトル ②見出し構造 ③ランドマーク（header/nav/main/footer等） ④スキップリンク ⑤パンくず ⑥検索 ⑦現在地の表示 の7点セット。
- 見た目が整っていても、見出しが飛んでいたり、ランドマークが曖昧だと、スクリーンリーダー利用者やキーボード利用者は“地図なし”で歩くことになります。
- ナビゲーションは「メニューを増やす」ほど良くなるわけではなく、階層の整理・命名・一貫性で“迷いの発生率”を下げるのがポイント。
- 本記事には、すぐ使える 構造テンプレ（HTML例）、命名ルール、よくある落とし穴、5分スモークテスト を収録しています。
対象読者（具体）：Web編集者、IA/UXデザイナー、フロントエンドエンジニア、PM/ディレクター、自治体/公共サイト担当、EC/予約サイト運用者、QA/テスター、デザインシステム担当
アクセシビリティレベル：WCAG 2.1 AA 準拠を目標（主に 1.3.1、2.4.1、2.4.2、2.4.3、2.4.6、2.4.7、3.2.3、4.1.2）
1. はじめに：ナビゲーションは“読む前に使い始める”アクセシビリティ
Webは読むだけでなく、探し、移動し、比較し、手続きを完了する場所ですわ。
けれど、ナビゲーションが分かりにくいと、利用者は「何をすればいいか」以前に「どこにいるか」が分からなくなります。特に、スクリーンリーダーを使う方は、視覚的なメニュー配置や余白のヒントに頼れません。キーボードで操作する方は、Tab移動の順序や“見出し・ランドマーク”が崩れていると、目的地までたどり着くのに何十回もTabを押すことになります。
逆に言えば、情報設計とナビゲーションが整うと、アクセシビリティは驚くほど安定します。ページが増えても、コンテンツが更新されても、利用者の「迷い」が減り、支援技術でも同じ地図を持てるようになるからですの。
2. 「迷い」を生む原因はだいたい7つ：まずは地図の部品をそろえる
ナビゲーションの混乱は、難しい技術というより“地図の部品不足”で起きます。まず、次の7点が揃っているかを確認しましょう。
- ページタイトル：ブラウザタブに表示される「いま開いているページ名」
- 見出し構造：h1→h2→h3…で、内容の階層が追える
- ランドマーク：header/nav/main/footer/aside などで大きな区切りが分かる
- スキップリンク：最初に「本文へ」へ飛べる
- パンくず：階層と現在地が分かる
- サイト内検索：探すための非常口がある
- 現在地の表示：メニューで「今いる場所」が視覚・音声の両方で分かる
この7点は、プロダクトの種類（コーポレート、EC、行政、SaaS）に関係なく効きますの。
3. ページタイトル：最小コストで最大効果の“現在地ラベル”
3.1 良いページタイトルの型
ページタイトルは、支援技術利用者にとって“ページの表札”です。
おすすめの型はこれです：
- 「ページ固有名｜サイト名」
- 一覧なら 「カテゴリ名（一覧）｜サイト名」
- 詳細なら 「商品名（詳細）｜サイト名」
例：
- 「料金プラン｜○○サービス」
- 「アクセシビリティ声明｜○○社」
- 「A4トートバッグ（詳細）｜○○ストア」
3.2 悪い例（よくある）
- 全ページが「TOP」
- 全ページが「無題」
- 逆に長すぎて要点が見えない（キーワード詰め込み）
3.3 SPA/画面遷移が少ないサイトの注意
画面を切り替えてもタイトルが更新されないと、利用者は“同じ画面にいる”と誤認します。ルーティング時にタイトルを更新する運用を標準化しましょう。
4. 見出し構造：スクリーンリーダーの「目次」を作る
4.1 もっとも大切なルール
- h1は基本1つ（ページの主題）
- 見出しは 順番に（h2の次にいきなりh4にしない）
- 見た目の大きさではなく、意味の階層で選ぶ
4.2 よくある“見た目優先”の事故
- デザイン上の理由で、見出しをdiv＋太字で作ってしまう
- h1が複数ある（カードのタイトルをh1にしてしまう）
- セクションの区切りが見出しではなく装飾線だけ
4.3 使える見出しのサンプル
<h1>配送と返品について</h1>
<h2>配送</h2>
<h3>配送日数</h3>
<h3>送料</h3>
<h2>返品</h2>
<h3>返品できる条件</h3>
<h3>返金の流れ</h3>
見出しが整うだけで、読み上げ利用者は「見出し一覧」から一気に目的地へ移動できますの。編集者・ライターの方にとっても、構成が崩れにくくなるのでメリットが大きいです。
5. ランドマーク：ページの“大きな区切り”を支援技術に伝える
5.1 ランドマークの基本形（推奨）
<header>
<!-- ロゴ、共通メニューなど -->
</header>
<nav aria-label="グローバルナビゲーション">
<!-- 主要リンク -->
</nav>
<main id="content">
<!-- 本文 -->
</main>
<footer>
<!-- フッター -->
</footer>
5.2 navが複数あるときのコツ
ヘッダーのナビ、フッターのナビ、ページ内目次…と複数になる場合は、aria-labelで区別します。
- 「グローバルナビゲーション」
- 「ページ内目次」
- 「フッターナビゲーション」
5.3 asideの使いどころ
関連リンクや補助情報はasideへ。ただし、重要導線をasideに追いやると見落とされやすいので、主導線はmain内に置くのが基本ですわ。
6. スキップリンク：Tab1回目で“本文へ”入れるやさしさ
スキップリンクは、特にキーボード利用者に効きます。ヘッダーが長いサイトほど、最初の1回のTabで本文に入れるかどうかが体験を決めますの。
<a class="skip" href="#content">本文へスキップ</a>
<main id="content" tabindex="-1">…</main>
.skip { position:absolute; left:-9999px; }
.skip:focus { left:1rem; top:1rem; padding:.5rem .75rem; background:#111; color:#fff; border-radius:.5rem; }
ポイントは「フォーカスされたら見える」こと。常時表示でなくて大丈夫です。
7. パンくず：階層と現在地を“言葉で”示す
パンくずは視覚だけの装飾にしないで、構造としても分かるようにします。
<nav aria-label="パンくずリスト">
<ol>
<li><a href="/">ホーム</a></li>
<li><a href="/guide/">ご利用ガイド</a></li>
<li aria-current="page">返品について</li>
</ol>
</nav>
- aria-current=“page” で現在地を明確に
olを使うと「階層」が自然に伝わりますの- 「ホーム」「カテゴリ」「ページ名」の命名はサイト全体で統一しましょう
8. 現在地の表示：ナビは“戻る”より先に“迷わない”を作る
8.1 グロナビの現在地
視覚的には強調（下線・太字・背景）しつつ、支援技術には aria-current を使います。
<nav aria-label="グローバルナビゲーション">
<a href="/about/" aria-current="page">会社情報</a>
<a href="/service/">サービス</a>
<a href="/contact/">お問い合わせ</a>
</nav>
8.2 「どこにいるか」が分かるUI文言
メニュー名が抽象的だと、現在地を示しても迷います。
「情報」「その他」「サポート」など広すぎる言葉は、できるだけ具体化してあげてくださいね。
- 「サポート」→「ヘルプ・サポート」
- 「情報」→「ご利用ガイド」「お知らせ」
- 「その他」→（できれば廃止して分解）
9. サイト内検索：迷った人の“最後の出口”をアクセシブルに
検索はナビの補助輪です。特に情報量が多いサイトでは、検索のアクセシビリティがそのまま“サイトの使いやすさ”になります。
9.1 検索フォームの基本
- ラベルは可視（プレースホルダーだけにしない）
- 入力例は
aria-describedbyで補足 - 検索ボタンはアイコンだけにしない（
aria-label必須）
<form role="search" aria-label="サイト内検索">
<label for="q">サイト内検索</label>
<input id="q" name="q" type="search" aria-describedby="q-hint">
<p id="q-hint">例：返品、送料、請求書</p>
<button type="submit">検索</button>
</form>
9.2 検索結果のアクセシブルな提示
- 結果件数をテキストで表示
- 絞り込み後は
role="status"で件数更新を伝えると親切 - 0件のときは「次に何をするか」を示す（言い換え提案、カテゴリ誘導）
例（0件の文言）：
「一致する結果がありませんでした。別の言葉で検索するか、『ご利用ガイド』から探してください。」
10. よくある落とし穴：ナビゲーションで事故が起きる典型パターン
| ありがちな失敗 | 何が起きる？ | 直し方 |
|---|---|---|
| 見出しがdiv太字だけ | 見出し一覧が使えない | h2/h3を正しく付ける |
| navが複数なのにラベルなし | どのnavか分からない | aria-labelで区別 |
| スキップリンクなし | Tab地獄 | 本文へスキップ追加 |
| 現在地が色だけ | 色覚特性で分からない | 下線/太字＋aria-current |
| パンくずが装飾のspan | 階層が伝わらない | nav＋ol構造に |
| メニュー名が抽象的 | 何があるか想像できない | 動線に合わせて具体化 |
| 検索がアイコンだけ | 音声入力/読み上げで不明 | ラベル/aria-label付与 |
11. 5分スモークテスト：ナビと情報設計の最小確認
- ページタイトルが内容に合っている（タブで分かる）
- h1が1つで、見出しが飛んでいない
- ランドマーク（nav/main等）で大区切りに移動できる
- 最初のTabでスキップリンクが使える
- グロナビに現在地があり、
aria-currentが付いている - パンくずで階層が追えて、現在ページが分かる
- 検索フォームにラベルがあり、結果件数や0件時の導線がある
- キーボードだけで「探す→移動→戻る」が完了できる
これが通れば、ナビの大事故はほぼ防げますの。
12. 対象読者にとっての価値（具体）
- スクリーンリーダー利用者：見出し一覧・ランドマーク・パンくずで、目的の場所へ最短で移動でき、ページを“理解して探索”できます。
- キーボード利用者：スキップリンクと論理順序で、移動が短くなり、疲労が大きく減ります。
- 認知特性のある方：現在地や階層が明確だと、迷子の不安が減り、手続きの完了率が上がります。
- 高齢者・拡大利用者：構造がしっかりしていると、拡大しても“どこを見ているか”を見失いにくいです。
- 運用チーム：見出しと命名が統一されることで、更新時の品質が揺れにくく、SEOや内部回遊にも良い影響が出ます。
13. アクセシビリティレベルの評価（本記事の到達点）
- WCAG 2.1 AA に直結する観点
- 2.4.2 ページタイトル：適切なタイトル付け
- 2.4.1 ブロックの回避：スキップリンク
- 1.3.1 情報と関係：見出し、リスト、ランドマークの構造
- 2.4.6 見出しとラベル：検索・ナビのラベル明確化
- 2.4.3 フォーカス順序 / 2.4.7 フォーカス可視：キーボード移動の安定
- 3.2.3 一貫したナビゲーション：命名と配置の統一
- 4.1.2 名前・役割・値：aria-current、aria-label 等の適切な付与
- “迷わない”情報設計は、AA準拠の達成だけでなく、利用者の安心と完了率に直結します。
14. まとめ：ナビゲーションは“やさしい地図”でできている
- ページタイトル・見出し・ランドマークで「いまここ」を明確にする。
- スキップリンクで、本文へ最短で入れるようにする。
- パンくずと現在地で、階層と位置を言葉で伝える。
- 検索は迷った人の出口。ラベルと結果提示を丁寧に。
- 命名と配置は一貫性が命。抽象語はできるだけ具体化する。
- 5分スモークテストを習慣化し、更新で迷いが増えないようにする。
ナビゲーションは、目立たなくても、使う人の安心を支える“地図”ですわ。
その地図を整えることは、誰かを置き去りにしないための、とても大切な設計です。あなたのサイトが、迷わず目的にたどり着ける場所になりますように。