APG パターン実装例
WAI-ARIA APG パターンを React、Vue、Svelte、Astro で実装したアクセシブルな UI コンポーネントとテストを提供します。 簡潔な実装例と検証可能なテストで、アクセシブルなインターフェース構築を支援します。 ダークモード、ハイコントラスト、強制カラーモードにも対応しています。✨
実装済みパターン
Accordion
垂直に積み重ねられたインタラクティブな見出しのセット。各見出しをクリックするとコンテンツセクションが展開されます。
Alert
ユーザーのタスクを中断せずに、重要なメッセージを目立つ形で表示する要素。
Alert Dialog
ユーザーのワークフローを中断し、重要なメッセージを伝えて応答を求めるモーダルダイアログ。
Breadcrumb
現在のページから親ページへの階層的なリンクのリスト。
Button
フォームの送信や状態のトグルなど、アクションやイベントをトリガーするウィジェット。
Carousel
スライドと呼ばれるアイテムのセットを、1つまたは複数のスライドのサブセットを順次表示することで提示します。
Checkbox
2状態（チェック済み/未チェック）および3状態（チェック済み/未チェック/部分的にチェック）をサポートします。
Combobox
ユーザーがコレクションから値を選択できるポップアップを持つ入力ウィジェット。
Dialog (Modal)
プライマリウィンドウの上に重なるウィンドウで、背後のコンテンツを不活性にします。
Disclosure
コンテンツセクションの表示/非表示を制御するボタン。
Feed
ユーザーがスクロールすると新しいコンテンツセクションを自動的に読み込むページの領域。
Landmarks
ページの主要なセクションを識別する8つのロールのセット。
Link
リソースへのインタラクティブな参照を提供するウィジェット。
Listbox
ユーザーが選択肢のリストから1つまたは複数のアイテムを選択できるウィジェット。
Menubar
A horizontal menu bar with dropdown menus, submenus, checkbox items, and radio groups for application-style navigation.
Menu Button
アクションやオプションのメニューを開くボタン。
Meter
定義された範囲内で変化する数値のグラフィカル表示。
Radio Group
ラジオボタンと呼ばれるチェック可能なボタンのセットで、一度に1つだけチェックできます。
Slider
指定された範囲内から値を選択する入力。
Spinbutton
離散値の範囲から選択するための入力ウィジェット。通常、増減ボタンを持ちます。
Switch
チェック済み/未チェックではなく、オン/オフの値を表すチェックボックスの一種。
Table
1つ以上の行を含む静的な表形式の構造で、各行は1つ以上のセルを含みます。
Tabs
タブパネルと呼ばれるコンテンツの層状セクションのセットで、一度に1つのパネルを表示します。
Toolbar
ボタン、トグルボタン、チェックボックスなどのコントロールセットをグループ化するコンテナ。
Tooltip
要素がキーボードフォーカスを受けたとき、またはマウスがホバーしたときに、要素に関連する情報を表示するポップアップ。
Tree View
折りたたみや展開が可能なネストされたグループを持つ階層的なリストを表示するウィジェット。
Window Splitter
2つのセクションまたはペイン間の移動可能なセパレーターで、ユーザーがペインの相対サイズを変更できます。