Accessible Dialog
Hello
Native fallback using the Popover API. The React island will hydrate here when available.
React islands (with HTML fallbacks)
Combobox / Command
Fallback combobox using datalist.
Toaster (polite)
Ready.
Modern Web APIs (with graceful fallbacks)
- View Transitions — fluid page/section changes without losing focus. Fallback: default navigation.
- Popover (+
:has(), inert-ready) — native menus/dialogs, simple focus. Fallback: CSS/JS modal. - Container Queries — components adapt in place. Fallback: global media queries.
- Scroll-Driven Animations — calm micro-motion tied to reading. Fallback: animations off by preference.
- Web Audio — local pink/white/brown noise with timer. Fallback: disabled respectfully.
- Web Speech — local TTS narrator presets. Fallback: disabled respectfully.
Proof mode (built-in a11y helpers)
Toggle tab order map, landmarks outline, and live contrast badges.
Proof mode ready.
Tech sheet (calm architecture)
Principles. Local-first, progressive enhancement, sobriety. Home = semantic HTML + Vanilla JS. /lab = React islands.
Stack. HTML, CSS, Vanilla JS, React islands; View Transitions, Popover, Container Queries, Scroll Animations, Web Audio, Web Speech.
Perf budgets. HTML < 30 KB, CSS < 20 KB, JS (home) < 50 KB. No third-party tracking. Fonts system.
A11Y. Keyboard first, visible focus, RMW respected, polite ARIA. Contrast AA/AAA by default in dark-first.
Fallbacks. Every API degrades gracefully to a native or simple pattern.