Shopify Accessibility Guide: Complete WCAG Compliance for E-Commerce

Shopify accessibility is critical for e-commerce legal compliance and reaching customers with disabilities—approximately 27% of American adults. Shopify stores face significant ADA lawsuit risk, with e-commerce representing the largest category of web accessibility litigation. This guide covers making your Shopify store WCAG 2.1 AA compliant: theme selection, checkout accessibility, app evaluation, and remediation strategies.

The good news: Shopify's platform provides foundational accessibility. The challenge: themes, apps, and customizations often introduce barriers that make stores inaccessible. Understanding where problems occur—and how to fix them—is essential for compliance.

Q: Are Shopify stores ADA compliant by default?

A: No. Shopify provides baseline accessibility, but compliance depends on your theme, apps, and customizations. Most Shopify themes have accessibility issues. Third-party apps frequently introduce barriers. Achieving WCAG compliance requires evaluation and remediation specific to your store.

Shopify's Accessibility Baseline

What Shopify Provides

Shopify's platform includes foundational accessibility:

Checkout (Shopify-hosted):

• Generally accessible by default
• Keyboard navigable
• Screen reader compatible
• Form labels and error handling

Admin interface:

• Meets accessibility standards
• Screen reader compatible

Core platform:

• Semantic HTML structure
• ARIA landmark support
• Focus management framework

Where Shopify Falls Short

Themes:

• Third-party themes vary dramatically in accessibility
• Even Shopify's free themes have issues
• Customizations often break accessibility

Apps:

• Most apps don't prioritize accessibility
• Injected widgets frequently create barriers
• App marketplace has no accessibility requirements

Content:

• Images without alt text
• Videos without captions
• PDFs without accessibility

Theme Accessibility

Evaluating Theme Accessibility

Before selecting a theme, test for:

Keyboard navigation:

• Tab through entire site
• All interactive elements reachable
• No keyboard traps
• Visible focus indicators

Screen reader compatibility:

• Headings properly structured
• Images have alt text (check theme defaults)
• Forms have labels
• Buttons and links properly announced

Visual accessibility:

• Sufficient color contrast
• Text resizable
• Content reflows at zoom
• No flashing content

Shopify's Free Themes

Shopify's free themes (Dawn, Craft, etc.) provide better starting points than many third-party options, but still have issues:

Common Dawn theme issues:

• Product variant selectors may lack labels
• Slideshow auto-rotation accessibility
• Modal focus management
• Announcement bar keyboard access

Testing your theme:

1. Install TestParty for automated scanning
2. Manually keyboard test key user flows
3. Test with NVDA or VoiceOver
4. Evaluate at 200% zoom

Third-Party Theme Considerations

Questions for theme developers:

• Is the theme WCAG 2.1 AA compliant?
• Do you provide a VPAT (accessibility conformance report)?
• How do you handle accessibility bug reports?
• Are updates tested for accessibility?

Red flags:

• No mention of accessibility in documentation
• Developer dismisses accessibility questions
• Custom JavaScript-heavy interactions
• Reviews mentioning accessibility problems

Theme Customization Pitfalls

Common customization mistakes:

Removing focus indicators:

/* Never do this without replacement */
*:focus {
  outline: none;
}

Using divs instead of buttons:

{% comment %} Wrong {% endcomment %}
<div class="add-to-cart" onclick="addToCart()">Add to Cart</div>

{% comment %} Right {% endcomment %}
<button type="button" class="add-to-cart" onclick="addToCart()">
  Add to Cart
</button>

Missing alt text in template:

{% comment %} Wrong {% endcomment %}
<img src="{{ product.featured_image | img_url }}">

{% comment %} Right {% endcomment %}
<img src="{{ product.featured_image | img_url }}"
     alt="{{ product.featured_image.alt | escape }}">

Product Page Accessibility

Essential Product Page Elements

Product images:

{% for image in product.images %}
  <img src="{{ image | img_url: 'large' }}"
       alt="{{ image.alt | default: product.title | escape }}"
       loading="lazy">
{% endfor %}

Variant selectors:

<label for="variant-selector">
  {{ option.name }}
</label>
<select id="variant-selector"
        name="options[{{ option.name }}]"
        aria-describedby="variant-help">
  {% for value in option.values %}
    <option value="{{ value }}">{{ value }}</option>
  {% endfor %}
</select>
<span id="variant-help" class="visually-hidden">
  Select your preferred {{ option.name | downcase }}
