The Ultimate Guide to Shopify Apps and Accessibility: WCAG Problems & Solutions

You installed a Shopify app to improve conversions.

Then you ran an accessibility audit.

New violations appeared. The app broke your WCAG compliance.

This happens constantly.

In fact, third-party apps are responsible for 40-60% of accessibility violations on Shopify stores.

But here's the problem: Most app developers don't prioritize accessibility.

They build features fast. They optimize for sighted users. They forget about accessibility.

Store owners are left holding the bag — liable for violations they didn't create.

This comprehensive guide covers everything you need to know about Shopify apps and accessibility:

Which app categories break WCAG compliance most often
Specific violations each type introduces
How to identify if an app is breaking your accessibility
How to fix violations each app causes
Accessible alternatives to problematic apps
How to audit apps BEFORE installing them

By the end, you'll know exactly which apps are safe, which are dangerous, and how to protect your store's accessibility.

Why Shopify Apps Break Accessibility (3 Reasons)

Reason 1: Developers Don't Test for Accessibility

Most app developers:

Don't test with keyboard navigation
Don't test with screen readers
Don't run WCAG audits
Don't understand accessibility requirements

They prioritize features and speed. Accessibility takes a backseat.

Result: Inaccessible apps.

Reason 2: Apps Override Shopify's Default Behavior

Shopify's default checkout is accessible.

But when you install apps, they often:

Inject custom JavaScript
Override CSS styling
Add new HTML elements
Replace default components

These overrides frequently break accessibility.

Reason 3: Store Owners Bear the Liability

When an app breaks your accessibility:

You're liable (not the app developer)
You face ADA lawsuits
You must pay settlements
You must remediate violations

The app developer bears no responsibility.

This is why choosing accessible apps is critical.

The App Accessibility Problem (In Numbers)

Statistics on Shopify app accessibility:

From third-party apps

40-60%

of all accessibility violations

Fully WCAG 2.1 compliant

15-20%

of popular Shopify apps

Have a critical violation

70%

of apps, at least one

Average Shopify store has 8-12 apps installed
Likelihood that at least one is breaking accessibility: 95%+

Translation: If you have more than 2-3 apps installed, at least one is probably breaking your accessibility.

Category 1: Review & Rating Apps (WCAG 1.4.1, 2.1.1)

Apps in this category

Yotpo Reviews
Judge.me
Trustpilot Widget
Reviews.io
ProductReviews

Violation: Color as Only Indicator

Problem: Star ratings shown only as colored stars. No text equivalent.

Yellow stars = 5-star rating. Gray stars = 1-star rating. Colorblind users can't tell the difference.

star ratings

<!-- BAD - Color only -->
<div class="rating" style="color: gold;">★★★★★</div>

<!-- GOOD - Color + text -->
<div class="rating">
  <span style="color: gold;">★★★★★</span>
  <span class="sr-only">5 out of 5 stars</span>
</div>

Violation: Rating Input Not Keyboard Accessible

Problem: Click stars to rate. Can't navigate with keyboard.

rating input

<!-- BAD - Only works with mouse -->
<div onclick="setRating(5)">★★★★★</div>

<!-- GOOD - Works with keyboard -->
<label>
  <input type="radio" name="rating" value="5">
  <span>★★★★★ Excellent</span>
</label>

Violation: Comments Section Not Screen Reader Friendly

Problem: Review text doesn't associate with reviewer name or date.

Screen readers read: "John" ... "5 stars" ... "Great product!" (disconnected)

Should read: "5-star review from John: Great product!"

fix · associated review markup

<div class="review" role="article" aria-labelledby="reviewAuthor">
  <h3 id="reviewAuthor">John's Review</h3>
  <div aria-label="Rating: 5 out of 5 stars">★★★★★</div>
  <time>March 15, 2026</time>
  <p>Great product! Highly recommend.</p>
</div>

Accessible alternatives

Judge.me (newer versions improved)
Trustpilot (updated widget)
Write custom review system with accessibility in mind

Risk level: HIGH visible on every product page

Category 2: Subscription Apps (WCAG 1.3.1, 2.1.1)

Apps in this category

ReCharge
Subbly
Boldly Subscribe
Subscription app by Bold
Loop Subscriptions

Violation: Subscription Options Not Properly Labeled

