ARIA Authoring Practices Guide

W3C's 30 canonical widget patterns with keyboard maps and working HTML examples

Tier S · Best in classReferenceDesign System DocsChecklistw3.org

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.

For an agent

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.

Install command, framework, licence and component list.

Facts

License: BSD
Pricing: Free, Open source
Framework: Vanilla JS
Styling: Vanilla CSS
Distribution: GitHub repository, Copy-paste snippet
Platform: Web, Platform agnostic
Content type: Prose / writing, Code
Agent readiness: Structured documentation, Copy-paste ready code, Readable open source
Accessibility: Full ARIA pattern implemented, WCAG 2.x AA, Keyboard navigable, Focus management and visible focus, Screen reader tested, Semantic HTML
Maturity: Actively maintained
GitHub stars: 1,341

Components it ships

30 total

Helps you build

Submitting A Form Showing Input Error Filtering Items Keyboard Shortcuts Overlay Settings Web App Command Palette

Notable for

30 documented widget patterns
per-pattern keyboard interaction tables
runnable vanilla HTML examples
the spec Radix and React Aria cite
fully fetchable static HTML

Provenance

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

Also in Design Systems & Brand Guidelines

w3.orgTier S