# ランドマークの一覧に出てこない検索欄と関連コンテンツ

Source: https://easeweb.dev/learn/region-purpose
Topics: ページの構造 > アイコン、領域、コントロールを、利用者が見慣れた記号に置き換えられる (WCAG 1.3.6)
The fix: 各領域を、何のためにあるかでマークアップします。ヘッダーの検索フォームを search 要素で囲み、関連コンテンツを main の外に出して見出しで名前を付けた aside にするか、テンプレートの要素を変えられない場合は、フォームに role="search" を、main の横に移した関連コンテンツの div に role="complementary" を付けます。
Test with: screen reader, keyboard
References: https://www.w3.org/WAI/WCAG22/Understanding/identify-purpose.html 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-search-element https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/search https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/aside https://dequeuniversity.com/rules/axe/4.12/landmark-complementary-is-top-level https://skipto.disability.illinois.edu/skipto-extension/ https://www.w3.org/TR/adapt-symbols/

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

## 場面

ある生活雑貨のショップの商品ページは、多くのショップと同じ形をしています。ヘッダーにはロゴの Tidewater Home、3つのリンクのメニュー、検索欄があります。その下に商品のホーローのマグ（$18）、続いて「こちらもおすすめ」という見出しの下にほかの商品が並び、最後に「お問い合わせ」と「返品」のあるフッターがあります。ページの骨組みはきちんと作られています。ヘッダー、メニュー、本文、フッターはランドマークになっていて、ランドマークの一覧には「バナー」「ナビゲーション」「メイン」「コンテンツ情報」が並び、どのランドマークの外にも内容は残っていません。

ページを領域ごとにたどる人が、検索へ行こうとして、スクリーンリーダーや SkipTo のようなランドマークの拡張機能でこの一覧を開きます。一覧に検索はありません。バナーを選んでヘッダーの中から検索欄を探すか、Tabキーでロゴとメニューを通り過ぎて欄までたどることになります。次にマグの説明を読もうと「メイン」を選ぶと、一覧のメインには「こちらもおすすめ」まで含まれていて、ほかの商品もマグのページの一部のように扱われます。メインのどこまでが商品で、どこからがショップのおすすめなのかは、一覧からは分かりません。

## 確認できる問題

1.3.6は、ページの各領域の目的をプログラムで解釈できること、つまり見た目だけでなく、それぞれの領域が何のためにあるかをコードでも伝えることを求めます。理由は解説書にあります。ページの領域が特定されていれば、利用者はユーザーエージェントで領域を取り除いたり、強調したりできます。解説書が最初に挙げる例も、ランドマークで領域を示したサイトで、利用者が main のロールを持たない部分を隠せるというものです。領域についての十分な達成方法はランドマークを使うARIA11で、そのランドマークには、検索のための search と、メインの内容を補いながら単独でも意味を持つ内容のための complementary が含まれています。

このページは、骨組みにはランドマークを使っていますが、そこで止まっています。

- 検索は、名前もロールもない `form` です。`form` 要素は名前があるときだけランドマークになり、その場合も「検索」ではなく「フォーム」です。そのため、検索がどこにあるかを示すランドマークがコードになく、ページの領域を並べるツールにも検索は載りません。
- 関連コンテンツは `main` の中の `div` です。コードの上ではおすすめもメインの内容、つまりページの存在理由の一部になるため、メインを残してほかを隠すツールではおすすめも残ります。

[抜けや置き間違いがあり、内容を囲みきれないランドマーク](/ja/learn/landmarks)で説明している1.3.1の点では、このページに問題はありません。4つの領域はランドマークで、内容はすべてどれかの中にあります。1.3.6はさらに、ページの領域の目的まで求めます。このページでは、利用者が名前で呼ぶ2つの領域、検索とおすすめの目的がコードに表れていません。1.3.6には失敗例がなく、ARIA11の確認手順も、ページにあるランドマークを調べるもので、ないランドマークは調べません。そのため、どの領域にランドマークが必要かは、達成基準の文言と例から判断することになります。また、レベルAAAなので、求める診断はあまりありません。

