WCAG Accessibility for Ecommerce: Why Overlay Widgets Don't Work and What Actually Does
You've probably seen the ads: "Add our widget and you're ADA compliant." If you run a Shopify store or any ecommerce site, that pitch is everywhere. It's also wrong — and courts have started spelling that out explicitly. Here's what actually matters for WCAG compliance, why overlays are a waste of money, and what genuinely reduces your legal exposure.
In this guide
- Why Accessibility Matters NOW (2026)
- What is WCAG 2.1 Level AA?
- Top 5 Accessibility Violations on Ecommerce Sites
- Why Overlay Widgets Fail (And What Courts Say)
- What Actually Works: Real Accessibility Fixes
- How to Audit Your Site for Free
- The Business Case for Accessibility
- Frequently Asked Questions
Why Accessibility Matters NOW (2026)
Three things happened in 2025-2026 that pushed this issue past the point of "we should probably deal with this someday":
1. ADA Lawsuits Hit Record Highs
4,605 ADA Title III lawsuits were filed in 2024 — a record high, per the UsableNet annual report. And here's the part that should get your attention: over 800 of those businesses were sued despite having an accessibility overlay widget installed. Courts are starting to be explicit that overlays alone don't satisfy legal requirements.
The playbook is consistent: a plaintiff's attorney finds a site with an overlay, runs a screen reader through it, finds barriers, and files. The overlay doesn't matter if the underlying HTML is broken.
2. The European Accessibility Act (EAA) Deadline
If you sell to EU customers: June 28, 2025 is when the European Accessibility Act took effect. It requires all online retailers selling physical goods or services in the EU to meet WCAG 2.1 Level AA. This applies to your Shopify store even if you're based in North America, Canada, or anywhere else.
Same standard as the US ADA — WCAG 2.1 AA. No overlay shortcuts. Real fixes.
3. Canada's AODA Keeps Growing
The Accessibility for Ontarians with Disabilities Act (AODA) has required Ontario businesses to meet WCAG 2.1 Level AA since 2021. Other Canadian provinces are following. For Ontario merchants, this isn't a guideline — it's law.
And beyond the legal stuff: 1 in 5 people in North America have a disability. If your site doesn't work for them, you're turning away customers. That's the moral case in one sentence.
What is WCAG 2.1 Level AA?
WCAG stands for Web Content Accessibility Guidelines. Level AA is the middle tier — and it's the one regulators actually enforce. Here's the structure:
The 4 Principles (POUR)
| Principle | What It Means | Example |
|---|---|---|
| Perceivable | Content must be visible/hearable for all users | Alt text on images; captions on videos; sufficient color contrast |
| Operable | Users must be able to navigate and use all features | Full keyboard navigation; buttons that work without a mouse |
| Understandable | Information and instructions must be clear | Plain language; consistent navigation; labeled form fields |
| Robust | Code must work with assistive technologies | Proper HTML semantics; ARIA labels where needed |
WCAG 2.1 Level AA has 50 specific criteria across those four principles. You don't need to ace every single one — but courts and regulators expect a genuine effort and a track record of fixing things when you find them.
Top 5 Accessibility Violations on Ecommerce Sites
Per WebAIM's annual analysis and WCAG compliance reports, these five violations show up on nearly every non-compliant ecommerce site:
1. Missing Alt Text on Product Images (The #1 Violation)
What it is: Images with no alt text. A blind user's screen reader reads nothing — they have no idea what the product looks like or why they should care.
How to fix it:
- Write descriptive alt text for every product image:
<img src="shoe.jpg" alt="Red Nike Air Force 1 Low, size 10, leather"> - "Shoe" or "product image" doesn't cut it — describe the details a buyer would actually want to know
- Shopify: the "Alt Text" field is right there in your product image settings. Takes 30 seconds per image.
- SEO bonus: Google uses alt text for image search ranking. Fix accessibility, get more traffic. Not a bad deal.
Real impact: A store with 1,000 products and zero alt text has 1,000 accessibility violations. Fix just this one thing and your accessibility score jumps roughly 40%.
2. Low Color Contrast (Text Hard to Read)
What it is: Light gray on white. Dark gray on black. Hard to read for anyone with low vision, and it fails WCAG AA.
How to fix it:
- Test your colors: free TPGI Contrast Checker
- Minimum ratios: 4.5:1 for normal text, 3:1 for large text
- Dark on light (or vice versa) is almost always fine
- The one to avoid: light gray (#aaa or lighter) for body text. Very common, very often a violation.
Bonus:** Better contrast also makes your site easier to read on a phone in bright sunlight. Accessibility wins frequently turn into usability wins too.
3. Missing Form Labels and ARIA
What it is: Form fields with no labels, or labels that aren't properly connected to the input. Screen reader users don't know what they're supposed to type where.
How to fix it:
- Every input needs a
<label>:<label for="email">Email Address</label><input id="email" type="email"> - For buttons without visible text, use ARIA:
<button aria-label="Close menu">✕</button> - Shopify's built-in forms are mostly fine. Custom forms need checking.
4. Non-Semantic HTML (Wrong HTML Tags)
What it is: Using <div> for buttons, <span> for headings, <div> for links. Screen readers don't know what any of these things are — they just see a block of content with no meaning.
How to fix it:
<button>for buttons. Not<div onclick>. Not<span onclick>. An actual button.<nav>,<main>,<article>,<section>where appropriate- Real
<a href>links, not<span>with click handlers bolted on - Proper heading hierarchy: one
<h1>per page, then<h2>,<h3>, in order
5. No Keyboard Navigation (Mouse-Only)
What it is: Features that only work with a mouse. Keyboard-only users and screen reader users can't get to them at all.
How to test it right now:
- Open your site. Put the mouse away. Use Tab, Shift+Tab, Enter, and arrow keys only.
- Can you add items to cart? Get through checkout? Fill out a form?
- If you get stuck somewhere, that's a violation.
- All interactive elements need visible focus styles — don't remove the blue outline
- Most Shopify themes handle this. Custom code frequently breaks it.
Why Overlay Widgets Fail (And What Courts Say)
Accessibility overlay companies have raised hundreds of millions in venture capital. The pitch is always the same: "Add our widget, become ADA compliant instantly." It sounds great. It doesn't work.
How Overlays Actually Work
An overlay injects JavaScript into your page at runtime and tries to:
- Bump text size automatically
- Adjust color contrast
- Add "missing" alt text to images
- Simulate keyboard navigation
Here's the fundamental problem: Overlays can't fix broken HTML. A non-semantic <div> button still doesn't work for screen readers after the overlay runs. Form labels still aren't properly connected. And the "alt text" overlays inject? It goes in visually — not into the actual DOM where screen readers look. It's theater.
What Courts Are Saying
The landmark case: In Lainey v. Uber (Northern District of California, 2024), a blind user sued Uber because its overlay failed to make the site usable. The court found that the overlay wasn't a substitute for accessible code.
Multiple court filings now describe overlays as "band-aids on fundamental accessibility problems." Install an overlay, leave your HTML broken, you're still liable. That's where things stand.
The National Federation of the Blind — the largest disability rights organization in the US — has issued formal statements opposing overlays. Their position: overlays don't meaningfully improve access for screen reader users. These are the people the overlays supposedly help.
Sources: Lainey v. Uber Technologies, Inc. (N.D. Cal. 2024), National Federation of the Blind statement on accessibility overlays (2023).
⚠ The real risk: If you have an overlay installed, a plaintiff's attorney reads it as: "They knew they had accessibility problems — otherwise why buy a widget — and chose not to fix them." That makes your legal position worse. Overlays can become evidence of negligence, not compliance.
What Actually Works: Real Accessibility Fixes
Courts, regulators, and disability organizations are all pointing at the same answer: fix the actual code. Here's what that looks like in practice:
1. Add Alt Text to All Images
Highest impact, fastest win. Most ecommerce sites have 500+ images with zero alt text.
- Shopify: Edit product → Image → Alt text field. About 2 minutes per product if you're thorough.
- AI shortcut: Alt Text Generator or Siteimprove can auto-generate — just review them. AI gets it right most of the time, not all the time.
- What to write: Describe the product as if you're explaining it to someone over the phone. Color, material, key features — the things a buyer would actually want to know.
2. Use Proper HTML Semantics
Standard Shopify themes handle most of this for you. If you've written custom code:
<button>for buttons. Not<div>.<a href="">for links<nav>,<main>,<article>,<section>where they make sense<label>for form fields, always
3. Add ARIA Labels Where Needed
ARIA (Accessible Rich Internet Applications) is a set of HTML attributes that give screen readers context they can't get from the HTML alone.
aria-label: Labels an element with no visible text. Example:<button aria-label="Close menu">✕</button>aria-labelledby: Links an element to another element that labels itrole: Tells screen readers what something does.<div role="button" tabindex="0">works — but honestly, just use<button>and skip the ARIA
4. Ensure Full Keyboard Navigation
Every interactive element must work with Tab, Enter, Escape, and arrow keys — no exceptions:
- Buttons, links, and form fields must be reachable via Tab
- Focus styles must be visible — don't remove the blue outline, it's there for a reason
- Dropdown menus need to work with arrow keys
- Modals must trap focus and close on Escape
5. Fix Color Contrast
- TPGI Contrast Checker is free and takes 30 seconds
- Minimum 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold)
- Light gray body text is the most common failure point
6. Captions and Transcripts for Videos
- Product demo videos: add captions. YouTube auto-generates them — review for accuracy before publishing.
- Any video with spoken content needs a transcript for deaf users
How to Audit Your Site for Free
You don't need to hire anyone. Start with these free tools:
1. Google Lighthouse (Built Into Chrome)
How to use:
- Open your store in Chrome
- Right-click → Inspect (or Cmd+Option+I on Mac)
- Click the "Lighthouse" tab
- Select "Accessibility" and hit "Analyze page load"
- Wait about 30 seconds — you get a score (0-100) and a list of violations
It's free, built-in, and gives you specific fixes to make. Use it as your first pass — don't rely on it as your only test, but it catches the obvious stuff.
2. WAVE by WebAIM
How to use:
- Go to wave.webaim.org
- Paste your site URL
- It highlights accessibility errors directly on your page in red
Good if you learn visually. Shows errors, warnings, and passing features highlighted on the actual page.
3. axe DevTools (Chrome Extension)
How to use:
- Install the free axe DevTools extension
- Right-click → Inspect
- Go to the "axe DevTools" tab
- Click "Scan ALL of my page" — it finds violations and explains how to fix them
axe is used by accessibility professionals. It's thorough and has helpful explanations.
4. Manual Screen Reader Testing
Tools are helpful. Real screen reader testing is the gold standard:
- Mac: Cmd+F5 enables VoiceOver (built-in)
- Windows: NVDA is free — nvaccess.org
- Navigate your site with it: Add to cart? Checkout? Fill a contact form?
- If you get stuck, your users will too
Beyond screen readers: Accessibility isn't just a screen reader thing. Test with:
- Keyboard only (mouse unplugged)
- Browser zoom at 200%
- Text size bumped to 125–150%
- Color contrast filters (simulate color blindness)
The Business Case for Accessibility
This isn't just a legal box to tick. It's business sense:
1. Legal Protection (ADA, EAA, AODA Compliance)
- 4,605 ADA lawsuits in 2024 alone — don't become #4,606
- EAA applies to all EU retail starting June 2025
- AODA is law in Ontario and spreading across Canada
- Real fixes defend you. Overlays don't.
2. SEO Improvement
- Alt text: Google ranks image search results partly on alt text. Better alt text = more Google Images traffic
- Semantic HTML: Google understands your content structure better
- Keyboard navigation: Easier for search crawlers to navigate
- Page speed: Accessibility-focused code is often faster code
3. Expanded Customer Base
- 1 in 5 people have a disability
- Accessibility helps: blind users, low-vision users, deaf users, motor-disabled users, cognitively disabled users
- It also helps: elderly users, people on slow connections, people using mobile in bright sunlight
- More accessible site = more paying customers
4. Brand Reputation
- People notice accessibility. Or the lack of it.
- Accessibility signals modern values and good design
- Lawsuits are public and damage trust
Frequently Asked Questions
Your Next Steps
This week:
- Run your site through WAVE or axe DevTools — takes 5 minutes
- Pick the top 3 violations from the report and fix them
- Add alt text to your top 20 best-selling products — highest ROI
- Keyboard-only test: open your site, put the mouse away, use Tab to navigate. Can you complete checkout?
- If you sell to EU customers: the EAA deadline was June 28, 2025 — you're past it, so audit your compliance now
Get a scan of your site
AccessShield scans your Shopify store for WCAG violations and gives you a prioritized list of fixes — from critical to minor.
Get Your Free Report →Sources & Further Reading
- UsableNet: 2024 ADA Remediation Report (4,605 ADA lawsuits in 2024)
- W3C: WCAG 2.1 Quick Reference (Official WCAG standards)
- WebAIM: Web Accessibility Resources
- National Federation of the Blind: Statement on Accessibility Overlays
- European Accessibility Act (EAA) Official Details
- AODA: Accessibility for Ontarians with Disabilities Act
- WAVE Accessibility Checker (Free tool)
- axe DevTools (Free Chrome extension)
Disclaimer: This article is for informational purposes only and does not constitute legal or accessibility advice. Accessibility requirements vary by jurisdiction and use case. Consult with legal counsel about your specific compliance obligations. Regulatory standards and court precedents evolve — check official sources like the W3C and US Department of Justice for the latest guidance. Information accurate as of March 25, 2026.