Web Applications

Checkout accessibility remediation for an online grocer

Built by Bianca Yumul

Took an Australian grocer's checkout from a failed WCAG audit to a clean re-audit in four months, without a redesign budget and without missing the Christmas freeze.

  • Builder email verified

    Verification

Type
Professional
Category
Web Applications
Published
Jul 26, 2026
Updated
Jul 26, 2026
Built withReactNext.jsPlaywrightTypeScript
TopicsE-commerce

About this project

The problem

The client — an online grocer — failed an external WCAG 2.1 AA audit ahead of a contract that required accessibility compliance, with over sixty findings concentrated in checkout: a substitution dialog screen readers couldn't operate, cart updates that announced nothing, focus that vanished after applying a voucher. The commercial side was blunt about it — no clean re-audit, no contract — which is the kind of clarity frontend work rarely gets.

My role

One of two frontend developers on the remediation squad, for four months, with the auditor's findings spreadsheet as our backlog. I was the one who learned to drive a screen reader properly and became the de facto reviewer for every fix, which was not in the plan but is how it went.

What I owned

I owned the worst cluster of findings: the substitution flow — the dialog where you approve or reject replacements for out-of-stock items — plus the payment step and the live announcement strategy for cart changes. I also built the keyboard-only Playwright suite that now guards the fixed behaviours in CI, and wrote the internal guide for testing with a screen reader that the client's own team still uses.

Technical & product decisions

The defining call was rebuilding the substitution dialog on native semantic elements instead of patching the existing div-construction with ARIA attributes — the auditor's findings were symptoms of a structure that was wrong underneath, and patching would have fixed the spreadsheet, not the experience. For cart updates I rate-limited the live-region announcements after real testing showed that announcing every quantity change turned a weekly shop into a filibuster; the final behaviour batches changes and announces a summary. Both decisions came from testing with a screen reader for real, which I'd recommend over any checklist.

Constraints

No redesign budget — every fix had to land inside the existing visual design, pixel for pixel, because the design team was consumed by a rebrand we were not allowed to know about. The client froze deployments for six weeks over their Christmas trading peak, which cut our four months to effectively ten working weeks and forced the riskiest structural fixes into the first sprint, exactly where deadline logic says they shouldn't go.

Result & impact

The re-audit came back with three minor findings, all outside checkout, and the contract was signed. Support tickets tagged as accessibility-related — mostly variations of 'cannot complete my order' — dropped to near zero within a quarter. The keyboard-only suite has since caught four regressions before release, including one introduced by the rebrand we eventually did get to know about, which felt like vindication twice over.