About APG Patterns Examples

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.

This project provides implementations for all 30 patterns defined in the WAI-ARIA APG , plus 2 additional patterns (Toggle Button and Data Grid) — 32 patterns in total.

Each pattern is implemented across all four frameworks: React, Vue, Svelte, and Astro (Web Components).