ShopSmart has received an urgent legal notice about accessibility barriers on its public storefront. Customers cannot reliably navigate the page by keyboard, important images have no text alternatives, several controls use incorrect semantics, and the visual design does not meet WCAG contrast requirements. Audit the homepage, understand the failures, and repair the most serious problems before regulators escalate the case.
Play This Challenge to Learn
- How to interpret automated axe-core accessibility reports and the rule IDs they produce
- How semantic HTML affects keyboard and assistive-technology behavior, and why a styled
divis not a button - How to identify and correct WCAG color-contrast failures
- How to provide useful text alternatives for informative images, and when an image should be marked decorative instead
- How to verify accessibility outcomes with Playwright and Lighthouse
Play Now
Share your solution in this thread. We would like to hear which failures the scanner caught for you and which ones you only found once you put the mouse down.
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!
