“You can't fix what you don't feel.”
A bite-sized, game-style experience that lets you feel how inaccessible design affects real people — and shows how to fix it using actual web accessibility standards (WCAG).
Built by drunkcaterpillar / @cryptidsanny on Substack
- Side-by-side simulations: "normal" vs. "disabled" vision, motion, cognition, etc.
- Real WCAG-based solutions built in.
- Pop-ups, flashing ads, fake UI chaos. You’ll hate it. That’s the point.
- Keyboard traps, shaky cursors, jargon floods, and more.
- End with a fake (but real-looking) certificate and shareable badge.
👉 Live demo (hosted on Vercel)
- React + Vite
- Framer Motion
- React Router
- React Share
- Plain CSS
| Type | Problems Simulated | WCAG Fixes Included |
|---|---|---|
| Low Vision | Zooming, color contrast, floaters, glare | Contrast ratios, responsive zoom |
| Motor Impairments | Shaky cursor, jumpy buttons | Larger targets, keyboard nav |
| Cognitive Load | Jargon, pop-ups, flashing ads, autoplay | Stop/pause, simplified content |
| Color Blindness | Red/green confusions, color-only links | Underlines, palette shift |
| Tunnel Vision | Peripheral loss simulation | Structured layout |
git clone https://github.com/drunkcaterpillar/accessibility-adventures.git
cd accessibility-adventures
npm install
npm run dev