ガイド
APG パターン実装例を使って、アクセシブルなコンポーネントを構築する方法を紹介します。
AI コーディングアシスタントとの連携
各パターンには AI 向けの定義ファイル（llm.md）が含まれており、Claude、Cursor、GitHub Copilot などの AI
コーディングアシスタントで類似コンポーネントを実装する際のコンテキストとして利用できます。
llm.md に含まれる内容
- ARIA role、property、state の要件
- キーボード操作の仕様
- フォーカス管理のルール
- 検証用のテストチェックリスト
- テストコードのサンプル
使い方
1. プロンプトにコピー&ペースト
内容をコピーして、AI にコンポーネント実装を依頼する際のプロンプトに含めます。
以下の仕様に従って Angular で Tabs コンポーネントを実装してください:
[llm.md の内容をここにペースト]2. プロジェクトコンテキストに追加
Claude Code や Cursor では、定義ファイルをプロジェクトに配置することで自動的にコンテキストとして参照されます。
my-project/
├── .ai/
│ └── apg-patterns/
│ ├── tabs.md
│ ├── dialog.md
│ └── accordion.md
└── src/3. テスト生成に活用
テストチェックリストを使って、AI に包括的なアクセシビリティテストを生成させることができます。
以下のチェックリストに基づいて Tabs コンポーネントの Jest テストを生成してください:
## Test Checklist
- [ ] ArrowRight で次のタブに移動する
- [ ] 選択中のタブは aria-selected="true" を持つ
- [ ] 選択中のタブのみ tabIndex="0" を持つ利用可能なパターン
以下のパターンに AI 向け定義ファイルが用意されています:
Accordion
垂直に積み重ねられた見出しで、コンテンツセクションを表示・非表示できます。
Alert
重要でタイムセンシティブなメッセージを通知するライブリージョンです。
Breadcrumb
階層内のページ位置を示すナビゲーショントレイルです。
Toggle Button
aria-pressed でトグル動作を表現する 2 状態ボタンです。
Dialog
フォーカストラップとキーボードサポートを備えたモーダルウィンドウです。
Disclosure
コンテンツの表示・非表示を切り替えるシンプルなトグルです。
Listbox
単一選択および複数選択モードを持つ選択ウィジェットです。
Switch
aria-checked 状態を持つオン・オフトグルです。
Tabs
roving tabindex を使った階層化されたコンテンツセクションです。
Toolbar
矢印キーナビゲーションを持つグループ化されたコントロールのコンテナです。
Tooltip
要素の説明を表示するコンテキストポップアップです。
llm.md への直接リンク
これらの URL を直接コピーするか、AI ツールでフェッチできます:
コントリビューション
AI 向け定義ファイルの追加にご協力ください！ GitHub リポジトリ からコントリビューションできます。