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.

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. Accessibility Litigation Remains Active

Website accessibility remains an active litigation and compliance area. Exact annual counts should be taken from a current, accessible source before publication; the report previously linked here is no longer available at its cited URL.

An overlay does not repair inaccessible HTML, missing labels, blocked keyboard paths, or broken checkout behavior. Evaluate the underlying experience instead of treating a widget as proof of compliance.

2. The European Accessibility Act (EAA) Deadline

The European Accessibility Act began applying on June 28, 2025, but scope, covered services, transition rules, and exemptions depend on the organization and offering. A North American merchant should not infer coverage from traffic alone; verify applicability against current EU guidance and qualified counsel.

WCAG is an important technical reference, but legal obligations are jurisdiction- and fact-specific.

3. Ontario Has Its Own Accessibility Rules

The Accessibility for Ontarians with Disabilities Act (AODA) and its standards apply differently based on organization type, size, and activity. Ontario merchants should review the current provincial requirements rather than relying on a blanket statement about every business.

Independent of legal scope, accessible storefronts help people browse products, understand content, use forms, and complete checkout with different devices and assistive technologies.

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)

WCAG conformance requires evaluating the applicable Level A and Level AA success criteria. Automated tools cover only part of that work, so pair them with keyboard, screen-reader, zoom, content, form, and checkout-path testing.

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 provides an alt-text field for product media; write for the image's purpose and context rather than stuffing keywords.
• Descriptive alt text can also help search engines understand an image, but its primary purpose is to provide an equivalent description for users.

What to measure: Each meaningful image needs an appropriate text alternative, while decorative images generally need an empty alt attribute. Re-scan after fixes, but do not translate a tool-score change into a compliance claim.

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^[1]
• 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 can also make a site easier to read on a phone in bright sunlight. Accessibility improvements frequently support broader usability.

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.

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^[2] or Siteimprove^[3] 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 it
• role: 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^[1] 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:

1. Open your store in Chrome
2. Right-click → Inspect (or Cmd+Option+I on Mac)
3. Click the "Lighthouse" tab
4. Select "Accessibility" and hit "Analyze page load"
5. 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:

1. Go to wave.webaim.org^[4]
2. Paste your site URL
3. 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:

1. Install the free axe DevTools extension^[5]
2. Right-click → Inspect
3. Go to the "axe DevTools" tab
4. 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^[6]
• 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. Risk Reduction and Better Documentation

• Identify barriers before they block a customer or become part of a complaint.
• Keep an issue log, named owner, remediation evidence, and re-test date.
• Verify ADA, EAA, AODA, and other obligations for the business's actual jurisdictions and facts.
• Fix underlying code and content instead of treating an overlay as proof of compliance.

2. Clearer Content and Structure

• Alt text: Gives users an equivalent description when an image carries meaning.
• Semantic HTML: Gives browsers and assistive technologies a clearer content structure.
• Keyboard navigation: Helps people operate the store without a pointer.
• Clear labels and errors: Make forms and checkout easier to understand.

3. Expanded Customer Base

• 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
• Better access removes avoidable barriers, but it does not guarantee a conversion or revenue outcome

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:

1. Run representative pages through WAVE^[4] or axe DevTools^[5], then review what the automated result can and cannot establish.
2. Prioritize customer-blocking issues and assign each one an owner and re-test date.
3. Review product-media alternatives and fix meaningful images that lack appropriate text.
4. Keyboard-only test: open your site, put the mouse away, use Tab to navigate. Can you complete checkout?
5. If the business may offer covered products or services into the EU, verify current EAA scope and obligations with official guidance and qualified counsel.

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.