ナビゲーション

ランドマーク

解説あり

Landmarks

header / nav / main / footer などでページを領域分けし、素早い移動を可能に。

ランドマークとは？

ランドマークとは、<header>・<nav>・<main>・<footer>・<aside> といった、ページを意味のある領域に区切るHTML 要素のことです。「ここはヘッダー」「ここが本文」「ここはフッター」を、見た目だけでなくプログラム的に伝えます。

目で見れば一目でわかるレイアウトも、<div> だけで作ると支援技術には「のっぺりした文字の塊」にしか見えません。ランドマークは、その地図を支援技術に渡す役割を果たします。

なぜアクセシビリティが大事なの？

スクリーンリーダー利用者は、ランドマーク一覧（ローター）から「本文(main)へ」「ナビゲーションへ」と領域単位で一気に移動できます。<div> だらけだと、この移動手段が丸ごと使えません。
キーボード利用者には、ページ先頭のスキップリンク（「本文へスキップ」）が効きます。毎回ヘッダーのリンクを Tab で通り抜けずに、本文へ一足飛びできます。
<h1> や見出しが正しくあると、見出しジャンプでページの構造を素早く把握できます。

ライブデモ（推奨実装）

下は、ランドマークで区切ったページ構造の見取り図です。各ブロックが、対応する HTML 要素（と暗黙のロール）を表しています。実際の意味づけは、次の「実装：推奨パターン」の HTML が行います。

ランドマークで区切ったページの見取り図

本文へスキップ（スキップリンク）

<header>banner（サイト共通の上部）ロゴ＋ <nav aria-label="グローバル">

<main>main（本文。1ページに1つ）<h1> もここに1つ

<aside>complementary（補足）

ポイント：main と h1 はページに1つだけ。nav が複数あるときは aria-label で区別。補足情報は aside。スクリーンリーダーはこれらの境目を使って素早く移動できます。

ポイント

スクリーンリーダーには「ランドマーク一覧」を開く操作があります（VoiceOver なら VO+U のローター）。そこに banner / navigation / main / complementary / contentinfo が並び、選ぶだけでその領域へジャンプできます。これが <div> では得られない価値です。

キーボード操作

キー	動作	必須/任意
`Tab`（ページ先頭で）	最初にスキップリンクが現れ、`Enter` で本文へ飛べる	必須（推奨）
SRのランドマーク移動	領域（banner/nav/main/…）単位でジャンプ（支援技術側の操作）	必須（構造があれば自動）
SRの見出しジャンプ	`h1`〜`h6` を辿ってページ構造を把握（支援技術側の操作）	必須（見出しがあれば自動）

補足

ランドマーク自体に特別なキー操作を実装する必要はありません。正しい要素を使うだけで、支援技術側の移動機能が自動的に効きます。スキップリンクだけは自分で用意します（先頭リンク＋ <main id="main">）。

必要な WAI-ARIA / ロール

要素	暗黙のロール	意味・注意
`<header>`（最上位）	`banner`	サイト共通の上部。ページに1つ。
`<nav>`	`navigation`	複数あるなら `aria-label` / `aria-labelledby` で区別する。
`<main>`	`main`	本文。1ページに1つだけ。`<h1>` も1つ。
`<aside>`	`complementary`	本文の補足（関連情報・広告など）。
`<footer>`（最上位）	`contentinfo`	著作権・運営者情報など。ページに1つ。

実装：推奨パターン（Good）

良い例 / 推奨

意味に合ったネイティブ要素を使うだけ。<main> と <h1> は1つ、<nav> 複数はラベルで区別。先頭にスキップリンク。

マークアップ:

<body>
  <!-- ページ先頭：キーボード利用者が本文へ飛べる -->
  <a class="skip-link" href="#main">本文へスキップ</a>

  <header>            <!-- role="banner" -->
    <a href="/">サイト名</a>
    <nav aria-label="グローバル">  <!-- 複数 nav はラベルで区別 -->
      <ul>
        <li><a href="/products">商品</a></li>
        <li><a href="/about">会社情報</a></li>
      </ul>
    </nav>
  </header>

  <main id="main">    <!-- role="main"。ページに1つだけ -->
    <h1>ランニングシューズ</h1>  <!-- h1 も1つだけ -->
    <p>本文…</p>

    <aside aria-label="関連商品">  <!-- role="complementary" -->
      <h2>おすすめ</h2>
    </aside>
  </main>

  <footer>            <!-- role="contentinfo" -->
    <p>© 2026 サイト名</p>
  </footer>
</body>

補足

スキップリンクは「普段は見えず、Tab で来たら見える」のが定番です（:focus で表示）。完全に隠すと使えないので、見えなくする場合もフォーカス時に必ず画面内へ出します。

アンチパターン（Bad）

下は同じ見た目を全部 <div> で作った例です。マウスの人には違いが分かりませんが、支援技術には領域も見出しも一切伝わりません。

全部 div のページ構造

サイト名／商品／会社情報（div）

ランニングシューズ（ただの太字テキスト）／本文…（div）

試してみよう：スクリーンリーダーのランドマーク移動・見出しジャンプが一切効きません。「本文へスキップ」も無く、ヘッダーのリンクを毎回 Tab で通り抜ける必要があります。

<!-- ❌ 全部 div -->
<body>
  <div class="header">
    <div class="logo">サイト名</div>
    <div class="menu">商品 / 会社情報</div>
  </div>
  <div class="content">
    <div class="title">ランニングシューズ</div>
    <div>本文…</div>
  </div>
  <div class="footer">© 2026 サイト名</div>
</body>
<!-- ランドマークが1つも無く、見出しも無い -->

悪い例 / 避ける

この実装の問題点:

ランドマークが無い — main/nav/banner などへ領域移動できない。
見出しが無い — <h1> 等が無く、見出しジャンプで構造を把握できない。
スキップリンクが無い — 本文まで毎回 Tab で辿る必要がある。
意味が見た目頼み — CSS が外れると、ただの文字列の羅列になる。

ポイント

どうしても <div> を使うなら role="banner" /role="main" 等を手で付ける必要があります。最初から<header> / <main> を使えば、ロールは無料で付いてきます。

実装チェックリスト

<header> / <nav> / <main> / <footer> で領域を区切っている
<main> はページに1つだけ
<h1> はページに1つだけ、見出しレベルが飛んでいない
<nav> が複数あるとき aria-label で区別している
本文の補足は <aside> にしている
先頭にスキップリンクがあり、フォーカス時に見える
ページ内の主要コンテンツがどれかのランドマークに含まれている

原文（英語）:Landmarks Pattern — W3C APG（新しいタブで開きます）