Practica11y is a gamified, browser-based learning platform for web accessibility. Developers solve interactive challenges directly in the browser to learn the practical implementation of accessibility.
The mission is to raise awareness for web accessibility, sharpen understanding of WCAG guidelines, and turn inclusive development into a natural habit. Whether you're just starting out or deepening your expertise — hands-on practice makes the difference.
The platform is entirely client-side — no backend required. Progress is stored locally in the browser and can optionally be synced across devices via GitHub sign-in (OAuth Device Flow). Synced progress is stored in a private GitHub Gist owned by the authenticated user.
- Node.js >= 24
- pnpm >= 11
- Git
pnpm installpnpm nx serve practica11yThe application will be available at http://localhost:4200.
pnpm nx run-many --target=testpnpm nx run-many --target=lintpnpm nx build practica11ypnpm exec prettier --write .The project is organized as an Nx monorepo. The application and reusable libraries are clearly separated:
apps/
practica11y/ # Angular App (Standalone Components, Signals, Zoneless)
libs/
challenge/
models/ # Challenge data models
loader/ # Challenge loading and frontmatter parsing
validators/ # Validation logic (generic + challenge-specific)
preview/
sandbox/ # Sandboxed iframe for live preview
accessibility/
axe/ # axe-core integration
tree/ # Accessibility tree generator
keyboard/ # Keyboard analysis
focus/ # Focus analysis
features/
challenge-shell/ # Main challenge view with analysis pipeline
challenge-list/ # Challenge overview list
challenge-feedback/ # Feedback panel
accessibility-tree/ # Tree visualization
virtual-screen-reader/ # Screen reader announcement simulator (Guidepup)
color-contrast-checker/ # Color contrast inspection panel (colorjs.io)
shared/
ui/ # Shared UI components
util/ # Gamification, ProgressStore, LayoutStore, ErrorHandler
types/ # Shared TypeScript types
- Angular (Standalone Components, Signals, Zoneless Change Detection)
- Nx (Monorepo build system)
- Tailwind CSS 4
- Vitest (Unit and integration tests)
- Monaco Editor (Code editor)
- axe-core + dom-accessibility-api (Accessibility analysis)
- @guidepup/virtual-screen-reader (Screen reader announcement simulation)
- colorjs.io (WCAG 2.1 contrast ratio calculation)
- TypeScript (strict mode)
- pnpm (Package manager)
Contributions are welcome! Whether it's reporting bugs, suggesting new challenges, improving documentation, or submitting pull requests — every bit helps make accessibility education better.
- Report a bug or request a feature: Open an issue
- Submit a pull request: Fork the repo, create a branch, and open a PR
- Suggest a challenge: Have an idea for a new accessibility challenge? Open an issue and describe it
Please make sure your contributions follow the existing code style and pass all tests before submitting.
If Practica11y helps you on your accessibility journey, consider supporting its development:
Every contribution — big or small — helps keep this project alive and growing.
Danny Koppenhagen
- Website: k9n.dev
- GitHub: @d-koppenhagen
- Bluesky: @k9n.dev
- LinkedIn: d-koppenhagen
The application is deployed via GitHub Pages and available at practica11y.dev.
The build output (dist/apps/practica11y/browser) is published to GitHub Pages. A CNAME file in the public/ folder ensures the custom domain is preserved on each deploy.
Architecture documentation and further details can be found in the docs/ folder.
MIT