Problem: Subscription tiers shown as buttons without clear labels. "Monthly" button shows only price, not what "monthly" means.

subscription plan labels

<!-- BAD - Unclear labels -->
<button class="plan">$9.99</button>
<button class="plan">$24.99</button>

<!-- GOOD - Clear labels -->
<label>
  <input type="radio" name="plan" value="monthly">
  <span>Monthly Subscription - $9.99/month</span>
</label>
<label>
  <input type="radio" name="plan" value="annual">
  <span>Annual Subscription - $99.99/year (save $20)</span>
</label>

Violation: Subscription Frequency Selection Not Keyboard Accessible

Problem: Can't select subscription frequency with keyboard. Dropdowns require mouse.

Violation: Saving Information Not Announced

Problem: User clicks "Subscribe" button. Nothing happens visually for 2 seconds (processing). Screen reader users have no idea if it worked.

fix · live region status

<button type="submit">
  Subscribe Now
  <span aria-live="polite" aria-atomic="true" class="status"></span>
</button>

<script>
button.addEventListener('click', function() {
  const status = document.querySelector('.status');
  status.textContent = 'Processing...';
  // After submission
  status.textContent = 'Subscription confirmed!';
});
</script>

Risk level: HIGH blocks purchase workflow

Category 3: Popup & Modal Apps (WCAG 2.1.2)

Apps in this category

Yotpo Pop-ups
Klaviyo Forms
Privy
Sumo
OptinMonster

Violation: Modal Keyboard Trap

Problem: Pop-up appears. User presses Tab but focus stays outside modal. User is trapped, can't close pop-up.

fix · modal focus management

const modal = document.getElementById('modal');
const closeBtn = modal.querySelector('.close-btn');
const openBtn = document.getElementById('openBtn');

// Move focus into modal when opened
openBtn.addEventListener('click', function() {
  modal.style.display = 'block';
  modal.setAttribute('aria-hidden', 'false');
  closeBtn.focus(); // KEY: Move focus into modal
});

// Allow Escape to close and return focus
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape' && modal.style.display === 'block') {
    modal.style.display = 'none';
    modal.setAttribute('aria-hidden', 'true');
    openBtn.focus(); // Return focus to button
  }
});

Violation: Pop-up Doesn't Announce Itself

Problem: Pop-up appears but screen readers don't announce it. Users don't know a modal opened.

fix · dialog role

<div role="dialog" aria-labelledby="title" aria-hidden="false">
  <h2 id="title">Special Offer</h2>
  <p>Get 20% off your first order</p>
</div>

Violation: Form Inside Pop-up Not Labeled

Problem: Form fields inside pop-up lack labels. Screen readers can't identify fields.

Risk level: CRITICAL blocks newsletter signup, discounts

Category 4: Live Chat & Messaging Apps (WCAG 2.1.2, 4.1.2)

Apps in this category

Gorgias
Zendesk Chat
Intercom
Olark
Drift

Violation: Chat Widget Keyboard Trap

Problem: Chat widget button opens chat. User presses Tab. Focus gets stuck in chat widget. Can't Tab out.

Fix: Implement proper focus management (as shown in Popup section)

Violation: New Messages Not Announced

Problem: Support agent sends message. Screen reader users don't hear it. Chat silently receives message.

fix · live region for messages

<div aria-live="polite" aria-atomic="true" class="chat-messages">
  <!-- Messages announced when added -->
</div>

Violation: Chat Minimize Not Keyboard Accessible

Problem: Can only minimize chat by clicking X button. Keyboard users can't minimize.

Violation: Chat Blocks Main Content

Problem: Chat widget positioned over important content. No way to move/hide it.

Risk level: HIGH blocks access to content

Category 5: Upsell & Product Recommendation Apps (WCAG 2.1.1)

Apps in this category

Rebuy
Kenshoo
Bold Upsell
LimeSpot
Frequently Bought Together apps

Violation: Upsell Modal Not Keyboard Accessible

Problem: "Frequently Bought Together" modal appears. Can't navigate or close with keyboard.

Fix: Same modal focus management as popups

Violation: Product Selection Not Clear

Problem: Checkboxes to add upsell products. Checkboxes not properly labeled. Screen readers don't announce what's being added.

upsell checkboxes

<!-- BAD -->
<input type="checkbox">
<span>$29.99</span>

