Shopify Accessibility Compliance: WCAG Checklist for 2026

ADA Lawsuits Are Targeting Shopify Stores at Record Rates

In the first half of 2025, over 2,000 federal ADA website accessibility lawsuits were filed — a 37% increase over the same period in 2024. According to TestParty's lawsuit data, if the pace continues, 2025-2026 could exceed 5,000 annual filings for the first time. Ecommerce and retail websites account for 69-77% of all digital accessibility lawsuits, making them the most heavily targeted industry by a wide margin.

Shopify stores are among the top targets. Plaintiff firms can identify hundreds of non-compliant sites in a single day, file demand letters in bulk, and settle for $5,000-$25,000 per store. The average ADA website lawsuit costs ecommerce businesses $25,000-$75,000 when factoring in legal fees and remediation.

Shopify accessibility compliance is not just a legal risk management exercise — it is also good business. Accessible stores serve 15-20% more potential customers (people with disabilities represent a $490 billion market), improve SEO (many accessibility improvements align with search engine requirements), and provide a better experience for every visitor. This WCAG checklist gives you the specific fixes your Shopify store needs to become compliant and stay protected from litigation. For other common troubleshooting issues, explore our resources.

Understanding WCAG and What Compliance Means

WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility. Courts in the US reference WCAG 2.1 Level AA as the benchmark for ADA compliance in website lawsuits.

WCAG 2.1 Level AA: The Standard You Need to Meet

WCAG is organized around four principles, each with specific success criteria:

Why Overlays and Widget Apps Do Not Work

According to TestParty's 2026 lawsuit analysis, 22.6% of all ADA website lawsuits in H1 2025 targeted sites that had accessibility widgets or overlays installed. Overlay tools (like AccessiBe, UserWay, or EqualWeb) add a floating widget that claims to fix accessibility issues through JavaScript — but courts, disability advocates, and accessibility professionals universally agree they do not provide genuine compliance.

The reasons overlays fail:

• They cannot fix structural HTML issues that assistive technologies depend on
• They often interfere with actual screen reader functionality
• They create a false sense of compliance that prevents merchants from doing real remediation
• Courts do not accept overlay installation as evidence of compliance

Do not rely on any Shopify app that claims to make your store "ADA compliant" with a single installation. Real compliance requires fixing the underlying code and content.

The Complete WCAG Checklist for Shopify Stores

This checklist covers every high-priority accessibility requirement relevant to Shopify ecommerce stores. Work through each section systematically.

1. Image Alt Text (WCAG 1.1.1)

Every non-decorative image on your store needs descriptive alt text. According to Accessibility Checker's Shopify guide, missing alt text is the most common violation on Shopify stores. A store with 500 products and 4 images each has 2,000 potential alt text violations — each one is a separately documentable WCAG failure.

What to fix:

• Every product image needs alt text describing the product: "Navy blue merino wool crewneck sweater, front view" — not "IMG_4532" or "product photo"
• Decorative images (backgrounds, spacers, dividers) should have empty alt attributes: alt=""
• Icons that convey meaning need descriptive alt text: "Add to cart" not "button" or empty
• Banner images with text overlay need alt text that includes the text in the image

How to fix in Shopify:

• Go to each product and click on each image to add alt text
• For theme images, edit through the theme editor or directly in Liquid templates
• Use the alt attribute in theme code: <img src="{{ image.src }}" alt="{{ image.alt | escape }}">

2. Color Contrast (WCAG 1.4.3)

Text must have sufficient contrast against its background. The minimum contrast ratios are:

Common Shopify violations:

• Light gray text on white backgrounds (common in product descriptions and navigation)
• Placeholder text in search bars and form inputs (often too light)
• Sale badge text on colored backgrounds
• Footer link text against dark backgrounds
• CTA button text against brand color backgrounds

How to test: Use the WebAIM Contrast Checker to test your color combinations. Enter your text and background hex codes and confirm the ratio meets 4.5:1 for body text and 3:1 for headings.

3. Keyboard Navigation (WCAG 2.1.1, 2.1.2)

Every interactive element — links, buttons, form fields, dropdown menus, carousels — must be accessible using only a keyboard. Many Shopify visitors use keyboards instead of mice: people with motor disabilities, power users, and anyone using assistive technology.

What to test:

• Press Tab to move through all interactive elements on the page
• Every focusable element should have a visible focus indicator (outline or highlight)
• Enter should activate buttons and links
• Escape should close modals, drawers, and popups
• Dropdown menus should open with Enter or Space and navigate with arrow keys
• The cart drawer and slideout panels should be keyboard-navigable

Common Shopify violations:

