# ランドマークがない、または正しく置かれていないページ

Source: https://easeweb.dev/learn/landmarks
Topics: ページの構造 > ランドマークで主な領域が示され、すべての内容がその中にある (WCAG 1.3.1)
The fix: ページの各領域を、1回ずつ、最上位のランドマークとしてマークアップします。サイトのヘッダーとその上にあるものは header に、メニューは nav に、本文は1つの main に、フッターは footer に入れ、main の中に入れずに横に並べます。これらの要素を使うか、テンプレートの要素を変えられない場合は、今ある div に role="banner"、"navigation"、"main"、"contentinfo" を付けます。
Test with: screen reader
References: https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html https://www.w3.org/WAI/WCAG22/Techniques/html/H101 https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA11 https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/ https://html.spec.whatwg.org/multipage/grouping-content.html#the-main-element https://www.w3.org/TR/html-aam-1.0/ https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/header https://dequeuniversity.com/rules/axe/4.10/region https://dequeuniversity.com/rules/axe/4.10/landmark-one-main

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

## 場面

ある書店のページは、どれも同じレイアウトを使っています。いちばん上の細い帯に「$30以上のご注文で送料無料」とあり、その下にロゴの Harbour Books と4つのリンクのメニュー、次にページごとの本文（ここでは新刊の一覧）、最後に「お問い合わせ」と「返品」のあるフッターが続きます。新刊を見たいスクリーンリーダー利用者は、どのショップでもするように、ページ内の領域へ移動するためにスクリーンリーダーが用意しているランドマークの一覧を開くか、ランドマークからランドマークへ移動するキーを押します。このページでは一覧が空で、キーを押しても何も見つからないため、見出しで移動しない限り、帯、ロゴ、メニューのリンクをすべて上から順に聞くことになります。

その後のリニューアルで、ページは新しいアプリのレイアウトに移り、一覧は「メイン」「ナビゲーション」「メイン」と読むようになりました。最初の「メイン」はページのほぼ全体なので、選ぶとロゴに着きます。2つ目が本文です。ヘッダーとフッターにあたるバナーとコンテンツ情報は一覧になく、送料無料の帯はどのランドマークにも入っていないため、ランドマークごとに移動すると通り過ぎてしまいます。

## 確認できる問題

ページには見て分かる4つの領域があり、1.3.1は見て分かる構造をコードでも伝えることを求めます。HTMLには、ちょうどこれらの領域のための要素があります。ページの最上位にある `header` はバナーランドマーク、`nav` はナビゲーションランドマーク、`main` はメインコンテンツ、最上位にある `footer` はコンテンツ情報ランドマークです。WCAGの達成方法H101とARIA11は、これらを使って1.3.1を満たします。最初の版は4つすべてに `div` を使っているため、コードからはどれも伝わりません。

2つ目の版にはランドマークがありますが、置き場所が誤っています。

- レイアウトがすべてを `main` で囲んでいるため、メインランドマークがロゴから始まり、ヘッダーとフッターまで本文として扱います。
- `main`、`article`、`aside`、`nav`、`section` の中にある `header` や `footer` は、バナーやコンテンツ情報のランドマークになりません。そのため、サイトのヘッダーとフッターはランドマークではなくなります。
- ページが、レイアウトの `main` の中に自分の `main` を加えています。HTMLで認められるのは、隠されていない `main` が1つで、その祖先が `html`、`body`、`div`、アクセシブルな名前のない form、自律カスタム要素だけの場合です。それでも2つの要素はどちらも main として公開されるため、スクリーンリーダーには2つの「メイン」が並びます。
- 送料無料の帯は外側の `main` より上にあり、どのランドマークにも入っていません。

WCAGはランドマークを十分な達成方法として挙げていますが、必須とはしておらず、ランドマークのないページを失敗とする失敗例もありません。そのため、見出しが同じ構造を伝えていれば、合格とする診断者もいます。この例では、ほかに構造を伝えるものがありません。メニューとフッターには見出しがなく、見出しは本文のものだけです。

## 利用者への影響

どちらの版も見た目は正しいため、目で読む人は誰も気づきません。問題はマークアップにあり、同じレイアウトを使うすべてのページで繰り返されます。

## 自動チェックとAIの限界

axe には、この問題の多くに対応するルールがあります。どのランドマークにも入っていない内容には `region`、main のないページには `landmark-one-main`、入れ子になった2つ目の main には `landmark-no-duplicate-main` と `landmark-main-is-top-level`、2回使われたり別のランドマークの中に置かれたりしたバナーやコンテンツ情報には、さらに4つのルールがあります。ただし axe はどれもベストプラクティスに分類しているため、WCAGのルールだけを実行する診断では報告されません。`main` の中のヘッダーとフッターには、どのルールも気づきません。そこにある header は記事の header と同じく普通の header であるべきなので、axe は対象にしないからです。この診断ツールは、この場合を人の確認に回します。バナーやコンテンツ情報がなく、最初の header や footer が `main` や区分コンテンツの要素の中にあるページを、確認対象として挙げます。手早い修正は、ランドマークを動かす代わりに足すことがあります。さらに別の囲みに `role="main"` を付けたり、`main` の中に残ったヘッダーに `role="banner"` を付けて本文の中にバナーを作ったり、すべての `section` にラベルを付けて、誰も移動したくない領域でランドマークの一覧を埋めたりします。各領域が正しいランドマークに入っているか、入れ子の header がサイトのものか記事のものかは、ページと見比べて人が判断する必要があります。

