WCAG 2.2 Accessibility Overhaul for a Prescription Eyewear Store
Let's Connect
Overview
What we built
An online prescription eyewear retailer discovered that the shoppers it exists to serve, people with impaired vision, could not finish buying on its own store. We rebuilt the experience to WCAG 2.2 AA and made the checks permanent.
In plain terms: the store sold prescription glasses, yet its website failed the customers who most needed them. Shoppers using screen readers reached a prescription form whose fields carried no labels, so the software that reads pages aloud had nothing useful to say. Shoppers who rely on a keyboard rather than a mouse could not operate the frame-size selector at all. Text contrast was too low for people with low vision. When a formal accessibility complaint letter arrived, the problem acquired a deadline.
We audited the store's 30 core templates against the WCAG 2.2 AA standard and rebuilt the worst offenders, from the prescription form to frame selection, focus states and the colour system. Then we made it stick: automated accessibility checks now gate every deployment, and testing with real assistive technology is part of each release. Criteria passing rose from 52% to 94%, and where 2 of 10 screen-reader users once completed checkout unassisted, 9 of 10 now do.
The Problem
Checkout unusable with assistive tech
The retailer had built its business on prescription eyewear, online and through its 18 fitting studios, which made the discovery sharper: the online store was effectively closed to many of the very people it was for. The barriers were not obscure edge cases buried in rarely visited pages, they sat directly on the purchase path.
A screen-reader user arriving at the prescription form heard unlabelled fields, with no way to know which value belonged where. A keyboard user could tab towards the frame-size selector and then go no further, because the control answered only to a mouse. And the interface's low-contrast text asked the most of exactly the customers with the least vision to spare.
Then the accessibility complaint letter arrived. What had been a quality problem the team understood only in fragments became a legal exposure with a clock on it, and piecemeal fixes were no longer a credible answer. The store needed to know precisely how far short it fell, template by template, and to repair the failures in the order shoppers actually met them.
Unlabelled prescription form
The form at the heart of every purchase had fields without accessible labels, leaving screen-reader users guessing at which value went where.
Keyboard dead ends
The frame-size selector could not be operated from a keyboard, halting any shopper who does not or cannot use a mouse.
Failing contrast
Low-contrast text ran throughout the interface, hardest on the low-vision customers who make up the store's natural audience.
Complaint letter deadline
A formal accessibility complaint converted a known weakness into a dated obligation, with legal exposure attached to every further delay.
What it was costing them
Shoppers who could not finish checkout took their prescriptions elsewhere, and they were disproportionately the customers the brand was built for. Every release added to a backlog of automated violations, roughly 1,200 sitewide at the point of audit, and the complaint letter meant continued inaction now carried legal as well as commercial risk.
The Solution
WCAG 2.2 rebuild with automated gates
We started with evidence rather than assumptions: a full WCAG 2.2 AA audit across the store's 30 core templates, recording every failed success criterion and ranking templates by how badly they blocked real journeys. That map set the build order, and the worst offenders on the purchase path came first.
The rebuild answered the named failures directly. The prescription-entry form was rebuilt fully labelled, so screen readers announce every field correctly. Frame selection became keyboard-operable, with a non-visual fallback for the try-on experience. Focus states were made visible throughout, and a new colour system meets contrast ratios by construction, so a template cannot quietly ship an unreadable combination.
Just as important was making regression impossible to ignore. Automated accessibility checks now run against every deployment and block releases that fail, and moderated assistive-technology testing became a standing part of each release, putting real screen-reader journeys in front of the team before shoppers meet them.
Key decisions
Audit before rebuilding
Every one of the 30 core templates was measured against WCAG 2.2 AA first, so effort went to the failures that actually blocked purchases.
Purchase path first
The prescription form and frame selection were rebuilt before anything else, because those were the points where excluded shoppers were losing the sale.
Contrast by construction
The new colour system meets contrast ratios at the token level, so designers and developers cannot accidentally reintroduce unreadable text.
Gates, not one-off fixes
Automated accessibility checks run on every deployment and failing builds do not ship, turning accessibility from a project into a standing property of the store.
Test with real assistive technology
Moderated sessions with assistive-technology users are part of every release, catching what automated checks alone cannot see.
Measurable Impact
What changed after launch
The audit metrics moved decisively. WCAG 2.2 AA success criteria passing rose from 52% to 94% across the 30 core templates, and automated-audit violations fell from roughly 1,200 to under 50 sitewide. Those are the numbers a regulator or complainant would look at first, and they now tell a defensible story.
The human measures moved even further. In moderated testing, 9 of 10 screen-reader participants completed checkout unassisted, up from 2 of 10 at baseline. And the rebuilt prescription form proved a wider point: completion improved 17% for all shoppers, because a form clear enough for a screen reader is clearer for everyone.
Standards compliance
52% of WCAG 2.2 AA criteria passing
94% passing across the 30 core templates
Automated violations
Roughly 1,200 violations flagged sitewide
Under 50 remaining after the rebuild
Screen-reader checkout
2 of 10 participants finished unassisted
9 of 10 complete checkout unassisted
Release safety
No accessibility checks before shipping
Automated gates plus assistive-technology testing every release
Headline results
WCAG 2.2 AA success criteria passing rose from 52% to 94% across the 30 core templates
Automated-audit violations reduced from roughly 1,200 to under 50 sitewide
9 of 10 screen-reader test participants completed checkout unassisted, up from 2 of 10 at baseline
Prescription-form completion rate improved 17% for all shoppers after the rebuild
Tech & Tools Used
What powered the build
Every tool below earned its place in this engagement. Here is the part each one played.
Next.js
The framework the store's templates run on; the rebuilt pages use it to deliver semantic, accessible markup on every core journey.
React
Powers the rebuilt component library, so labelled fields, keyboard-operable controls and visible focus states are implemented once and reused across templates.
axe-core
The automated accessibility engine at the heart of the gating checks, scanning templates for violations on every change.
Pa11y CI
Runs the automated audits across the core templates in the pipeline, failing any build that introduces new accessibility violations.
Playwright
Drives keyboard-only journeys through frame selection and checkout in automated tests, proving the paths a mouse-free shopper depends on keep working.
Storybook
Hosts the rebuilt components in isolation, where labels, focus behaviour and contrast can be reviewed before a component reaches a template.
Tailwind CSS
Carries the new colour system as design tokens, making the contrast-safe palette the default path for styling every template.
GitHub Actions
Runs the accessibility checks on every deployment and blocks releases that fail, turning the audit's standards into an enforced gate.
NVDA
The screen reader used in moderated assistive-technology testing, walking real checkout journeys before each release ships.
Ready to Build your Eyewear E-Commerce Business with Accessibility & WCAG Compliance
Ask Byte
Ask Byte
Typically replies instantly
just Now
Hi! I'm OrganByte's assistant. How can I help you today?
AI-generated content may be incorrect
