From 17 WCAG Violations to Zero Critical Errors
How a leading natural oils wholesaler made its 700-page WooCommerce store fully accessible — fixing template-level defects that repeated across hundreds of product pages.
17
Violation types eliminated
700
Pages covered
98
Lighthouse score (projected)
0
Critical failures remaining
A 700-page wholesale storefront with a template-level problem.
The client is a woman-owned wholesale distributor of natural and organic ingredients — supplying essential oils, carrier oils, butters, waxes, bases, and fragrances to soap makers, candle makers, and beauty manufacturers across the Pacific Northwest. Their WooCommerce storefront spans roughly 700 indexed pages: homepage, ~600 product and category pages, checkout, blog, and informational content.
A handful of template-level accessibility defects repeated across hundreds of pages, multiplying a few code issues into thousands of barriers for assistive-technology users. The storefront is B2B, serving professional buyers who often purchase in volume — making an inaccessible checkout or catalog a direct revenue problem, not just a compliance risk.
17 violation types. Hundreds of pages affected.
Missing alt text
Product and subcategory images had no alternative text, leaving screen-reader users with no idea what they were browsing.
Indiscernible links
Link text on dozens of elements was empty or ambiguous — navigation announced as blank to assistive technology.
Zoom disabled
Pinch-to-zoom was blocked at the viewport level — a hard barrier for low-vision shoppers and a critical WCAG failure on mobile.
Contrast as low as 1.80:1
Gray body and link text failed WCAG AA minimum contrast ratios, in places dropping to 1.80:1 against the background.
Broken heading structure
The page lacked a proper H1, headings skipped levels, and landmark regions were incomplete — confusing for screen reader navigation.
Unlabelled form controls
Search and filter form controls had no accessible names, making them unusable via keyboard or assistive technology.
Structured engineering, not a one-time scan.
Full Multi-Tool Audit
We ran Google Lighthouse, WAVE, and an axe-core based scanner — reconciling findings into a single Excel tracker mapped to WCAG success criteria, severity, affected template, and exact fix required.
Prioritised Remediation
Template-level quick wins first — fixing alt-text handling, heading hierarchy, and viewport zoom resolved the same defect across hundreds of pages at once. We then worked down through serious and moderate issues.
Verification Re-Audit
An independent re-scan across all three tools confirmed every remediation held. Each fix was verified against its WCAG criterion before being marked closed in the tracker.
Six-Month Review Cycle
A recurring review keeps the site compliant as new products and pages go live. Template-level fixes mean new catalog entries are accessible by default.
Three-tool audit methodology
- Google Lighthouse — structural and performance signals
- WAVE — visual contrast and form label detection
- axe-core scanner — precise WCAG criterion mapping
Excel violation tracker
Every issue mapped to its WCAG criterion, severity, responsible template, and exact fix. Turned 17 problems across 700 pages into a prioritised, manageable backlog.
Template-first thinking
One fix to the WooCommerce archive template resolved the same heading defect across 600 product and category pages simultaneously.
Three clear workstreams.
- Re-enabled pinch-to-zoom and viewport scaling
- Restored a single proper H1 on every template
- Corrected heading levels — no more skipped levels
- Added the missing main landmark
- Ensured all content sits inside named landmark regions
- Alt text for all product and subcategory images
- Discernible text and labels for empty/icon-only links
- Accessible names for search and filter form controls
- Replaced #888888 and #999999 with #767676 (clears 4.5:1 AA)
- Preserved the brand's clean, light visual style
- Added underlines to links — not color alone
- Single stylesheet change cascades across every page
Toggle to see the change.
Use the before/after controls on each card to see exactly how each metric moved.
WCAG Violation Types
Critical Failures
Lighthouse Score
WAVE Contrast Errors
Pages Covered
Zoom / Scaling
The numbers tell the story.
Across all three independent tools, the site went from 17 violation types with multiple critical failures to zero critical errors.
| Metric | Before | After Core Fixes | After Contrast Pass |
|---|---|---|---|
| WCAG violation types | 17 | 0 critical remaining | 0 |
| Critical failures | Multiple (zoom, alt text) | 0 | 0 |
| Lighthouse accessibility | Failing | 83–88 | 91–98 (projected) |
| WAVE contrast errors | 28 | 28 | 0 (projected) |
| Pages covered | 0 of ~700 | ~700 | ~700 |
Projected figures reflect the validated fix applied site-wide at the template level; full-site re-scan scheduled as part of standard verification.
Beyond a passing score.
Legal risk reduced
WCAG AA conformance materially lowers exposure to ADA accessibility lawsuits increasingly targeting e-commerce.
SEO lift included
Alt text and clean heading structure help crawlers parse the catalog — the same signals assistive technology relies on.
Revenue unlocked
Restoring zoom and contrast directly served older and low-vision professional buyers, removing a locked door to purchase.
Maintained, not rediscovered
Six-month review cycles mean new product pages are accessible by default as the catalog grows.
Make your store accessible.
If your e-commerce site has never been audited against WCAG, it almost certainly has the same template-level issues this storefront did — repeated across every product page. We can run a full multi-tool audit, deliver a prioritised remediation tracker, fix the issues at the template level, and verify the result with an independent re-scan.