• Custom dropdown menus that only work with mouse clicks
• Image carousels and sliders without keyboard controls
• Modal popups (email signup, age verification) that trap focus or cannot be dismissed with keyboard
• Quick-add-to-cart buttons that are not keyboard focusable
• Skip-to-content link missing from the top of the page

4. Form Labels and Inputs (WCAG 1.3.1, 4.1.2)

Every form input — search bars, email signup forms, checkout fields, contact forms — needs a programmatic label that screen readers can announce.

What to fix:

• Every <input> needs an associated <label> element with matching for and id attributes
• Placeholder text is NOT a substitute for labels (it disappears when the user starts typing)
• Error messages must be associated with the relevant input field using aria-describedby
• Required fields must be indicated both visually (asterisk) and programmatically (aria-required="true")

Common Shopify violations:

• Newsletter signup form with only placeholder text (no visible or programmatic label)
• Search bar without a label (screen readers announce "edit text" with no context)
• Contact form without proper error identification
• Checkout fields relying solely on placeholder text

5. Heading Structure (WCAG 1.3.1)

Headings must follow a logical hierarchy. Screen reader users navigate pages by heading level — skipping from H1 to H3 is confusing and a WCAG failure.

Requirements:

• One H1 per page (the page title)
• Headings follow sequential order: H1 → H2 → H3 (never skip H2 to jump to H4)
• Heading tags are used for structure, not for visual styling (do not use H3 because you want smaller bold text)

Common Shopify violations:

• Product page with the product title as H1 and sidebar sections jumping to H4
• Collection pages with no H1 or multiple H1 elements
• Blog posts with heading levels used for visual formatting rather than content structure
• Homepage sections using H3 or H4 without preceding H2 elements

6. Link and Button Identification (WCAG 4.1.2, 2.4.4)

Links and buttons must have descriptive text that makes sense out of context. Screen reader users often navigate by listing all links on a page — "Click here" repeated 12 times is useless.

Requirements:

• Link text describes the destination: "View our return policy" not "Click here"
• Buttons describe the action: "Add to cart" not "Submit" or an icon with no text
• Icon-only buttons need aria-label attributes: <button aria-label="Remove item"><svg>...</svg></button>
• Links that open in new windows should indicate this: aria-label="Return policy (opens in new tab)"

7. Video and Media Accessibility (WCAG 1.2.1-1.2.5)

If your store uses video content, it needs captions and possibly audio descriptions:

• Pre-recorded video — must have captions (closed or open)
• Live video — should have captions if feasible (auto-generated acceptable)
• Audio-only content — needs a text transcript
• Video-only content — needs either a text alternative or audio description

For Shopify product videos:

• Upload captions as SRT or VTT files (YouTube generates these automatically)
• Use autoplay muted as the default (autoplay with sound is an accessibility and UX violation)
• Provide a play/pause control that is keyboard accessible

8. Mobile and Touch Accessibility (WCAG 2.5.5, 2.5.1)

Mobile accessibility overlaps with general accessibility but has specific requirements:

• Touch targets minimum 44×44 CSS pixels — applies to buttons, links, and form controls
• No functionality requires complex gestures — everything must work with simple taps
• Content does not change orientation unless essential to the content
• Zoom is not disabled — never use maximum-scale=1.0 in your viewport meta tag

Testing Your Shopify Store for Accessibility

Automated tools catch 30-40% of accessibility issues. Manual testing catches the rest.

Automated Testing Tools

Manual Testing Checklist

Run these tests on every key page (homepage, product page, collection page, cart, checkout):

1. Keyboard-only navigation — unplug your mouse and navigate the entire purchase flow using only Tab, Enter, Escape, and arrow keys
2. Screen reader testing — use NVDA (Windows, free) or VoiceOver (Mac, built-in) to hear how your pages sound to screen reader users
3. Zoom testing — zoom the browser to 200% and verify all content is still readable and functional
4. Color contrast spot-check — verify text readability on colored backgrounds, hover states, and active states
5. Form testing — tab through every form field and verify labels are announced correctly by screen readers

Ongoing Monitoring

Accessibility is not a one-time fix. New content (products, blog posts, page updates) can introduce new violations. Establish an ongoing process:

• Monthly automated scan — run WAVE or axe on your top 10 pages
• Quarterly manual test — keyboard and screen reader walk-through of the purchase flow
• Content creation rules — every new product gets alt text, every new page follows heading structure, every new form has proper labels
• Theme update review — test accessibility after every theme update or app installation

Fixing Accessibility in Your Shopify Theme

Many accessibility fixes require editing your Shopify theme's Liquid and CSS code. Here are the most impactful fixes with implementation guidance.