</span>

Add to cart button:

<button type="submit"
        name="add"
        aria-label="Add {{ product.title }} to cart"
        {% unless product.available %}disabled{% endunless %}
        {% unless product.available %}aria-disabled="true"{% endunless %}>
  {% if product.available %}
    Add to Cart
  {% else %}
    Sold Out
  {% endif %}
</button>

Price display:

<p class="price" aria-label="Price">
  <span class="visually-hidden">Current price:</span>
  {{ product.price | money }}
  {% if product.compare_at_price > product.price %}
    <span class="visually-hidden">Original price:</span>
    <s>{{ product.compare_at_price | money }}</s>
  {% endif %}
</p>

Product Description Accessibility

Heading structure:

• Product title should be H1
• Description sections use H2, H3 appropriately
• Don't skip heading levels

Tab content accessibility:

<div class="product-tabs">
  <div role="tablist" aria-label="Product information">
    <button role="tab"
            id="tab-desc"
            aria-selected="true"
            aria-controls="panel-desc">
      Description
    </button>
    <button role="tab"
            id="tab-specs"
            aria-selected="false"
            aria-controls="panel-specs"
            tabindex="-1">
      Specifications
    </button>
  </div>

  <div role="tabpanel"
       id="panel-desc"
       aria-labelledby="tab-desc">
    {{ product.description }}
  </div>

  <div role="tabpanel"
       id="panel-specs"
       aria-labelledby="tab-specs"
       hidden>
    {{ product.metafields.custom.specifications }}
  </div>
</div>

Checkout Accessibility

Shopify Checkout vs Custom Checkout

Shopify-hosted checkout (most stores):

• Generally accessible
• Maintained by Shopify
• Limited customization options
• Accessibility issues should be reported to Shopify

Checkout extensibility / custom checkout:

• You're responsible for accessibility
• Must implement WCAG compliance
• More flexibility, more responsibility

Common Checkout Issues

Express checkout buttons:

• Apple Pay, Google Pay, Shop Pay buttons should have accessible names
• Ensure keyboard access to all payment options

Address autocomplete:

• Third-party address validation may lack accessibility
• Test with screen readers
• Ensure keyboard operability

Error handling:

• Errors must identify the field and problem
• Focus should move to first error
• Don't rely on color alone

Checkout Customization Tips

{% comment %} Accessible checkout button text {% endcomment %}
<button type="submit" class="checkout-button">
  Proceed to Checkout
  <span class="visually-hidden">
    - {{ cart.item_count }} items, {{ cart.total_price | money }} total
  </span>
</button>

{% comment %} Cart item removal with accessible name {% endcomment %}
<button type="button"
        aria-label="Remove {{ item.title }} from cart"
        onclick="removeFromCart('{{ item.key }}')">
  <span aria-hidden="true">×</span>
</button>

App Accessibility

Evaluating App Accessibility

Before installing any app, consider:

Does it inject visible UI?

• Review widgets, popups, bars
• These often introduce accessibility issues

Testing approach:

1. Test site accessibility before installing
2. Install app
3. Test again—compare results
4. Remove if accessibility regresses significantly

Common Problematic App Categories

Live chat widgets:

• Often keyboard inaccessible
• Missing ARIA labels
• Focus management issues

Pop-up / email capture:

• Focus trapping without escape
• Low contrast text
• Missing form labels

Review apps:

• Star ratings without text alternatives
• Pagination keyboard issues
• Review form accessibility

Social proof / FOMO:

• Animated notifications without pause control
• Missing live region announcements
• Content appearing without context

Working with App Developers

If an essential app has accessibility issues:

1. Document specific violations
2. Contact developer with WCAG references
3. Request timeline for fixes
4. Escalate to Shopify if unresponsive
5. Consider alternatives if unfixed

Content Accessibility

Image Alt Text in Shopify

Product images:

• Add alt text in Shopify admin
• Products → Select product → Media → Edit alt text
• Describe product features, not just "product image"

Collection images:

• Online Store → Navigation → Collections
• Edit collection → Add/edit image alt text

Theme images:

• Customize theme → Section settings
• Look for "Alt text" fields

Video Accessibility

YouTube/Vimeo embeds:

• Add captions in YouTube/Vimeo
• Provide transcript below video
• Don't autoplay with sound

Shopify-hosted video:

<video controls>
  <source src="{{ video_url }}" type="video/mp4">
  <track kind="captions"
         src="{{ caption_url }}"
         srclang="en"
         label="English">
