Component library · Accessibility showcase
Accessible components, done right
Five core widgets built to the WAI-ARIA Authoring Practices. Every example is fully operable with the keyboard alone, and every ARIA attribute stays in lockstep with what you see. Press Tab and start exploring.
01 · Dialog
Modal Dialog
role="dialog" · aria-modal
A dialog that traps focus, makes the page behind it inert, and returns focus to the trigger on close. Escape and the backdrop both dismiss it.
Enter open · Tab/Shift+Tab cycle within · Esc close, focus returns to trigger
03 · Tabs
Tabs
role="tablist"
Exactly one tab in the tab order at a time. Arrow keys move and activate; hidden panels carry the hidden attribute so they never enter the accessibility tree.
AriaKit ships five core widgets, each a single self-contained pattern from the WAI-ARIA Authoring Practices. No state is visual-only — every open, selected, or expanded condition is mirrored in ARIA attributes, and every widget is reachable with the keyboard alone.
<div role="tablist" aria-label="Docs">
<button role="tab" id="tab-1" aria-selected="true"
aria-controls="panel-1" tabindex="0">Overview</button>
<button role="tab" id="tab-2" aria-selected="false"
aria-controls="panel-2" tabindex="-1">Usage</button>
</div>
<div role="tabpanel" id="panel-1"
aria-labelledby="tab-1" tabindex="0">…</div>role="tablist"groups the tabs and announces the set.aria-selected+tabindexkeep exactly one tab in the tab order.aria-controls↔aria-labelledbylink each tab to its panel.hiddenremoves closed panels from the accessibility tree.- Arrow keys move and activate;
Home/Endjump.
←/→ move & activate · Home/End jump · Tab into panel content
04 · Input
Combobox
aria-activedescendant
The listbox is never focusable — the input owns focus and tracks the highlighted option by ID. Typing filters, and Esc reverts to the value the list opened with.
Nothing selected yet.
Type filter · ↓/↑ highlight, wraps · Enter select · Esc revert & close
05 · Disclosure
Accordion
aria-expanded
Buttons toggle regions; several may be open at once. Height animates via the Web Animations API while hidden is applied only at the end of the animation.
Enter and Space toggle the region; focus stays on the button, and the content becomes reachable by Tab while open. Multiple regions may be open at the same time.
Each region uses role="region" with aria-labelledby pointing at its button, so the name is announced when the region is expanded. aria-expanded changes before the animation starts, keeping the state honest.
When prefers-reduced-motion: reduce is set, regions toggle instantly — no height animation, no transitions anywhere on the page.
Enter/Space toggle · multiple open at once · Tab into open content