## 利用者への影響

ページ上部の検索欄も、見出しの下に並ぶ商品も、見た目は利用者が期待するとおりです。問題があるのはコードが伝える内容だけで、同じヘッダーと商品のテンプレートを使うページすべてで同じことが起きます。

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

axe には1.3.6のルールがありません。axe のレベルAAAのルールは3つで、コントラスト（1.4.6）、リンクの目的（2.4.9）、ページの再読み込み（2.2.4と3.2.5）を調べます。ランドマークのルールも、main、バナー、コンテンツ情報が1つずつあり、その外に何もないこのページを合格にします。search ランドマークの外にある検索欄はコードから見つけられるため、この診断ツールは、そうした検索欄を、欄の名前とボタンの文言を添えて確認対象に挙げます。一方、あるまとまりが単独で成り立つ関連コンテンツなのか、ページの目的の一部なのかは、ツールには判断できません。商品のレビューやサイズの目安は main に入り、おすすめは入りませんが、その違いはコードには表れません。ページを読んで人が判断する必要があります。ランドマークを加えるよう頼まれたAIツールは、付けすぎる傾向があります。ニュースレターの登録フォームに `role="search"` を付けたり、商品自身の説明を `aside` で囲んだり、あらゆるまとまりを名前付きの `section` にして、誰も移動したくない領域でランドマークの一覧を埋めたりします。

## 修正前：ただの検索フォームと、main の中の関連コンテンツ

```html
<header>
  <a href="/" class="logo">Tidewater Home</a>
  <nav>
    <a href="/kitchen">キッチン</a>
    <a href="/table">テーブル</a>
    <a href="/bath">バス</a>
  </nav>
  <form action="/search">
    <label for="q" class="visually-hidden">ショップ内を検索</label>
    <input id="q" name="q" type="search">
    <button type="submit">検索</button>
  </form>
</header>
<main>
  <h1>ホーローのマグ</h1>
  <p class="price">$18</p>
  <div class="related">
    <h2>こちらもおすすめ</h2>
    <ul>…</ul>
  </div>
</main>
<footer>
  <a href="/contact">お問い合わせ</a>
  <a href="/returns">返品</a>
</footer>
```

- 検索フォームにはロールも名前もないため、ランドマークにならず、ランドマークの一覧に検索がありません。
- 関連コンテンツは `main` の中の `div` なので、コードは商品ページ自身の内容として数えます。
- そのため一覧に並ぶのは「バナー」「ナビゲーション」「メイン」「コンテンツ情報」だけで、検索にもおすすめにも、それが何であるかを手がかりに移動したり、残したり、隠したりできません。

## 修正後：search 要素と aside 要素

```html
<header>
  <a href="/" class="logo">Tidewater Home</a>
  <nav>
    <a href="/kitchen">キッチン</a>
    <a href="/table">テーブル</a>
    <a href="/bath">バス</a>
  </nav>
  <search>
    <form action="/search">
      <label for="q" class="visually-hidden">ショップ内を検索</label>
      <input id="q" name="q" type="search">
      <button type="submit">検索</button>
    </form>
  </search>
</header>
<main>
  <h1>ホーローのマグ</h1>
  <p class="price">$18</p>
</main>
<aside class="related" aria-labelledby="related-title">
  <h2 id="related-title">こちらもおすすめ</h2>
  <ul>…</ul>
</aside>
<footer>
  <a href="/contact">お問い合わせ</a>
  <a href="/returns">返品</a>
</footer>
```

1. 検索フォームを `search` 要素で囲みます。`search` 要素は search ランドマークになるため、一覧に「検索」が出て、選ぶと検索欄に着きます。中のフォームにロールは要りません。
2. 関連コンテンツを `main` の外に出し、フッターの前で `main` の横に置きます。メインは商品で終わります。
3. その囲みを complementary ランドマークになる `aside` にし、見出しを指す `aria-labelledby` で名前を付けます。一覧では「こちらもおすすめ」という名前と一緒に出ます。

