Meet the Contributors
This adventure was designed by Homayoun Mohammadi, a frontend developer with 4+ years building production apps in Next.js, React, and TypeScript. He contributes to open-source projects at Microsoft, W3C, and GitHub, and authored two npm packages: a 12-language RTL text engine and a TypeScript SVG mapping toolkit.
The beginner level was built by Ehtasham Yasin, a full-stack and AI automation engineer with 4+ years of frontend experience in React and Next.js. He builds API-driven systems and automated workflows with Docker and n8n, and works across DevSecOps and open-source development.
Thank you Homayoun and Ehtasham for bringing this adventure to life!
The Backstory
ShopSmart is an online retailer moving into the European market, and support has traced a run of abandoned orders back to the storefront itself. Product photos carry no text alternative, checkout errors are never announced, the main menu cannot be reached from a keyboard, and focus outlines are styled off across the site. Complaints turned into a legal notice citing the ADA and the European Accessibility Act, and the EU launch is on hold. As the lead frontend engineer, your mission is to audit the storefront, fix what blocks these customers, and add checks that stop the same faults shipping again.
Assistive technology works from the semantics a page exposes: what each element is, what it is called, what state it is in, what it belongs to. Scanners read the rendered DOM and settle only what is statically decidable, like a missing alt attribute or a contrast ratio. Whether alt text is meaningful, whether focus order follows the layout, whether an error is announced, none of that shows up in a snapshot. A page can pass every rule in the ruleset and still be unusable.
The three levels work across that line. The homepage audit covers what scanning does well, contrast and missing text alternatives, then the first thing it cannot see: whether the page works from a keyboard at all. Checkout covers the rest, containers dressed as controls that report clean while stranding a keyboard user behind a modal and swallowing a validation error. The last level turns to the accessibility gate itself, green for months without once loading the pages a customer pays on. You come away with a sense of how far each layer of testing actually reaches, from linting your source, to scanning the DOM, to driving the page with a keyboard, to watching real sessions.
Technologies: React, Playwright, axe-core, Lighthouse, Guidepup Virtual Screen Reader, WCAG 2.2
The entire storefront is pre-provisioned in a Dev Container. You don’t need to set up anything locally. Just focus on solving the problem.
Ready to Start?
Head over to the challenge docs for more information.