ガイド

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

利用可能なパターン

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

Accordion

垂直に積み重ねられたインタラクティブな見出しのセット。各見出しをクリックするとコンテンツセクションが展開されます。

Alert

ユーザーのタスクを中断せずに、重要なメッセージを目立つ形で表示する要素。

Alert Dialog

ユーザーのワークフローを中断し、重要なメッセージを伝えて応答を求めるモーダルダイアログ。

Breadcrumb

現在のページから親ページへの階層的なリンクのリスト。

Button

role="button" を持つ要素で、アクションをトリガーするウィジェット。ネイティブ <button> を推奨する理由を示します。

Toggle Button

押された状態と押されていない状態の2状態を持つボタン。aria-pressed で状態を伝えます。

Carousel

スライドと呼ばれるアイテムのセットを、1つまたは複数のスライドのサブセットを順次表示することで提示します。

Checkbox

2状態（チェック済み/未チェック）および3状態（チェック済み/未チェック/部分的にチェック）をサポートします。

Combobox

ユーザーがコレクションから値を選択できるポップアップを持つ入力ウィジェット。

Dialog (Modal)

プライマリウィンドウの上に重なるウィンドウで、背後のコンテンツを不活性にします。

Disclosure

コンテンツセクションの表示/非表示を制御するボタン。

Feed

ユーザーがスクロールすると新しいコンテンツセクションを自動的に読み込むページの領域。

Grid

ユーザーが方向キーを使用して情報やインタラクティブ要素をナビゲートできるコンテナ。

Landmarks

ページの主要なセクションを識別する8つのロールのセット。

Link

リソースへのインタラクティブな参照を提供するウィジェット。

Listbox

ユーザーが選択肢のリストから1つまたは複数のアイテムを選択できるウィジェット。

Menubar

ドロップダウンメニュー、サブメニュー、チェックボックス項目、ラジオグループを備えた水平メニューバー。アプリケーションスタイルのナビゲーションに使用します。

Menu Button

アクションやオプションのメニューを開くボタン。

Meter

定義された範囲内で変化する数値のグラフィカル表示。

Radio Group

ラジオボタンと呼ばれるチェック可能なボタンのセットで、一度に1つだけチェックできます。

Slider

指定された範囲内から値を選択する入力。

Slider (Multi-Thumb)

2つのサムを持つスライダーで、ユーザーが指定された範囲内から値の範囲を選択できます。

Spinbutton

離散値の範囲から選択するための入力ウィジェット。通常、増減ボタンを持ちます。

Switch

チェック済み/未チェックではなく、オン/オフの値を表すチェックボックスの一種。

Table

1つ以上の行を含む静的な表形式の構造で、各行は1つ以上のセルを含みます。

Tabs

タブパネルと呼ばれるコンテンツの層状セクションのセットで、一度に1つのパネルを表示します。

Toolbar

ボタン、トグルボタン、チェックボックスなどのコントロールセットをグループ化するコンテナ。

Tooltip

要素がキーボードフォーカスを受けたとき、またはマウスがホバーしたときに、要素に関連する情報を表示するポップアップ。

Tree View

折りたたみや展開が可能なネストされたグループを持つ階層的なリストを表示するウィジェット。

Treegrid

編集可能またはインタラクティブな表形式の情報で構成される階層的なデータグリッドを表示するウィジェット。

Data Grid

ソート、フィルタリング、行選択機能を備えた表形式データの表示・操作のための高度なグリッド。

Window Splitter

2つのセクションまたはペイン間の移動可能なセパレーターで、ユーザーがペインの相対サイズを変更できます。

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

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

コントリビューション

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