About APG Patterns Examples
Accessible UI component implementations across React, Vue, Svelte, and Astro following WAI-ARIA APG patterns
Overview
This project provides accessible UI components and test cases that follow the WAI-ARIA Authoring Practices Guide (APG) patterns.
Each component is implemented across four major frontend frameworks: React, Vue, Svelte, and Astro (Web Components), providing familiar implementation examples to help you learn about accessibility and WAI-ARIA.
Each component includes tests to verify APG pattern compliance, which you can use directly to ensure accessibility of your own components. The test documentation is also designed in an AI-friendly format, making it easy to generate test cases.
Additionally, we provide styling that supports dark mode, high contrast mode, and forced colors mode to further assist in developing accessible components.
Component Status
| Pattern | React | Vue | Svelte | Astro | Status |
|---|---|---|---|---|---|
| Accordion | ✅ | ✅ | ✅ | ✅ | Complete |
| Alert | ✅ | ✅ | ✅ | ✅ | Complete |
| Alert Dialog | ✅ | ✅ | ✅ | ✅ | Complete |
| Breadcrumb | ✅ | ✅ | ✅ | ✅ | Complete |
| Button | - | - | - | - | Planned |
| Carousel | ✅ | ✅ | ✅ | ✅ | Complete |
| Checkbox | ✅ | ✅ | ✅ | ✅ | Complete |
| Combobox | ✅ | ✅ | ✅ | ✅ | Complete |
| Dialog | ✅ | ✅ | ✅ | ✅ | Complete |
| Disclosure | ✅ | ✅ | ✅ | ✅ | Complete |
| Feed | ✅ | ✅ | ✅ | ✅ | Complete |
| Grid | ✅ | ✅ | ✅ | ✅ | Complete |
| Landmarks | ✅ | ✅ | ✅ | ✅ | Complete |
| Link | ✅ | ✅ | ✅ | ✅ | Complete |
| Listbox | ✅ | ✅ | ✅ | ✅ | Complete |
| Menubar | ✅ | ✅ | ✅ | ✅ | Complete |
| Menu Button | ✅ | ✅ | ✅ | ✅ | Complete |
| Meter | ✅ | ✅ | ✅ | ✅ | Complete |
| Radio Group | ✅ | ✅ | ✅ | ✅ | Complete |
| Slider | ✅ | ✅ | ✅ | ✅ | Complete |
| Slider (Multi-Thumb) | - | - | - | - | Planned |
| Spinbutton | ✅ | ✅ | ✅ | ✅ | Complete |
| Switch | ✅ | ✅ | ✅ | ✅ | Complete |
| Table | ✅ | ✅ | ✅ | ✅ | Complete |
| Tabs | ✅ | ✅ | ✅ | ✅ | Complete |
| Toggle Button | ✅ | ✅ | ✅ | ✅ | Complete |
| Toolbar | ✅ | ✅ | ✅ | ✅ | Complete |
| Tooltip | ✅ | ✅ | ✅ | ✅ | Complete |
| Tree View | ✅ | ✅ | ✅ | ✅ | Complete |
| Treegrid | ✅ | ✅ | ✅ | ✅ | Complete |
| Window Splitter | ✅ | ✅ | ✅ | ✅ | Complete |
Styling
- High contrast mode support
- Reduced motion preferences support
- Forced colors mode support
Contributing
We welcome contributions! Please see our Contributing Guide for details.