APG Patterns Examples

Accessible UI component implementations across React, Vue, Svelte, and Astro following WAI-ARIA APG patterns

日本語 | English

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	-	-	-	-	Planned
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	-	-	-	-	Planned
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 on:

• Development setup and workflow
• Coding standards and guidelines
• Component implementation requirements
• Testing requirements
• Pull request process

Quick Contributing Steps

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-component
3. Follow our coding standards
4. Ensure all tests pass and code is formatted
5. Submit a pull request

Development Guidelines

• Follow APG patterns precisely
• Write tests including accessibility checks
• Document accessibility features thoroughly
• Use semantic commit messages

Security

For security concerns or to report vulnerabilities, please see our Security Policy.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Links

• WAI-ARIA Authoring Practices Guide
• Live Demo
• Issue Tracker
• Discussions