In Accessibility Nightmare: The Checkout Trap, you arrive at a storefront the team has already declared fixed. Every automated scan comes back green, and the complaints keep arriving anyway. Support has traced all of them to the checkout.
Your mission? Make the purchase work with a keyboard alone, and make every step audible to a screen reader.
Intermediate: The Checkout Trap
In this level, you will fix the faults a scanner does not report, on a page axe-core reports as clean.
What You’ll Learn:
- Focus Management: How to move, hold and restore focus across a modal boundary, and why hiding the background is not the same as putting it out of reach.
- ARIA Patterns: How to build a select-only combobox that reports its own role, name, value and state.
- Live Regions: How a validation failure reaches a screen reader user, and why a region that appears at the same moment as its text will never announce.
- Scanner Limits: Why an automated scan can report a clean page that no keyboard or screen reader user can operate.
The Tech Stack:
- React & Vite
- Playwright with real key presses
- Guidepup Virtual Screen Reader
- axe-core
- WCAG 2.2
Verify your solution inside your Codespace and generate a Certificate of Completion.
Ready to Start?
Start the Challenge
Tab is the only tool you need.