APG パターン実装例について
WAI-ARIA APG パターンに準拠した、React、Vue、Svelte、Astro で実装されたアクセシブルな UI コンポーネント
概要
このプロジェクトでは、 WAI-ARIA Authoring Practices Guide（APG） パターンに準拠したアクセシブルな UI コンポーネントとテストケースを提供しています。
各コンポーネントは React、Vue、Svelte、Astro（Web Components）の 4 つの主要フロントエンドフレームワークで実装されており、アクセシビリティと WAI-ARIA を学ぶための実装例を提供しています。
各コンポーネントには APG パターンへの準拠を検証するテストが含まれています。これらのテストを活用することで、あなた自身のコンポーネントのアクセシビリティを確認できます。また、テストドキュメントは AI フレンドリーなフォーマットで設計されており、テストケースの生成が容易です。
さらに、ダークモード、ハイコントラストモード、強制カラーモードをサポートしたスタイリングを提供し、アクセシブルなコンポーネント開発をより一層支援します。
コンポーネント実装状況
| パターン | React | Vue | Svelte | Astro | 状態 |
|---|---|---|---|---|---|
| Accordion | ✅ | ✅ | ✅ | ✅ | 完了 |
| Alert | ✅ | ✅ | ✅ | ✅ | 完了 |
| Alert Dialog | ✅ | ✅ | ✅ | ✅ | 完了 |
| Breadcrumb | ✅ | ✅ | ✅ | ✅ | 完了 |
| Button | - | - | - | - | 予定 |
| Carousel | ✅ | ✅ | ✅ | ✅ | 完了 |
| Checkbox | ✅ | ✅ | ✅ | ✅ | 完了 |
| Combobox | ✅ | ✅ | ✅ | ✅ | 完了 |
| Dialog | ✅ | ✅ | ✅ | ✅ | 完了 |
| Disclosure | ✅ | ✅ | ✅ | ✅ | 完了 |
| Feed | ✅ | ✅ | ✅ | ✅ | 完了 |
| Grid | ✅ | ✅ | ✅ | ✅ | 完了 |
| Landmarks | ✅ | ✅ | ✅ | ✅ | 完了 |
| Link | ✅ | ✅ | ✅ | ✅ | 完了 |
| Listbox | ✅ | ✅ | ✅ | ✅ | 完了 |
| Menubar | ✅ | ✅ | ✅ | ✅ | 完了 |
| Menu Button | ✅ | ✅ | ✅ | ✅ | 完了 |
| Meter | ✅ | ✅ | ✅ | ✅ | 完了 |
| Radio Group | ✅ | ✅ | ✅ | ✅ | 完了 |
| Slider | ✅ | ✅ | ✅ | ✅ | 完了 |
| Slider (Multi-Thumb) | - | - | - | - | 予定 |
| Spinbutton | ✅ | ✅ | ✅ | ✅ | 完了 |
| Switch | ✅ | ✅ | ✅ | ✅ | 完了 |
| Table | ✅ | ✅ | ✅ | ✅ | 完了 |
| Tabs | ✅ | ✅ | ✅ | ✅ | 完了 |
| Toggle Button | ✅ | ✅ | ✅ | ✅ | 完了 |
| Toolbar | ✅ | ✅ | ✅ | ✅ | 完了 |
| Tooltip | ✅ | ✅ | ✅ | ✅ | 完了 |
| Tree View | ✅ | ✅ | ✅ | ✅ | 完了 |
| Treegrid | ✅ | ✅ | ✅ | ✅ | 完了 |
| Window Splitter | ✅ | ✅ | ✅ | ✅ | 完了 |
スタイリング
- ハイコントラストモード対応
- 視覚効果軽減設定（prefers-reduced-motion）対応
- 強制カラーモード対応
コントリビューション
コントリビューションを歓迎します！詳細は コントリビューションガイド をご覧ください。