ランドマークの一覧には「バナー」「ナビゲーション」「検索」「メイン」「補足情報、こちらもおすすめ」「コンテンツ情報」が並び、メインにはマグだけが入ります。これで修正前の例の2つの領域が直り、その領域について1.3.6を満たします。アイコンとコントロールは、この達成基準の残りの部分です（「制限」を参照）。`aside` は `div` のときの見た目をそのまま保てます。マークアップのどこにあっても、レイアウトのCSSで商品の下に配置できます。

## 修正後：今ある要素に search と complementary のロールを付ける

```html
<header>
  <a href="/" class="logo">Tidewater Home</a>
  <nav>
    <a href="/kitchen">キッチン</a>
    <a href="/table">テーブル</a>
    <a href="/bath">バス</a>
  </nav>
  <form action="/search" role="search">
    <label for="q" class="visually-hidden">ショップ内を検索</label>
    <input id="q" name="q" type="search">
    <button type="submit">検索</button>
  </form>
</header>
<main>
  <h1>ホーローのマグ</h1>
  <p class="price">$18</p>
</main>
<div class="related" role="complementary" aria-labelledby="related-title">
  <h2 id="related-title">こちらもおすすめ</h2>
  <ul>…</ul>
</div>
<footer>
  <a href="/contact">お問い合わせ</a>
  <a href="/returns">返品</a>
</footer>
```

1. 今あるフォームに `role="search"` を付けます。フォームが search ランドマークになり、一覧には要素を使ったときと同じ項目が出ます。
2. もう一つの方法と同じく、関連コンテンツの `div` を `main` の外に出し、横に置きます。
3. その `div` に `role="complementary"` を付け、見出しを指す `aria-labelledby` で名前を付けます。

一覧の並びは要素を使ったときとまったく同じなので、修正前の例の2つの領域が直り、その領域について1.3.6を満たします（ARIA11）。ロールがそれぞれの目的を伝えるのは、正しい要素に付いている間だけです。自分で `form` を出力するフォームのコンポーネントは `role` をその `form` まで渡す必要があり、関連コンテンツはやはり `main` の外に出す必要があります。

## どの方法を選ぶか

どちらの方法でも同じランドマークの一覧になり、これらの領域について1.3.6を満たします。要素を使ってください。`search` と `aside` は要素そのものがロールと同じ役割を持つので、属性を管理し続ける必要がありません。`search` 要素は2023年10月から主要なブラウザーで使えます。ロールは、自分で `form` を出力して属性をそのまま渡すフォームのコンポーネントのように、要素を変えられないテンプレートに使い、変えられるようになったら要素に切り替えます。

## 実装の判断

何を main に入れるかは、そのページが何のためにあるかで決めます。商品ページは商品のためのページなので、写真、価格、選択肢、説明、レビュー、サイズの目安は `main` に残します。ショップがその周りに加えるまとまりは、main の横に置きます。

- おすすめ、最近見た商品、コーディネートの提案の列は complementary です。商品に関連しながら、単独でも意味を持ちます。
- 商品と関係のないニュースレターの登録やキャンペーンは complementary ではありません。ARIA Authoring Practices は、関係のない内容にはもっと一般的なランドマークを勧めています。名前のある `section`、つまり region です。
- おすすめと最近見た商品のように complementary が2つあるときは、[区別できない複数のナビゲーションランドマーク](/ja/learn/landmark-names)で説明しているように、それぞれに名前が必要です。

