WCAG 2.1 AA Checklist for Shopify Stores

Shopify is in an unusual position in the accessibility conversation. The platform itself ships solid structural foundations: semantic templates, focus management in many official themes, a hosted checkout that has been independently audited. But every actual store ends up with theme customizations, image uploads, popup apps, and product variants that introduce failures the platform cannot prevent. The result is that Shopify stores show up in ADA web accessibility complaints regularly, and the failures cluster in specific categories that are largely under your control as a store owner.

What Shopify provides versus what you control

Shopify provides

Hosted checkout, base theme structure, semantic templates in official themes (Dawn, Crave, Sense), accessible payment flows.

You control

Product images and alt text, theme customizations, third-party app embeds, color palette, popup and announcement bar text, custom code in theme.liquid.

Where most failures live

In the things you control. Shopify cannot prevent a missing alt text on a product image you uploaded.

Product images and alt text

Every product image needs alt text that describes what the image shows in a way that supports a buying decision. The repeated failures we see in scans:

• Empty alt text on the primary product image (the one that loads first)
• Filename used as alt text (P-2024-blue-XL.jpg)
• The same alt text on all 6 product gallery images (Front view of T-shirt 6 times)
• Lifestyle shots with no alt text describing the lifestyle scene

Pattern that works

Primary image: short product-defining description (Navy crewneck T-shirt, front view, on white background). Gallery: each image describes its specific angle or context (Detail of stitching, Worn by model, Folded with size tag visible). Decorative product flourishes (icons, badges) with empty alt or aria-hidden.

Variant pickers and color swatches

Theme-specific variant pickers are one of the most common failure surfaces in Shopify accessibility audits. Common failures:

• Color swatches built from div elements with no role or accessible name (the user hears button button button with no idea which color is which)
• Selected state communicated only through a colored border, no aria-pressed or aria-current
• Out-of-stock variants visually grayed out but still focusable and clickable, with no announcement that they are unavailable
• Size dropdowns that disable options without communicating disabled state to screen readers

Cart drawer and quick-view modals

Slide-out cart drawers and product quick-view modals are mostly added by themes or apps, and they are responsible for a large share of keyboard accessibility complaints:

• Modal opens and focus stays on the underlying page (focus should move into the modal)
• Tab from inside the modal lets focus escape into the page underneath
• Escape key does not close the modal
• Closing the modal does not return focus to the button that opened it
• Background scroll is not locked when the modal is open

These are foundational dialog accessibility patterns. If your theme's drawer or quick-view fails any of them, contact the theme developer or replace the component with an accessible alternative.

Newsletter and discount popups

Privy, Klaviyo, and similar popups injected into Shopify pages have a habit of:

• Auto-opening with no announcement, then trapping keyboard users
• Using close buttons that are an icon-only X with no accessible name
• Failing to honor prefers-reduced-motion on slide-in animations
• Showing legal copy (See terms) at 9 to 11 pixels in light gray, well below contrast threshold

Most popup tools have an accessibility settings panel. Most stores never open it. Open it, enable keyboard navigation, set close button labels, and set the popup to honor prefers-reduced-motion.

Sale prices and color contrast

Stores that run sales often display the original price struck through next to a red sale price. The repeated finding: the struck-through original price drops below 4.5:1 contrast against the page background because designers tone it down to draw attention to the sale price. The fix is to keep the struck-through price at the contrast threshold (it does not need to be the brightest element on the page, just legible) and rely on size or weight to deemphasize it.

Theme editor blind spots

Shopify's theme editor lets you build sections from images, headings, and rich text. The blind spots:

• Heading hierarchy: the editor lets you put any heading level anywhere, so home pages routinely have multiple h1 elements or skip from h1 to h4
• Buttons rendered as styled links, or links rendered as styled buttons, with no semantic distinction
• Image alt text fields that get skipped during section setup
• Accent colors edited in one place that no longer pass contrast against changing section backgrounds

Custom apps and injected scripts

Loyalty programs, review widgets, chat bots, and upsell apps all inject DOM into your pages. You are responsible for what loads on your store. Audit each app at install time:

• Does it inject elements with proper roles and labels?
• Does its UI work without a mouse?
• Does it respect prefers-reduced-motion?
• Does it have a documented accessibility statement?

An app that ships an inaccessible review widget on 100,000 stores creates 100,000 accessibility findings. You cannot fix the app from your end, but you can choose a different one or pressure the vendor with documented findings.

Quick wins this week

1. Audit alt text on your top 20 best-selling product pages and rewrite anything that says the filename or duplicates across gallery images
2. Test your variant picker with keyboard only and replace any non-semantic swatches with accessible alternatives
3. Open your popup tool's accessibility panel and enable keyboard navigation, close button labels, and reduced-motion respect
4. Run a baseline scan, save the report dated to today, and set a recurring monthly cadence so the audit trail starts now
5. Publish a /pages/accessibility statement on your store that names WCAG 2.1 AA and provides a contact email