Components that work for everyone

A polished showcase of five WAI-ARIA patterns — built with vanilla HTML, CSS and JavaScript. No frameworks, no shortcuts, just correct semantics, focus management and keyboard contracts.

5 accessible patterns ⌨︎ Fully keyboard operable ♿ Screen-reader tested 200% zoom safe

1 Modal Dialog

Tab trap · Esc close · Focus returns

Opens from a button, traps focus, closes on Esc or backdrop click. Background becomes inert so screen readers and keyboards can’t escape.

2 Dropdown Menu

↓ open · ↑↓ navigate · Enter select · Esc close

Button with aria-haspopup="menu". Opens on click, Enter, Space or ↓. Arrow keys wrap, Home/End jump.

3 Tabs

← → switch · Tab reaches panel content

Exactly one tab in the tab order. ← → move focus and activate. Hidden panels use hidden so they’re inert.

Active sprints
3 running
2 due this week. View board
Coverage
94.2%
+1.4% from last release

4 Combobox

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

Input uses role="combobox" + aria-activedescendant. The listbox itself is never focused; the input retains focus.

    Start typing to see 20 cities.

    5 Accordion

    Enter / Space toggle · Multiple open · Animated

    Disclosure buttons with aria-expanded / aria-controls. Regions animate height, then toggle hidden so assistive tech stays in sync.

    Prism is a tiny, copy-pasteable set of WAI-ARIA patterns. Each component is plain HTML/CSS/JS so you can audit every aria-* attribute.

    It’s designed to be a reference you ship, not just a demo.

    Built for keyboard, screen reader and 200% zoom. No frameworks, no dependencies.