AriaKit Showcase
A collection of fully accessible, keyboard-operable UI components built with vanilla JavaScript and WAI-ARIA patterns.
Modal Dialog
role="dialog"
Tab cycles within · Esc closes · focus returns to trigger
Tabs
role="tablist"AriaKit Overview
AriaKit is a lightweight, zero-dependency component library focused on accessibility. Every widget follows WAI-ARIA Authoring Practices and is fully operable with keyboard alone.
Key Features
- Focus trapping in modal dialogs
- Roving tabindex for tab lists
- Aria-activedescendant pattern for comboboxes
- Screen reader announcements via live regions
Usage Example
All components are initialized automatically on DOMContentLoaded. No API calls needed — just use the markup and interact with keyboard or mouse.
←→ switch tabs · only active tab is in tab order · panels reachable by Tab
Combobox
role="combobox"
↓↑ highlight · Enter select · Esc close & revert · typing filters
Accordion
aria-expandedWAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) is a set of attributes that define ways to make web content and applications more accessible to people with disabilities.
Focus trapping intercepts the Tab key within a container, redirecting focus to the first focusable element when reaching the last one (and vice versa with Shift+Tab). This ensures users cannot accidentally tab outside of modal dialogs.
The roving tabindex pattern ensures only one element in a group (like tabs or radio buttons) has tabindex="0", while others have tabindex="-1". Arrow keys move focus within the group, and Tab moves to the next widget. This creates a single tab stop for the entire group.
The aria-activeddescendant pattern is used when the container (like a combobox input) retains focus while arrow keys navigate child elements. The attribute points to the ID of the currently highlighted option, informing assistive technologies which item is active without moving DOM focus.
Enter/Space toggle · multiple panels may be open at once