<!-- GOOD -->
<label>
  <input type="checkbox">
  Add Blue T-Shirt (Size Medium) - $29.99
</label>

Violation: Add Button Not Reachable

Problem: Upsell modal appears but "Add" button can't be reached with Tab.

Risk level: MEDIUM affects revenue but not core shopping

Category 6: Product Filter & Search Apps (WCAG 2.1.1)

Apps in this category

Hulkfilters
Flex Collections
Algolia Search
Topsearch
Mfiltered

Violation: Filter Dropdown Not Keyboard Accessible

Problem: Click dropdown to open filters. Can't open with keyboard. Can't Tab through filter options.

fix · accessible filters

<fieldset>
  <legend>Filter by Size</legend>
  <label>
    <input type="checkbox" name="size" value="small">
    Small
  </label>
  <label>
    <input type="checkbox" name="size" value="medium">
    Medium
  </label>
  <label>
    <input type="checkbox" name="size" value="large">
    Large
  </label>
</fieldset>

<!-- Alternative: Use native select if possible -->
<label for="sizeFilter">Filter by Size:</label>
<select id="sizeFilter">
  <option value="">All Sizes</option>
  <option value="small">Small</option>
  <option value="medium">Medium</option>
  <option value="large">Large</option>
</select>

Violation: Search Results Not Announced

Problem: User types in search. Results load. Screen readers don't announce how many results found. Users don't know if search worked.

fix · announce result count

<div role="region" aria-live="polite" aria-label="search results">
  <h2>Found 23 results for "blue shirt"</h2>
  <!-- Results here -->
</div>

Violation: Filter Updates Not Announced

Problem: User selects filter. Page updates silently. Screen reader users don't know results changed.

Risk level: MEDIUM affects user experience

Category 7: Mega Menu & Navigation Apps (WCAG 2.1.1)

Apps in this category

Most theme mega menus (not technically apps but similar issue)
Advanced navigation apps
Custom menu builders

Violation: Dropdown Only Works with Mouse Hover

Problem: Mega menu requires mouse hover. Can't open with keyboard.

hover vs focus-within

/* BAD - Only mouse hover */
nav ul li:hover > ul {
  display: block;
}

/* GOOD - Keyboard support */
nav ul li:focus-within > ul {
  display: block;
}

Violation: Mega Menu Traps Focus

Problem: Mega menu opens. User Tabs through items. Gets stuck in menu, can't escape with keyboard.

Fix: Ensure Escape key closes menu and returns focus

Violation: Menu Items Not Labeled

Problem: Navigation items don't clearly indicate they have submenus.

submenu indication

<!-- BAD -->
<a href="/products">Products</a>

<!-- GOOD -->
<a href="/products" aria-haspopup="true" aria-expanded="false">
  Products
  <span aria-label="submenu">(has submenu)</span>
</a>

Risk level: CRITICAL blocks navigation

Category 8: Product Gallery & Image Apps (WCAG 1.1.1, 2.1.1)

Apps in this category

Photo gallery apps
Image zoom apps
Image slider apps
Lightbox apps

Violation: Gallery Not Keyboard Accessible

Problem: Next/Previous buttons only work with mouse. Can't navigate gallery with keyboard.

accessible gallery controls

<button aria-label="Previous image">←</button>
<button aria-label="Next image">→</button>

<!-- Or allow arrow keys -->
<div class="gallery" role="region" aria-label="product images">
  <!-- Arrow keys navigate -->
</div>

Violation: Zoom Feature Not Accessible

Problem: Double-click to zoom image. Can't zoom with keyboard.

Violation: Alternative Text for All Views

Problem: First image has alt text. Second and third images don't.

fix · alt text on every view

<img src="front.jpg" alt="Navy t-shirt, front view">
<img src="back.jpg" alt="Navy t-shirt, back view">
<img src="detail.jpg" alt="Navy t-shirt, close-up of embroidered logo">

Risk level: HIGH blocks product visibility for blind users

Category 9: Cookie Banner & Consent Apps (WCAG 2.1.1, 3.3.1)

Apps in this category

Cookiebot
OneTrust
Usercentrics
CookieYes
Cookie Notice apps

Violation: Cookie Banner Keyboard Trap