## 修正前：div だけで作られたページ

```html
<div class="top-bar">$30以上のご注文で送料無料</div>
<div class="header">
  <a href="/" class="logo">Harbour Books</a>
  <div class="menu">
    <a href="/fiction">小説</a>
    <a href="/non-fiction">ノンフィクション</a>
    <a href="/children">児童書</a>
    <a href="/events">イベント</a>
  </div>
</div>
<div id="content">
  <h1>新刊</h1>
  <ul class="books">…</ul>
</div>
<div class="footer">
  <a href="/contact">お問い合わせ</a>
  <a href="/returns">返品</a>
</div>
```

すべての領域が `div` のため、ページにはランドマークがありません。ランドマークの一覧は空で、ページのすべてがランドマークの外にあります。

## 修正前：すべてがレイアウトの main の中

```html
<div class="top-bar">$30以上のご注文で送料無料</div>
<main class="layout">
  <header>
    <a href="/" class="logo">Harbour Books</a>
    <nav>
      <a href="/fiction">小説</a>
      <a href="/non-fiction">ノンフィクション</a>
      <a href="/children">児童書</a>
      <a href="/events">イベント</a>
    </nav>
  </header>
  <main id="content">
    <h1>新刊</h1>
    <ul class="books">…</ul>
  </main>
  <footer>
    <a href="/contact">お問い合わせ</a>
    <a href="/returns">返品</a>
  </footer>
</main>
```

外側の `main` がヘッダーとフッターをただの本文に変え、内側の `main` は1つ目の中の2つ目になり、帯はどちらの外にもあります。ランドマークの一覧は「メイン」「ナビゲーション」「メイン」と読みます。

## 修正後：header、nav、main、footer 要素

```html
<div class="layout">
  <header>
    <div class="top-bar">$30以上のご注文で送料無料</div>
    <a href="/" class="logo">Harbour Books</a>
    <nav>
      <a href="/fiction">小説</a>
      <a href="/non-fiction">ノンフィクション</a>
      <a href="/children">児童書</a>
      <a href="/events">イベント</a>
    </nav>
  </header>
  <main id="content">
    <h1>新刊</h1>
    <ul class="books">…</ul>
  </main>
  <footer>
    <a href="/contact">お問い合わせ</a>
    <a href="/returns">返品</a>
  </footer>
</div>
```

ヘッダー、本文、フッターは、`main` を囲んでもよい `div` の中に横に並び、`main` は1つだけです。帯はヘッダーの中に移り、バナーの一部になります。ランドマークの一覧はページの順に「バナー」「ナビゲーション」「メイン」「コンテンツ情報」と読み、ランドマークの外に残るものはありません。

## 修正後：今ある div にランドマークのロールを付ける

```html
<div class="layout">
  <div class="header" role="banner">
    <div class="top-bar">$30以上のご注文で送料無料</div>
    <a href="/" class="logo">Harbour Books</a>
    <div class="menu" role="navigation">
      <a href="/fiction">小説</a>
      <a href="/non-fiction">ノンフィクション</a>
      <a href="/children">児童書</a>
      <a href="/events">イベント</a>
    </div>
  </div>
  <div id="content" role="main">
    <h1>新刊</h1>
    <ul class="books">…</ul>
  </div>
  <div class="footer" role="contentinfo">
    <a href="/contact">お問い合わせ</a>
    <a href="/returns">返品</a>
  </div>
</div>
```

div は要素もクラスもそのままで、ランドマークのロールが加わります。これはARIA11で、ランドマークの一覧は要素を使った場合とまったく同じに読まれます。ロールが正しく働くのは div の置き場所が正しいときだけです。別のランドマークの中の `role="banner"` や `role="main"` は、また誤った場所のランドマークになります。3つの領域を横に並べることと、帯をヘッダーの中に移すことは、この方法でも必要です。

## どの方法を選ぶか

どちらの方法でも、スクリーンリーダーには同じ4つのランドマークが伝わり、1.3.1を満たします。テンプレートを変えられるなら、要素を使ってください。属性を合わせ続ける手間なしに同じことができ、後で `main` の中に入ってしまった `header` や `footer` は、誤った場所のランドマークになるのではなく、ランドマークでなくなるだけで済みます。アクセシビリティツリーではなくHTMLを読むスクリプトやツールにも伝わります。ロールは、スタイルやスクリプトが `div.header` を指定しているテーマのように、要素を変えられないテンプレートに使い、変えられるようになったら要素に切り替えます。