Adding a Skip Navigation Link

A skip link lets keyboard users bypass the navigation menu and jump directly to the main content. This is one of the most commonly missing accessibility features on Shopify stores.

Add this at the beginning of your theme.liquid layout file, inside the <body> tag:

<a class="skip-to-content-link" href="#MainContent">Skip to content</a>

With CSS to hide it visually until focused:

.skip-to-content-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 8px 16px;
  background: #000;
  color: #fff;
  z-index: 100;
}
.skip-to-content-link:focus {
  top: 0;
}

Ensure your main content area has id="MainContent" for the skip link to target.

Improving Focus Indicators

Many Shopify themes remove or minimize the default browser focus outline — making keyboard navigation invisible. Add visible focus styles:

*:focus-visible {
  outline: 2px solid #4A90D9;
  outline-offset: 2px;
}

The :focus-visible selector ensures the outline only appears for keyboard navigation, not mouse clicks, providing the best experience for both user types.

Bulk Adding Alt Text to Products

For stores with hundreds of products missing alt text, manual entry is impractical. Use Shopify's bulk editor or export your products via CSV, add alt text to the Image Alt Text column, and re-import. For stores on Shopify Plus, Shopify Flow can automate alt text generation using product titles and attributes.

Legal Protection Beyond Compliance

Technical compliance reduces your risk significantly, but additional steps strengthen your legal position.

Publish an Accessibility Statement

Create a dedicated accessibility page on your store that includes:

• Your commitment to accessibility
• The WCAG 2.1 Level AA standard you target
• Contact information for accessibility feedback
• Your timeline for ongoing improvements

This page demonstrates good faith — courts view it favorably when evaluating compliance efforts.

Document Your Remediation

Keep records of:

• The date you began accessibility remediation
• Tools and methods used for testing
• Specific fixes implemented and when
• Ongoing monitoring schedule
• Any third-party audits conducted

Documentation of active, ongoing remediation is the strongest defense in an ADA lawsuit. Courts distinguish between stores that ignore accessibility and stores that are actively working toward compliance.

Consider a Professional Audit

For stores with significant revenue ($500K+/year), a professional accessibility audit ($2,000-$10,000) provides expert evaluation and a detailed remediation plan. This also creates a paper trail of professional compliance effort that strengthens your legal position.

Common Accessibility Mistakes on Shopify

Installing an overlay app and assuming compliance. Overlays do not work. They often make accessibility worse by interfering with screen readers, and courts do not accept them as evidence of compliance. Invest in real fixes, not quick-fix widgets.

Only fixing what automated tools catch. Automated tools catch 30-40% of accessibility issues. Keyboard navigation problems, screen reader confusion, and logical structure issues require manual testing that no tool can automate.

Treating accessibility as a one-time project. Every new product, page, or content update can introduce new violations. Accessibility must be part of your ongoing content creation process — not a single remediation sprint you do once and forget.

Not testing on mobile. Mobile accessibility failures (small touch targets, disabled zoom, missing labels on mobile-specific elements) affect the majority of your visitors and are separately documentable WCAG failures.

Ignoring third-party app accessibility. Apps inject code and UI elements into your store that may not be accessible. Review apps, popups, chat widgets, and embedded forms for keyboard access, screen reader compatibility, and contrast compliance. You are responsible for the accessibility of your entire store — including third-party app elements.

Waiting until you receive a demand letter. Remediation after a lawsuit is more expensive and stressful than proactive compliance. The cost of fixing accessibility issues ($500-$5,000 for most Shopify stores) is a fraction of the cost of defending a lawsuit ($25,000-$75,000).

Make Your Store Accessible

Shopify accessibility compliance with WCAG is achievable for stores of any size. The checklist above covers the high-priority items that prevent the vast majority of ADA lawsuits and improve the experience for every visitor.

Start with the highest-impact items:

1. Add alt text to every product image — the most common violation and the easiest to fix
2. Check color contrast — run the WebAIM Contrast Checker on your text and background colors
3. Test keyboard navigation — unplug your mouse and navigate the purchase flow
4. Add form labels — ensure every input has a programmatic label
5. Install WAVE and run it on your homepage, product page, and cart page
6. Publish an accessibility statement — demonstrate commitment to compliance

The stores that invest in accessibility do not just avoid lawsuits — they serve more customers, improve their search rankings, and build a better experience for everyone. That is a rare combination of legal protection and business benefit.

Connect with the Talk Shop community for accessibility implementation help. Have you tested your store's keyboard navigation? Try it right now — the results might surprise you.

About Talk Shop

The Talk Shop team — insights from our community of Shopify developers, merchants, and experts.