`aside` は `main` の中ではなく横に置きます。ARIA Authoring Practices は complementary ランドマークを最上位に置くよう勧めています。それに、メインを残してほかを隠すツールが隠せるのは、メインの外にあるものだけです。ARIA 1.3の草案では、補う対象のメインの内容の直下に complementary ランドマークを置くことも認められました。そのため、axe でこれを調べていたルール `landmark-complementary-is-top-level` は非推奨になり、初期設定では動きません。`main` の横に置けば、Authoring Practices と草案のどちらにも沿います。すべてのセクションを `main` の中に出力するテーマでは、移すまとまりのための場所を、レイアウトの `main` の横に用意する必要があります。

search ランドマークは、検索と絞り込みにだけ使います。HTML標準の `search` 要素は検索や絞り込みの操作のためのものなので、商品一覧の上の絞り込みフォームも search にでき、検索専用のページの検索フォームもヘッダーのものと同じく search にします。ログインのフォームや、テキスト欄が1つだけのニュースレターのフォームは検索ではありません。検索がドロワーやダイアログで開くときは、その中のフォームを `search` 要素で囲みます。1つのページに検索が2つあるときは、それぞれに名前を付けます。

`article` の中の引用のように、記事自身の `aside` は、名前がない限り complementary ランドマークになりません。引用ならそれが正しい形です。`aside` は、枠のあるすべての箱ではなく、ページの関連コンテンツに使います。

## 修正の確認

1. ブラウザーのアクセシビリティツリーか、ランドマークを表示する拡張機能で、ページのランドマークを一覧にする。search ランドマークに検索フォームが入り、「こちらもおすすめ」という名前の complementary ランドマークに関連コンテンツが `main` の外で入り、`main` には商品だけが入っていることを確認する。
2. スクリーンリーダーのランドマークの一覧（NVDAではInsert + F7でランドマークを選択、VoiceOverではローター）か、SkipTo のようなランドマークの拡張機能のメニューを開く。検索と関連コンテンツがそれぞれ1回ずつ、何であるかが分かる言葉で出ることを確認し、続けて検索を選び、検索欄の領域に着くことを確認する。
3. ランドマークのキー（NVDAではD、JAWSではR）で `main` へ移動して次のランドマークまで読み、ページ自身の内容が終わるところで `main` も終わること、おすすめ、キャンペーン、最近見た商品が中に入っていないことを確認する。
4. テンプレートごと（トップ、一覧、商品、記事、購入手続き）に、検索のドロワーを開いた状態でも繰り返す。テンプレートごとに、本文の周りに加わるまとまりが違うためです。

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。テンプレートに新しいまとまりを加えた際は、再度確認します。

## 制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。パス、クラス名、リストの中の `…` は仮のものです。このガイドのランドマークの呼び方は NVDA の日本語版に合わせています。言い回しはスクリーンリーダーによって違うため、言い回しではなく領域を聞いてください。このガイドは、1.3.6が挙げる3つのもののうち、領域を扱います。残りはアイコンとコントロールで、WCAGにはまだそのための達成方法が公開されていません。解説書には、コントロールについてマイクロデータを使う方法が、今後のリンクとして1つ挙がっているだけです。言葉や絵に記号の概念を示すためのW3Cの属性、WAI-Adapt Symbols Module の `adapt-symbol` は、2023年1月から勧告候補のままで、先へ進むには、この属性に反応するユーザーエージェントか拡張機能が2つ必要です。実装報告にはそうしたブラウザーも拡張機能も挙がっていないため、アイコンが利用者自身の記号に置き換わることを、今のところページの側では当てにできません。今ツールがアイコンやコントロールから読み取れるのは名前なので、[名前がないアイコンだけのボタン](/ja/learn/icon-buttons)で示しているように、それぞれに名前を付けてください。個人情報を集める入力欄は `autocomplete` で目的を示します。これは[自動入力が効かないフォームの入力欄](/ja/learn/autocomplete)で扱っています。骨組み自体のランドマーク、つまり1つの main と最上位のヘッダーとフッターは、[抜けや置き間違いがあり、内容を囲みきれないランドマーク](/ja/learn/landmarks)を参照してください。実際に使用する支援技術で、操作全体を確認してください。

---

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