Prologue
It began with an email, actually hundreds of emails. Customer support received numerous complaints from shoppers who couldn’t complete checkout using a keyboard, couldn’t read low-contrast text, or found the product zoom unusable with a screen reader. Leadership finally realised these weren’t edge cases; they were lost sales and reputational risk.
“We thought accessibility was a ‘nice‑to‑have’. The feedback made it clear we were locking people out.” — Head of Digital
Act 1 — The Wake‑Up Call
When I was brought in, I used the site exactly as a customer with disabilities would: colour-blind filters, NVDA screen reader, and keyboard-only navigation. What should have been a five‑minute purchase turned into a 20‑minute obstacle course. That visceral demo moved stakeholders faster than any spreadsheet ever could.
Act 2 — Mapping the Maze
I mapped every audit finding to the four WCAG principles—Perceivable, Operable, Understandable, and Robust (POUR)—so non-technical teams could understand why each barrier mattered.
| WCAG Principle | Example Barrier Found | Business Impact |
|---|---|---|
| Perceivable | Product images missing alt‑text | Check out dropout among keyboard‑only users |
| Operable | Keyboard focus trapped in mega‑menu | Higher form abandonment on the finance application |
| Understandable | Error messages relied on colour alone | Check out the dropout among keyboard‑only users |
| Robust | Custom components lacked ARIA roles | Inconsistent behaviour across assistive tech, hurting Core Web Vitals |
Act 3 — Fixing the Foundations
Rather than brute‑forcing every ticket, I told the story of Sam, a colour‑blind dad shopping for a sofa while juggling kids. Each sprint removed one obstacle in Sam’s journey:
- Sprint 1: See & Hear — Added descriptive alt‑text, transcripts, and achieved a 4.5:1 contrast ratio site‑wide.
- Sprint 2: Navigate — Re‑engineered tab order, added skip links, and created logical heading structure so Sam could jump straight to product details.
- Sprint 3: Decide & Pay — Clear, persistent form labels and inline validation prevented frustrating error loops.
I paired automated checks with live user testing from the Royal National Institute of Blind People (RNIB) to validate each release.
Act 4 — Empowering the Client’s Crew
The real plot twist? Accessibility became contagious inside the client’s teams. Designers swapped flashy carousels for semantic components; developers bragged about their axe‑core zero‑defect reports; content writers embraced plain language. I embedded POUR checklists into design reviews and CI/CD, so regression became almost impossible.
Act 5 — The Transformation
Six months after launch, Sam—and thousands like him—could finally shop without friction. The numbers told the sequel:
- +42 % organic sessions, powered by cleaner HTML and accessible rich snippets.
- Checkout conversion +15 % among assistive‑tech users, worth £2.3 million in annual revenue.
- Zero legal complaints since relaunch.
- External audit confirmed WCAG 2.2 AA compliance (97 / 101 success criteria passed).
“Accessibility stopped being a cost centre and became a competitive moat.” — Chief Marketing Officer
Epilogue — Lessons for Your Brand
- Story beats stats. Stakeholders move when they feel a barrier.
- POUR = STRATEGY. The four WCAG principles translate effortlessly into UX KPIs.
- Inclusive ≠ expensive. Folding checks into existing sprints cuts future dev costs by 40 %.
Tools & Stack
axe‑core | Siteimprove | Lighthouse | Google Looker Studio | Screaming Frog | Sitebulb | Wave tool | Colour‑blindness simulator