APG Patterns
English
English

ガイド

APG パターン実装例を使って、アクセシブルなコンポーネントを構築する方法を紹介します。

AI コーディングアシスタントとの連携

各パターンには AI 向けの定義ファイル（{pattern}.ja.md）が含まれており、Claude、Cursor、GitHub Copilot などの AI コーディングアシスタントで類似コンポーネントを実装する際のコンテキストとして利用できます。

定義ファイルに含まれる内容

  • ARIA role、property、state の要件
  • キーボード操作の仕様
  • フォーカス管理のルール
  • 検証用のテストチェックリスト
  • テストコードのサンプル

使い方

1. プロンプトにコピー&ペースト

内容をコピーして、AI にコンポーネント実装を依頼する際のプロンプトに含めます。 

以下の仕様に従って Angular で Tabs コンポーネントを実装してください:

[定義ファイルの内容をここにペースト]

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" を持つ

利用可能なパターン

全 28 パターンに AI 向け定義ファイルが用意されています:

Accordion

垂直に積み重ねられた見出しで、コンテンツセクションを表示・非表示できます。

Alert

重要でタイムセンシティブなメッセージを通知するライブリージョンです。

Alert Dialog

ユーザーの応答が必要なモーダルダイアログで、アクセシブルなフォーカス管理を備えています。

Breadcrumb

階層内のページ位置を示すナビゲーショントレイルです。

Toggle Button

aria-pressed でトグル動作を表現する 2 状態ボタンです。

Carousel

アクセシブルなナビゲーションコントロールを持つ回転コンテンツです。

Checkbox

オプションの3状態サポートを持つ単一チェックボックスです。

Combobox

ドロップダウン候補とオートコンプリート機能を持つテキスト入力です。

Dialog

フォーカストラップとキーボードサポートを備えたモーダルウィンドウです。

Disclosure

コンテンツの表示・非表示を切り替えるシンプルなトグルです。

Feed

アクセシブルなナビゲーションを持つスクロール可能な記事リストです。

Grid

キーボードナビゲーションサポートを持つインタラクティブなグリッドです。

Landmarks

支援技術のナビゲーション用のページ領域です。

Link

適切なセマンティクスと状態を持つアクセシブルなリンクです。

Listbox

単一選択および複数選択モードを持つ選択ウィジェットです。

Menu Button

アクセシブルなキーボードサポートを持つメニューを開くボタンです。

Menubar

サブメニューとキーボードナビゲーションを持つ水平メニューです。

Meter

既知の範囲内の値を視覚的に示すインジケーターです。

Radio Group

相互に排他的なオプションからの単一選択です。

Slider

範囲から値を選択するための入力です。

Spinbutton

増減コントロールを持つ数値入力です。

Switch

aria-checked 状態を持つオン・オフトグルです。

Table

適切なヘッダーと構造を持つデータテーブルです。

Tabs

roving tabindex を使った階層化されたコンテンツセクションです。

Toolbar

矢印キーナビゲーションを持つグループ化されたコントロールのコンテナです。

Tooltip

要素の説明を表示するコンテキストポップアップです。

Treegrid

展開可能な行とツリー状の階層を持つグリッドです。

Tree View

展開・折りたたみ可能なノードを持つ階層リストです。

Window Splitter

キーボードでアクセス可能なセパレーターを持つリサイズ可能なペインです。

パターン定義への直接リンク

これらの URL を直接コピーするか、AI ツールでフェッチできます:

コントリビューション

AI 向け定義ファイルの追加にご協力ください！ GitHub リポジトリ からコントリビューションできます。