APG パターン
WAI-ARIA Authoring Practices Guide に基づいたアクセシブルなコンポーネントパターン。 各パターンは React、Vue、Svelte、Astro で実装されています。
実装済みパターン
Accordion
垂直に積み重ねられたインタラクティブな見出しのセット。各見出しをクリックするとコンテンツセクションが展開されます。
Alert
ユーザーのタスクを中断せずに、重要なメッセージを目立つ形で表示する要素。
Alert Dialog
ユーザーのワークフローを中断し、重要なメッセージを伝えて応答を求めるモーダルダイアログ。
Breadcrumb
現在のページから親ページへの階層的なリンクのリスト。
Button
フォームの送信や状態のトグルなど、アクションやイベントをトリガーするウィジェット。
Carousel
スライドと呼ばれるアイテムのセットを、1つまたは複数のスライドのサブセットを順次表示することで提示します。
Checkbox
2状態（チェック済み/未チェック）および3状態（チェック済み/未チェック/部分的にチェック）をサポートします。
Combobox
ユーザーがコレクションから値を選択できるポップアップを持つ入力ウィジェット。
Dialog (Modal)
プライマリウィンドウの上に重なるウィンドウで、背後のコンテンツを不活性にします。
Disclosure
コンテンツセクションの表示/非表示を制御するボタン。
Feed
ユーザーがスクロールすると新しいコンテンツセクションを自動的に読み込むページの領域。
Landmarks
ページの主要なセクションを識別する8つのロールのセット。
Link
リソースへのインタラクティブな参照を提供するウィジェット。
Listbox
ユーザーが選択肢のリストから1つまたは複数のアイテムを選択できるウィジェット。
Menubar
ドロップダウンメニュー、サブメニュー、チェックボックス項目、ラジオグループを備えた水平メニューバー。アプリケーションスタイルのナビゲーションに使用します。
Menu Button
アクションやオプションのメニューを開くボタン。
Meter
定義された範囲内で変化する数値のグラフィカル表示。
Radio Group
ラジオボタンと呼ばれるチェック可能なボタンのセットで、一度に1つだけチェックできます。
Slider
指定された範囲内から値を選択する入力。
Spinbutton
離散値の範囲から選択するための入力ウィジェット。通常、増減ボタンを持ちます。
Switch
チェック済み/未チェックではなく、オン/オフの値を表すチェックボックスの一種。
Table
1つ以上の行を含む静的な表形式の構造で、各行は1つ以上のセルを含みます。
Tabs
タブパネルと呼ばれるコンテンツの層状セクションのセットで、一度に1つのパネルを表示します。
Toolbar
ボタン、トグルボタン、チェックボックスなどのコントロールセットをグループ化するコンテナ。
Tooltip
要素がキーボードフォーカスを受けたとき、またはマウスがホバーしたときに、要素に関連する情報を表示するポップアップ。
Tree View
折りたたみや展開が可能なネストされたグループを持つ階層的なリストを表示するウィジェット。
Window Splitter
2つのセクションまたはペイン間の移動可能なセパレーターで、ユーザーがペインの相対サイズを変更できます。
実装予定パターン
Grid
ユーザーが方向キーを使用して情報やインタラクティブ要素をナビゲートできるコンテナ。
Treegrid
編集可能またはインタラクティブな表形式の情報で構成される階層的なデータグリッドを表示するウィジェット。
これらのパターンについて
各パターンは WAI-ARIA Authoring Practices Guide (APG) の仕様に従い、適切なアクセシビリティサポートを確保しています。
- 適切な ARIA ロールと属性
- 完全なキーボードナビゲーションのサポート
- スクリーンリーダーとの互換性
- ハイコントラストモードのサポート
- モーション軽減設定への対応