Problem: Cookie consent banner appears. User can't Tab to "Accept" or "Reject" buttons. Focus trapped in banner.

fix · consent dialog

<div role="dialog" aria-labelledby="cookieTitle" aria-modal="true">
  <h2 id="cookieTitle">Cookie Consent</h2>
  <p>We use cookies to improve your experience.</p>
  <button>Accept All</button>
  <button>Reject</button>
  <button>Settings</button>
</div>

Violation: Banner Options Not Clear

Problem: "Accept," "Reject," "Manage" buttons but user doesn't know what each does. Clicking wrong button might accept all cookies when user wanted to reject.

fix · clear button labels

<button aria-label="Accept all cookies">Accept All</button>
<button aria-label="Reject all non-essential cookies">Reject Non-Essential</button>
<button aria-label="Customize which cookies to accept">Manage Preferences</button>

Violation: Dismissing Banner Not Clear

Problem: How do you dismiss the cookie banner? Only a tiny X button? Can't find it with keyboard?

Risk level: MEDIUM affects trust but not core shopping

Category 10: Search & Autocomplete Apps (WCAG 2.1.1, 4.1.3)

Apps in this category

Search apps with autocomplete
Smart search apps
Predictive search apps

Violation: Autocomplete Results Not Announced

Problem: User types in search box. Autocomplete dropdown appears. Screen reader users don't hear suggestions. Don't know they can Tab to autocomplete results.

fix · combobox pattern

<input type="search"
       aria-autocomplete="list"
       aria-controls="searchResults"
       aria-expanded="false">

<ul id="searchResults" role="listbox" aria-label="search suggestions">
  <li role="option">Blue Shirt</li>
  <li role="option">Blue Dress</li>
  <li role="option">Blue Shoes</li>
</ul>

<script>
// Announce when autocomplete opens
input.addEventListener('input', function() {
  searchResults.setAttribute('aria-expanded', 'true');
});
</script>

Violation: Can't Select Autocomplete with Keyboard

Problem: Autocomplete suggestions appear. Can only click them with mouse. Can't select with keyboard.

fix · arrow key selection

// Allow arrow keys and Enter to select
input.addEventListener('keydown', function(e) {
  if (e.key === 'ArrowDown') {
    highlightNext(); // Highlight next suggestion
  }
  if (e.key === 'ArrowUp') {
    highlightPrevious(); // Highlight previous suggestion
  }
  if (e.key === 'Enter') {
    selectHighlighted(); // Select highlighted result
  }
});

Risk level: MEDIUM affects search experience

Summary: App Category Violations by Risk Level

Shopify app categories with their violation severity and removal recommendation
Category	Critical	High	Medium	Removal recommended
Reviews	No	Yes	Yes	Partial
Subscriptions	Yes	Yes	Yes	No (but fix required)
Popups	Yes	Yes	No	Consider
Chat	Yes	Yes	Yes	No (but fix required)
Upsells	No	No	Yes	Optional
Filters	No	Yes	Yes	No (but fix required)
Mega Menus	Yes	Yes	No	No (but fix required)
Galleries	Yes	Yes	Yes	No (but fix required)
Cookie Banners	No	Yes	Yes	Depends on implementation
Search	No	No	Yes	No (but fix required)

How to Audit Apps BEFORE Installing Them

Step 1: Check App Reviews for Accessibility

Before installing, search app reviews for:

"accessibility"
"keyboard"
"screen reader"
"WCAG"
"ADA"

If you find complaints: Skip the app or contact developer.

Step 2: Ask Developers About Accessibility

Email the app developer:

email template · developer enquiry

Hi, I'm considering your app but accessibility is critical
for our business. Can you confirm:

  Is your app WCAG 2.1 Level AA compliant?
  Do you test with keyboard navigation?
  Do you test with screen readers?
  Do you have an accessibility roadmap?
  How quickly do you fix accessibility issues?

Good developers will have answers. Bad developers will ignore you or make excuses.

Step 3: Test in Development

Before installing on live store:

Install on test/development store
Run WAVE accessibility scanner
Test with keyboard navigation
Test with screen reader (if possible)
Check for violations

If violations appear: Either find accessible alternative or uninstall.

Step 4: Check Changelog

Review app's changelog for accessibility improvements, WCAG compliance mentions, and bug fixes for keyboard/screen reader.

