Level A:   最低限の要件（必須）
Level AA:  推奨レベル（一般的な目標）
Level AAA: 最高レベル（全ページ準拠は非現実的）

→ 通常は Level AA 準拠を目標にする

<header>   → バナー（サイトヘッダー）
<nav>      → ナビゲーション
<main>     → メインコンテンツ（ページに1つ）
<aside>    → 補足コンテンツ
<footer>   → フッター
<section>  → セクション（見出し付き）
<article>  → 独立したコンテンツ

- h1 はページに 1 つ
- 階層を飛ばさない（h1 → h3 は NG）
- 見出しだけで文書構造が理解できるように
- 装飾目的で見出しタグを使わない

原則: ネイティブ HTML 要素を優先する

✅ <button> → クリック可能な操作
✅ <a href=""> → ナビゲーション
✅ <input>, <select>, <textarea> → フォーム入力

❌ <div onclick=""> → ボタンの代替（キーボード操作不可）
❌ <span> でリンク模倣 → スクリーンリーダーが認識しない

1. ネイティブ HTML で解決できるなら ARIA は不要
2. ネイティブのセマンティクスを上書きしない
3. インタラクティブな要素はキーボード操作可能にする
4. focusable な要素に role="presentation" を使わない
5. すべてのインタラクティブ要素にアクセシブルな名前を付ける

原則:
- フォーカスインジケーターを常に表示する（outline: none 禁止）
- フォーカス順序が論理的であること（tabindex の乱用を避ける）
- tabindex="0": 自然な順序でフォーカス可能にする
- tabindex="-1": プログラムでフォーカスするが Tab では到達しない
- tabindex > 0: 使用禁止（順序が混乱する）

フォーカストラップ:
- モーダル表示時はモーダル内にフォーカスを閉じ込める
- モーダルを閉じたら元の要素にフォーカスを戻す

ページ先頭に「メインコンテンツへスキップ」リンクを配置
→ キーボードユーザーがナビゲーションを飛ばせる
→ 通常は非表示、フォーカス時に表示

必須:
- すべての入力フィールドに関連付けられたラベルを付ける
- <label for="id"> または aria-label / aria-labelledby

placeholder はラベルの代替にならない:
  ❌ <input placeholder="メールアドレス">
  ✅ <label for="email">メールアドレス</label>
     <input id="email" placeholder="example@mail.com">

原則:
- エラーメッセージをフィールドに関連付ける（aria-describedby）
- エラー発生時にフォーカスをエラー箇所に移動
- 色だけでエラーを示さない（アイコン + テキストも使う）
- aria-invalid="true" でエラー状態を伝える
- エラーサマリーをフォーム上部に表示（複数エラー時）

- リアルタイムバリデーションは aria-live で結果を通知
- 必須フィールドは aria-required="true" + 視覚的な印
- 入力形式のヒントを aria-describedby で提供

WCAG AA 基準:
  - 通常テキスト: コントラスト比 4.5:1 以上
  - 大きなテキスト（18px 以上 or 14px bold）: 3:1 以上
  - UI コンポーネント・アイコン: 3:1 以上

原則:
  - 色だけで情報を伝えない（形、テキスト、パターンも使う）
  - リンクは色だけでなく下線でも区別
  - グラフは色以外のパターンも使用
  - ダークモード時もコントラスト比を確認

aria-live の使い分け:
  - "polite": ユーザーの操作を中断しない（推奨）
    → トースト通知、検索結果の更新
  - "assertive": 即座に通知（緊急時のみ）
    → エラーメッセージ、セッション期限切れ

aria-atomic:
  - "true": 領域全体を読み上げ
  - "false": 変更部分のみ読み上げ（デフォルト）

- ページ遷移時にページタイトルを更新
- 新しいコンテンツにフォーカスを移動（または通知）
- ローディング状態を aria-busy="true" で伝える
- 読み込み完了を通知（aria-live 領域で）

最低限のチェック:
  - HTML バリデーション
  - ランドマーク構造
  - alt テキストの存在
  - ラベルの関連付け
  - コントラスト比
  - ARIA 属性の正しい使用

キーボードテスト:
  1. Tab キーですべての操作可能な要素に到達できるか
  2. フォーカスインジケーターが見えるか
  3. Enter/Space でボタン/リンクが動作するか
  4. Escape でモーダルが閉じるか

スクリーンリーダーテスト:
  1. 見出し構造でナビゲーションできるか
  2. フォームのラベルが読み上げられるか
  3. エラーメッセージが通知されるか
  4. 動的コンテンツの更新が伝わるか