## 実装の判断

ページの骨組みは、1つのレイアウトに持たせます。ルートのレイアウトがヘッダー、1つの `main`、フッターを横に並べて出力し、各ページは本文をその `main` の中に、自分の `div` や `section` で出力します。別の `main` は加えません。シングルページアプリケーションでは、画面遷移のときも `main` は残し、中身だけを入れ替えます。`hidden` 属性のある `main` は数えられないため、ページ内に複数の画面を持つアプリは、一度に1つだけを表示するなら、画面ごとに `main` を持てます。

レイアウトが本文の周りに加えるものにも、すべてランドマークを用意します。種類ごとに置き場所があります。

- サイトのヘッダーの上の帯やキャンペーンの告知は、`header` の中に入れ、バナーの一部にします。
- フッターの後に加わるクッキーのお知らせやニュースレターの帯は、名前のある `section`（`<section aria-label="クッキーのお知らせ">`）にして region にするか、ダイアログならダイアログにします。
- 外部のチャットやフィードバックのボタンは、たいてい `body` の最後に自分のマークアップを加えます。どこに入るかを確認し、どのランドマークの外にもあるなら、提供元に相談するか、読み込む先の入れ物を囲みます。

スキップリンクは、ヘッダーの前に、どのランドマークにも入れずに置いたままでかまいません。利用者が期待する場所であり、axe もそこでは問題にしません。

記事自身の `header` と `footer` は、その中にあるのが正しい形です。商品カード、ブログ記事、レビューには、タイトルのある header や日付のある footer があってもかまいません。`article` や `main` の中ではバナーにはならず、なるべきでもありません。`role="banner"` や `role="contentinfo"` は付けないでください。

ランドマークに名前を付けるのは、必要なときだけです。バナー、メイン、コンテンツ情報が1つずつなら名前は要りません。2つの `nav` のように同じロールが2回以上現れるときは、[区別できない複数のナビゲーションランドマーク](/ja/learn/landmark-names)で説明しているように、それぞれに名前が必要です。`section` は名前があるときだけ region ランドマークになるため、移動したくなる少数の領域にだけ名前を付け、残りは見出しで区切ります。

現在のブラウザーはこれらの要素をそれぞれのロールに対応させるため、`<main role="main">` や `<nav role="navigation">` は要素がすでに伝えていることの繰り返しです。余分なロールは付けません。

## 修正の確認

1. ブラウザーのアクセシビリティツリーか、ランドマークを表示する拡張機能で、ページのランドマークを一覧にする。バナー、ナビゲーション、メイン、コンテンツ情報があり、バナー、メイン、コンテンツ情報はそれぞれ1つで、別のランドマークの中になく、表示中の内容がすべてどれかのランドマークの中にあることを確認する。
2. スクリーンリーダーのランドマークの一覧（NVDAではInsert + F7でランドマークを選択、VoiceOverではローター）を開き、ページの各領域が1回ずつ、ページの順に並んでいることを確認する。続けて「メイン」を選び、本文の最初の見出しに着くことを確認する。
3. ランドマークごとにページを移動し（NVDAではD、JAWSではR）、各ランドマークの終わりから次のランドマークの始まりまでを読む。ヘッダーやフッターの周りの帯やお知らせも含め、間に何も残っていないことを確認する。
4. テンプレートごと（トップ、一覧、商品、購入手続き）に、クッキーのお知らせやチャットのウィジェットを表示した状態でも繰り返す。レイアウトや後から加わる内容は、テンプレートごとに違うためです。

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。レイアウトや外部のウィジェットを変更した際は、再度確認します。

## 制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。パス、クラス名、リストの中の `…` は仮のものです。ランドマークの一覧の言い回しはスクリーンリーダーによって違い（「コンテンツ情報」「コンテンツインフォ」、後に「ランドマーク」や「領域」が付くもの、付かないもの）、言い回しではなく領域を聞いてください。ランドマークはスクリーンリーダー利用者にヘッダーを飛ばす手段を与え、WCAG 2.4.1もそれを手段の一つとして認めています。しかし、目で見てキーボードで操作する人にはランドマークのキーがないため、その人たちのために[繰り返すナビゲーションを飛ばせないスキップリンク](/ja/learn/skip-link)で説明しているスキップリンクも必要です。このガイドは、ページに適切なランドマークが適切な場所にあるかを扱います。繰り返すランドマークの名前は[区別できない複数のナビゲーションランドマーク](/ja/learn/landmark-names)を、ランドマークの中の見出しは[大きさで選ばれ、構造と合わない見出し](/ja/learn/heading-structure)を参照してください。実際に使用する支援技術で、操作全体を確認してください。

---

このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）