# Landmarks Pattern - AI実装ガイド
> APGリファレンス: https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/
## 概要
ランドマークはページの主要なセクションを識別します。8つのランドマークロールがあり、支援技術ユーザーがページ構造を効率的にナビゲートできるようになります。
### ネイティブ vs カスタム比較
| 機能 | ネイティブ | カスタム |
| --- | --- | --- |
| `<header>` | banner | ``の直接の子の場合のみ |
| `<nav>` | navigation | 常に |
| `<main>` | main | 常に |
| `<footer>` | contentinfo | ``の直接の子の場合のみ |
| `<aside>` | complementary | 常に |
| `<section>` | region | **aria-label/labelledbyがある場合のみ** |
| `<form>` | form | **aria-label/labelledbyがある場合のみ** |
## ARIA要件
### ロール
| ロール | 要素 | 説明 |
| --- | --- | --- |
| `banner` | <header> | サイト全体のヘッダー |
| `navigation` | <nav> | ナビゲーションリンク |
| `main` | <main> | 主要コンテンツ |
| `contentinfo` | <footer> | サイト全体のフッター |
| `complementary` | <aside> | 補完的コンテンツ |
| `region` | <section> | 名前付きセクション |
| `search` | <form role="search"> | 検索機能 |
| `form` | <form> | フォーム領域 |
### プロパティ
| 属性 | 要素 | 値 | 必須 | 備考 |
| --- | --- | --- | --- | --- |
| `aria-label` | すべてのランドマーク | String | 条件付き: 同じ種類が複数ある場合、またはregion/formの場合 | ランドマークにアクセシブルな名前を提供 |
| `aria-labelledby` | すべてのランドマーク | ID reference | 条件付き: 可視見出しを参照 | 可視の見出し要素を参照 |
## キーボードサポート
## テストチェックリスト
### 高優先度: ARIA
- [ ] Has banner landmark (`<header>` or `role="banner"`)
- [ ] Has navigation landmark (`<nav>` or `role="navigation"`)
- [ ] Has main landmark (`<main>` or `role="main"`)
- [ ] Has contentinfo landmark (`<footer>` or `role="contentinfo"`)
- [ ] Has exactly one main landmark
- [ ] Banner is at top level (not inside article/aside/main/nav/section)
- [ ] Navigation landmarks have unique labels when multiple
- [ ] Region landmarks have accessible name (aria-label or aria-labelledby)
- [ ] Form landmarks have accessible name
### 中優先度: アクセシビリティ
- [ ] No axe-core violations (WCAG 2.1 AA)
## 実装ノート
Structure Diagram:
```
+-----------------------------------------------------------------+
| role="banner" |
| +-------------------------------------------------------------+ |
| |