Making a Legacy Store ADA-Ready: Theme Migration, WCAG Fixes, and a Modern Storefront for The Jade Mine

The Jade Mine was running on Archetype's Expanse theme version 1.0.3, a build from years ago with 174 theme files. Shopify had moved on. The new Expanse 9.x line brought better performance, modern section architecture, and Search & Discovery support, but a straight upgrade was not realistic. Too much had been customized over the years.

On top of that, the client had recently gone through an ADA lawsuit. Their old site had known accessibility gaps, and launching a new theme without fixing those properly would have been repeating the same risk.

After we migrated and refreshed the site, their ADA report score actually dropped (from 6.5 to 5.9). That forced a deeper pass. We discovered that passing axe-core did not mean passing the tool their compliance report actually used (WAVE). Different tools, different rules, different numbers.

Along the way we also hit practical merchant issues: a New Arrivals collection that never expired old products, a navigation menu restructure the client did not want, and megamenu layout problems on the refreshed header.

We treated this as a controlled rebuild, not a file swap. We pulled the live theme as reference, stood up a fresh Expanse 9.1.0 theme, and migrated merchant settings page by page across 10 phases: branding, header, homepage, product pages, collections, cart, content pages, footer, apps, and QA.

Accessibility work ran in parallel and continued after launch:

Fixed contrast, form labels, landmarks, ARIA references, duplicate IDs, and focus traps in theme code

Built custom Playwright audit scripts that replicate WAVE (not just axe), because that is what moved the client's score

Validated every fix on the live site in a real browser, since plain HTTP requests return stale cached HTML on this store

We prioritized native code fixes over relying on an accessibility overlay. The client chose to keep their Consentmo ADA widget enabled for scoring purposes, but the actual remediation lives in the theme.

Accessibility was the thread that ran through the entire project. We targeted WCAG 2.1 Level AA and documented every fix in a dedicated accessibility log.

Pre-launch fixes:

• Turned off autoplay on homepage slideshows (WCAG 2.2.2: users need pause control)

• Fixed failing color contrast on two brand color schemes (teal and sale red were both below 4.5:1)

• Rebuilt the dealer registration form with proper fieldsets, legends, visible labels, and screen-reader-friendly error announcements

• Strengthened collection hero overlays so white text stays readable on light product photography

• Added clear keyboard focus styles on custom form inputs

Post-launch pass (after the score dropped):

• Removed 39 redundant title attributes on quick-add buttons (WAVE alert count went from 62 to 23)

• Fixed duplicate search form IDs across header, mobile, and drawer (three copies of the same hardcoded ID were tripping "multiple form labels" errors)

• Repaired broken aria-controls references on cart and mobile nav

• Added proper HTML landmarks (contentinfo, regions, aside) across footer and announcement bar

• Fixed focusable elements hidden inside aria-hidden containers (promo cards, hero slides, product recommendations)

• Added dark fallback surfaces behind hero and promo images so contrast checkers do not report white-on-white when text sits over photography

• Fixed pagination current-page styling (40% opacity was failing contrast at 2.85:1)

• Swapped AI-generated hero art for the merchant's own photography and added a mobile scrim so portrait crops stay readable

• axe-core: 25 violations on homepage down to 0

• All 6 audited page types (home, collection, product, about, contact, FAQ) at 0 axe violations

• WAVE homepage alerts: 62 down to 23

• Built 25 custom audit scripts so fixes could be verified and re-run after every deploy