</video>
<details>
  <summary>Video transcript</summary>
  {{ transcript_content }}
</details>

Blog and Page Content

Heading structure:

• Use heading hierarchy (H1 → H2 → H3)
• Don't use headings for styling
• Don't skip levels

Link text:

• Descriptive link text ("View shipping policy")
• Not "click here" or "learn more" alone

Lists:

• Use actual list markup for lists
• Not just line breaks with dashes

Testing Your Shopify Store

Automated Testing with TestParty

TestParty provides Shopify-specific accessibility testing:

What TestParty catches:

• Missing alt text across products
• Form label issues
• Color contrast failures
• Keyboard accessibility problems
• ARIA implementation errors

What TestParty provides:

• Specific code fixes for Shopify themes
• Remediation guidance for your platform
• Continuous monitoring as you update

Manual Testing Checklist

Homepage:

• [ ] Logo links to homepage with accessible name
• [ ] Navigation keyboard accessible
• [ ] Slideshow/carousel pausable and keyboard navigable
• [ ] Announcement bar accessible

Product listing:

• [ ] Products have meaningful image alt text
• [ ] Quick view modals properly trap focus
• [ ] Filters and sorting keyboard accessible
• [ ] Pagination keyboard accessible

Product page:

• [ ] Main image has descriptive alt text
• [ ] Variant selectors have labels
• [ ] Add to cart button accessible
• [ ] Quantity input labeled
• [ ] Reviews section accessible

Cart:

• [ ] Item quantities adjustable via keyboard
• [ ] Remove buttons have accessible names
• [ ] Totals update announced to screen readers
• [ ] Checkout button accessible

Checkout:

• [ ] All form fields labeled
• [ ] Error messages accessible
• [ ] Payment options keyboard accessible
• [ ] Order confirmation accessible

FAQ Section

Q: Can I get sued for Shopify store accessibility issues?

A: Yes. E-commerce stores face significant ADA lawsuit risk regardless of platform. Using Shopify doesn't provide legal protection—your store must be accessible to comply with ADA requirements.

Q: Does Shopify certify themes as accessible?

A: No. Shopify doesn't certify theme accessibility. Even Shopify's own free themes have accessibility issues. Evaluate any theme before purchase and test after installation.

Q: Which Shopify theme is most accessible?

A: Dawn (Shopify's default free theme) provides a reasonable starting point but still requires remediation. No theme is perfectly accessible out of the box.

Q: How do I fix accessibility issues I can't change in theme settings?

A: Options include: editing theme code directly (requires Liquid/HTML/CSS knowledge), hiring a Shopify developer, or using TestParty for automated fixes where possible.

Q: Should I remove all apps to improve accessibility?

A: Evaluate each app's accessibility impact. Some apps improve accessibility (alt text generators, accessibility widgets). Others harm it. Test before and after installation to understand impact.

Key Takeaways

• Shopify doesn't guarantee accessibility. Themes, apps, and content determine compliance—not the platform.

• Test before selecting themes. Evaluate accessibility before committing to a theme.

• Apps often introduce barriers. Test accessibility impact of every installed app.

• Product images need alt text. Manually add descriptive alt text for all products.

• Checkout is critical. Ensure entire purchase flow works with keyboard and screen readers.

• Continuous monitoring is essential. Store changes, app updates, and content additions can introduce new issues.

Conclusion

Shopify provides foundational accessibility, but achieving WCAG compliance requires active effort—selecting accessible themes, evaluating apps, adding proper alt text, and testing regularly. E-commerce accessibility isn't optional; it's legally required and essential for reaching customers with disabilities.

TestParty specializes in Shopify accessibility. Our platform identifies issues across your entire store and provides Shopify-specific code fixes you can implement directly. Continuous monitoring catches new issues as you update products, themes, and apps.

Ready to make your Shopify store accessible? Get a free accessibility scan to identify issues and see how TestParty provides Shopify-specific fixes.

Related Articles:

• E-Commerce ADA Compliance: Complete Legal Guide 2025
• Shopify Theme Accessibility: Dawn vs Third-Party Comparison
• Product Image Alt Text: E-Commerce Best Practices

Real talk: AI helped us write this, and our accessibility folks made sure it's solid. We genuinely care about making the web work for everyone—that's why TestParty exists. But accessibility compliance can be tricky, so please chat with a pro before making any big moves.