Practica11y
A gamified, browser-based learning platform for web accessibility. Developers solve interactive challenges directly in the browser to learn the practical implementation of accessibility and WCAG guidelines.
Practica11y is a gamified, browser-based learning platform for web accessibility. Instead of just reading about accessibility, developers solve interactive challenges directly in the browser and learn the practical implementation of inclusive web development.
The mission is to raise awareness for web accessibility, sharpen the understanding of WCAG guidelines, and turn inclusive development into a natural habit. Whether you are just starting out or deepening your expertise — hands-on practice makes the difference.
The platform is entirely client-side, so there is no backend required. All progress is stored locally in the browser.
Features
- Interactive challenges solved right in the browser with a built-in Monaco editor
- Live accessibility analysis powered by
axe-coreanddom-accessibility-api - Accessibility tree visualization to inspect the semantic structure of a solution
- Virtual screen reader that simulates how a screen reader announces the preview, with step, auto-play and speed controls (powered by Guidepup and the Web Speech API)
- Color contrast checker that lets learners pick elements in the live preview to inspect foreground/background contrast ratios against WCAG 2.1 AA and AAA thresholds
- Keyboard and focus analysis to surface focus traps, tab order and non-focusable interactive elements
- Sandboxed live preview of the user's solution
- Instant feedback via per-challenge validators
- Gamification with XP, levels and achievements, plus local progress tracking to keep learning motivating
Tech Stack
Built with Angular (Standalone Components, Signals, Zoneless Change Detection), organized as an Nx monorepo, styled with Tailwind CSS, and tested with Vitest.