Active accessibility work = good sign. Ignored accessibility issues = bad sign.

How to Fix Violations When You Need an App

Sometimes you need an app despite accessibility issues.

Option 1: Remove/Minimize the App

Can you live without it? Sometimes removing an app is simpler than fixing its violations.

ROI of app ≤ Cost of accessibility violations? Remove it.

Option 2: Request Accessibility Update

Email developer:

We love your app but we've identified accessibility violations:
  [list specific violations]

These are preventing our compliance with WCAG 2.1.

Can you provide:
  Timeline for fix
  Accessibility roadmap
  Interim workarounds

Some developers will fix issues.

Option 3: Hire Professional to Remediate

Can't wait for developer? Hire accessibility professional to:

Identify app violations
Implement CSS/JavaScript workarounds
Test for compliance
Document fixes

Cost: $500-$2,000 per app. Sometimes worth it if app is critical.

Option 4: Switch to Accessible Alternative

Best option: Find accessible alternative app.

Best Practices: Building an Accessible Shopify App Stack

Step 1: Minimal App Philosophy

Install only apps you REALLY need. More apps = More violations. Each app is a risk.

Step 2: Accessibility as Selection Criteria

When choosing between two apps:

Bad criteria

"Which has more features?"

Good criteria

"Which one is more accessible?"

Choose accessible features over flashy features.

Step 3: Regular Auditing

Every quarter (every 3 months):

Run accessibility audit
Identify new violations
Check if new app caused them
Test each app individually
Document results

Step 4: Update Apps Regularly

Developers sometimes fix accessibility in updates. Keep apps updated so you get fixes.

Step 5: Document Everything

Keep records of apps installed, known accessibility issues per app, workarounds implemented, fixes applied, and test results.

This documentation defends you legally.

Accessible App Recommendations (By Category)

Review apps

Judge.me (improved accessibility)
Trustpilot (updated widget)
Most others have violations

Subscription apps

ReCharge (if properly configured)
Others require custom remediation

Chat apps

Zendesk Chat (accessible features available)
Gorgias (requires fixes)
Intercom (keyboard issues)

Navigation

Shopify's built-in navigation (accessible by default)
Most third-party mega menus require fixes

Galleries

Shopify's built-in image zoom (accessible)
Third-party gallery apps often need fixes

These Are the Issues Our Manual Audit Tests

Every app violation mentioned in this guide is tested in our professional Shopify accessibility audits.

We identify

Which apps are breaking your compliance
Specific violations each app introduces
Priority order for fixes
Cost and timeline for remediation
Accessible alternatives to problematic apps

Manual audit includes:

Automated scanning of each installed app
Keyboard navigation testing per app
Screen reader testing per app
Interaction testing
Code quality review
Detailed report with fixes

This is the most comprehensive way to understand your app accessibility situation.

Need a professional to audit your apps?

We identify which of your installed apps are breaking WCAG compliance. Includes specific app violations and recommended fixes.

Get your free professional accessibility audit →

Summary: Shopify Apps and Accessibility

Key takeaways:

Apps are responsible for 40-60% of Shopify accessibility violations
10 app categories commonly break WCAG compliance (reviews, subscriptions, popups, chat, upsells, filters, navigation, galleries, cookie banners, search)
Most violations are fixable (either by developer, with workarounds, or by switching apps)
You're liable for app violations (even though you didn't create the app)
Accessible alternatives usually exist (when you're willing to look)
Minimal app philosophy = fewer violations (install only what you really need)
Regular auditing catches problems early (quarterly testing recommended)
Documentation is your defense (keeps records of what you knew and when)

Ready to fix your app accessibility issues?

We identify problematic apps and either implement fixes, help you switch to accessible alternatives, or configure apps properly for compliance. 100% WCAG 2.1 AA compliance in 10-14 days.

View our Shopify accessibility remediation services →

Want to understand the WCAG violations apps create?

Read our complete guide to 15 common WCAG violations →

Learn exactly what breaks compliance and how to spot it.

Final Thought

Shopify apps are powerful. They improve functionality and conversions.

But they often break accessibility.

You don't have to choose between features and compliance.

You can have both.

Start with this guide. Audit your current apps. Choose new apps with accessibility in mind. Remediate violations when they appear.

Your disabled customers will thank you. And your ADA compliance will be protected.