APG Patterns Examples
WAI-ARIA APG パターンを React、Vue、Svelte、Astro で実装したアクセシブルな UI コンポーネントとテストを提供します。 簡潔な実装例と検証可能なテストで、アクセシブルなインターフェース構築を支援します。 ダークモード、ハイコントラスト、強制カラーモードにも対応しています。✨
実装済みパターン
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つのセクションまたはペイン間の移動可能なセパレーターで、ユーザーがペインの相対サイズを変更できます。