ARIA Authoring Practices Guide
W3C's 30 canonical widget patterns with keyboard maps and working HTML examples
The APG is the W3C Web Accessibility Initiative's reference for building accessible UI widgets. Its Patterns index documents 30 widget patterns — accordion, combobox, dialog, grid, listbox, menu/menubar, tabs, treegrid, window splitter and the rest — each with the required ARIA roles, states and properties, a full keyboard-interaction table, and runnable vanilla HTML/CSS/JS examples. Companion Practices pages cover cross-cutting topics (names and descriptions, landmark regions, keyboard focus order, grid navigation). It is the source every component library cites when it claims a widget is accessible.
Reach for this before writing any custom interactive widget by hand — the pattern page tells you the exact role, aria-* attributes and arrow-key behaviour, so you can spec correctness instead of guessing. It pairs with Radix or React Aria: use those as the implementation and the APG page as the acceptance checklist, and quote the keyboard table straight into your tests. The pages are static server-rendered HTML, so a plain fetch of /WAI/ARIA/apg/patterns/<name>/ returns full readable text plus the example source — no JS execution needed.
Why it is here. It is the upstream authority that every accessible component library implements against, so it settles arguments that would otherwise be decided by whoever shouts loudest. For an agent it converts 'make it accessible' from a vibe into a testable spec.
- 30 documented widget patterns
- per-pattern keyboard interaction tables
- runnable vanilla HTML examples
- the spec Radix and React Aria cite
- fully fetchable static HTML
Verified 2026-08-16. HTTP 200. https://www.w3.org/WAI/ARIA/apg/patterns/ (fetched twice — WebFetch and raw curl, 49KB static HTML, all 30 pattern names and blurbs extracted), https://api.github.com/repos/w3c/aria-practices
