Build accessible UI
Everything you need to ship a correct interface — the design foundations, ready-to-copy components, and live interactive-widget demos. Pick a shelf to start.
Also in Build
Foundations
The design tokens under everything — colour ramps with live contrast readouts, type, spacing and focus.
Interactive widgets
Live, keyboard-operable APG demos — dialog, combobox, menu, tabs, tooltip and more — with copy code and ARIA notes.
Components
Design-system building blocks — each with a live demo and copy-paste accessible markup.
-
Button
Primary, secondary, ghost, danger and link buttons, plus icon-only and disabled states.
-
Form fields
Labelled inputs, selects, textareas, radio and checkbox groups, hints and error states.
-
Callout
Note, tip, warning, success and danger admonitions — icon plus a word, never colour alone.
-
Badge
Standard and conformance-level badges for WCAG, EN 301 549, Section 508, ADA and more.
-
Code block
A code example with a filename bar and an accessible copy-to-clipboard button.
-
Table
A semantic data table with caption, scoped headers and a keyboard-scrollable region.
-
Breadcrumb
An ordered breadcrumb trail in a labelled nav landmark, current page marked.
-
Disclosure & accordion
Show/hide regions toggled by a real button with aria-expanded.
-
Tabs
A WAI-ARIA tabs widget with roving tabindex and arrow-key navigation.
-
Side navigation
A sidebar section nav with a clear current-page indicator that is not colour alone.
-
Theme switcher
A radio-group control for the System, Light, Dark and High-contrast themes.
-
Do / Don’t compare
A side-by-side do/don’t comparison that pairs colour with a word and an icon.
-
Issue card
The teaching unit: a problem, mapped standards, Bad/Good/Code tabs and fix steps.