Accessible component showcase

A refined, production-grade reference for WAI-ARIA Authoring Practices. Each widget is genuinely keyboard- and screen-reader-accessible — not just styled to look like it.

WCAG 2.2 AA WAI-ARIA 1.2 Vanilla JS · No dependencies 200% zoom safe

1 Modal Dialog

Tab trap · Esc close · Click backdrop

Focus moves into the dialog on open, cycles only within it, and returns to the trigger on close. The page behind is inert while open.

role="dialog" aria-modal="true" aria-labelledby focus trap + inert background

2 Dropdown Menu

Down open · Up/Down navigate · Enter select · Esc close

Button exposes aria-haspopup="menu" and aria-expanded. Arrow keys wrap, Home/End jump, Tab closes naturally.

aria-haspopup="menu" role="menuitem" roving focus with wrapping

3 Tabs

← → switch · Tab enters panel

Exactly one tab in the tab order. Arrow keys move focus and activate. Hidden panels use the hidden attribute.

Project overview

Prism is a design-system reference that proves accessibility and aesthetics aren't at odds. Every interaction is keyboard-tested and screen-reader-verified.

98.4%Accessibility score · Lighthouse
0 depsVanilla JS, hand-written CSS

View documentation →

role="tablist" aria-selected hidden on inactive panels

4 Combobox

Type to filter · ↑↓ highlight · Enter select · Esc revert

Uses the aria-activedescendant pattern — the listbox itself is never focusable. Typing filters ~20 options; highlight scrolls into view.

Start typing to see suggestions.

role="combobox" aria-activedescendant aria-controls → listbox

5 Accordion

Enter / Space toggle · Multiple open

Each button controls its region via aria-controls and aria-expanded. Regions animate height, then toggle hidden.

A shared focusTrap utility keeps Tab cycling inside modals. On close, focus returns to the trigger. While a modal is open, the page behind is made inert via aria-hidden and focusability removal — so screen readers and keyboards can't escape.

aria-expanded aria-controls animate height → toggle hidden