If you own a Shopify store and you have already taken accessibility seriously, you have probably run two tools on it: WAVE, the free browser scanner from WebAIM, and Avada Accessibility, the most installed accessibility app on the Shopify App Store. Between them you got a long report, you fixed what was on the list, and the score on the dashboard looks fine.

The audit your customers actually experience is not the same audit those two tools ran.

Roughly half of what WCAG 2.1 AA actually requires cannot be detected by any automated scanner. WAVE knows this — it explicitly says so on every report. Avada knows this — its own marketing pages note that automated checks are “complementary” to manual review. But the two together still catch the same kinds of issues, and the gaps they share are exactly where ADA demand letters and EAA enforcement letters keep landing.

We have audited a lot of Shopify stores in the last few months. The five patterns below show up on roughly every store that came in confident the WAVE + Avada combination had it covered. None of them require an enterprise budget to fix. They do require someone to tab through your store with a screen reader running, which is a skill, not a tool.

What each tool actually does

Before walking through the gaps, it is worth being precise about what these two tools are good at, because the answer shapes which gaps remain.

WAVE runs static analysis on the rendered DOM of a single page. It looks for missing alt text, low color contrast, missing form labels, empty buttons, broken ARIA references, and a few dozen other patterns it can detect by reading HTML and CSS. The output is concrete and easy to act on: a list of icons overlaid on the page showing where each violation lives. WAVE is good. Use it. It is also fundamentally a static analyzer, which means it can only see what is in the DOM at the moment you scan the page.

Avada Accessibility is an overlay-style tool. When a visitor lands on your store, it injects a sidebar widget that lets them adjust contrast, font size, focus outlines, and similar visual settings. It also runs its own automated scan and exposes a backend dashboard of issues. Where Avada is strong is the user-controlled customization — letting a low-vision visitor turn up contrast site-wide without you having to redesign anything. Where it is weak is anything that requires changing the underlying DOM or the way dynamic content is announced. Overlays cannot fix the structure of your page, only paint over it.

Together these tools cover automated, static, DOM-readable issues plus user-controlled visual adjustments. Neither tool has any way to know what the page sounds like to someone running NVDA on Chrome or VoiceOver on Safari, because that is determined by how dynamic content updates, how focus moves when something changes, and how landmarks and labels are announced in real time. That is the territory of the five gaps below.

The five things that almost always slip through

1. Focus order on filter and sort dropdowns

Shopify collection pages have filter sidebars or top-bar dropdowns. When a visitor opens a filter, picks a value, and the products re-render via fetch, two things need to happen for keyboard users.

First, focus needs to stay near where the user was working. If they were inside a price filter dropdown, they expect to keep tabbing forward through the next filter, not to be teleported to the top of the document because the entire grid re-rendered.

Second, the screen reader needs to be told that the result count changed. “Showing 47 of 122 products” needs an aria-live region that announces the new number when filters apply, otherwise the screen reader user does not know whether anything happened.

WAVE cannot test this because it runs on a static snapshot. Avada cannot test it because the dropdown is theme-rendered and the overlay does not instrument fetch responses. The keyboard user lands on a page that visually filters fine and audibly tells them nothing.

The fix is in the theme’s collection JavaScript: keep focus on the filter element after the re-render (or on a designated “filter results” anchor), and inject an aria-live region near the result count that updates with the new value.

2. “Add to Cart” announcements

When a visitor on a product page clicks Add to Cart, three things should happen for assistive tech users:

1. The cart drawer or page should open or the cart count should increment visibly
2. A polite announcement should fire telling them “Item added to cart, 3 items in cart”
3. Focus should move somewhere predictable — usually the cart drawer’s close button or the cart summary

What we usually find: the visual cart drawer opens, the count visually increments, and the screen reader user hears nothing at all. They press Add to Cart, get no feedback, and try again. They have just added two of the same item to the cart without knowing.

WAVE does not see this because it scans before the user clicks. Avada does not see this because the announcement requires a properly-marked aria-live region that the theme has to ship — overlays cannot inject a region into a place they don’t know to look.

The fix: an aria-live="polite" region that the cart-update JavaScript writes to whenever a cart action completes. One line of HTML, one line of JavaScript per cart event. We see this missing on roughly four out of five Shopify stores we audit.

3. Keyboard traps in product image carousels

Most Shopify themes ship with a product image carousel — multiple images on the product page that the visitor can browse through. These carousels are usually built with custom JavaScript or a library like Swiper, Flickity, or Splide.

The keyboard failure modes show up in two flavors. Either the visitor can tab into the carousel but cannot tab back out (the focus cycles between the previous/next buttons forever), or the visitor can tab through the carousel but pressing arrow keys does nothing because the theme did not implement arrow-key navigation, leaving the carousel keyboard-inaccessible to anyone who cannot use a mouse.

WAVE has no way to test interactive keyboard behavior. Avada also cannot test it because the carousel is custom theme code, not standard form elements. The only way to find these issues is to load the page, click the first image, and then try to tab and arrow your way out without using a mouse. We have not yet audited a Shopify store where this worked correctly on the first try.

The fix is theme-level JavaScript: implement arrow-key navigation, ensure the previous/next buttons have proper focus management, and provide an Escape key handler that returns focus to the product gallery thumbnail strip.

4. ARIA roles on swatches, variant selectors, and quantity steppers

Shopify product pages have a lot of custom-styled controls that look like buttons or selects but are technically <div>s with click handlers attached. Color swatches. Size picker buttons. Quantity steppers with custom plus/minus icons. The theme designer made them look beautiful. They were not necessarily made announceable.

A swatch element should communicate three things to a screen reader: its name (e.g., “Red”), its role (it is a button, not just text), and its state (whether it is selected). Out of the box, most themes ship swatches as <div> elements with no role, no aria-pressed, and no accessible name beyond the visible color label.

WAVE catches some of this — it will flag <div> with click handlers as “interactive element with no accessible name” sometimes, but it depends on whether the theme uses focusable attributes. Avada cannot inject correct ARIA roles into elements it does not know about. The result is a visitor on VoiceOver hearing “Red” without knowing it is the currently-selected color or that activating it will change which variant they are buying.

The fix is per-element: set role="button" and aria-pressed="true|false" on each swatch, ensure it is in the tab order with tabindex="0", and bind keyboard handlers for Space and Enter so it activates without a mouse. Same treatment for size pickers and quantity steppers.

5. Cart drawer and modal focus management

The cart drawer that slides out when you click the cart icon — and any modal popup the theme uses for “Subscribe to our newsletter” or “Save 10%” — has the same focus pattern that almost every Shopify store gets wrong.

When the drawer opens, focus should move into it (usually to the close button or the first focusable item). When the drawer closes — by clicking outside, pressing Escape, or clicking the close button — focus should return to the element that opened it (usually the cart icon).

What we find on most stores: the drawer opens and focus stays on whatever was focused before. The keyboard user has to tab through every element on the underlying page to reach the cart contents. When they close the drawer, focus disappears entirely (lands on <body>) and they are dropped at the top of the page with no idea where they are.

WAVE does not test this because it requires triggering an open and a close. Avada does not handle modal focus management because that requires writing event handlers that are aware of the modal’s open and close lifecycle, which has to live in the theme’s JavaScript.

The fix is two functions: one that runs on drawer open (move focus into drawer, trap focus inside the drawer until close, restore focus on close), one that runs on every modal in the theme that follows the same pattern. Most themes already have a drawer-open and drawer-close hook — you are adding three to five lines per hook.

How we run a manual pass

Run WAVE first. Use it on five pages: homepage, collection page, product page, cart page, checkout. Note every violation. Fix the easy ones (alt text, contrast, missing labels) before going further — those are real and should not be debated.

Then turn off your mouse and tab through the same five pages. Notice every place where focus disappears, where the order is wrong, where you cannot reach an interactive element, or where pressing Enter does nothing on something that visually looks clickable.

Then turn on a screen reader. NVDA on Windows + Firefox or Chrome. VoiceOver on Mac with Safari. Navigate through the same five pages with screen reader announcements turned on. Notice every place where the announcement is wrong, missing, or incomprehensible. The big ones to listen for: form fields without labels, buttons without descriptive names (“button button button”), images announced as “image” with no description, and dynamic updates that fire silently.

Run this entire sequence at desktop width. Then run it again at mobile width — focus and reading order on Shopify stores often breaks differently on mobile because the navigation collapses and the cart drawer geometry changes.

Total time for a real Shopify store: 90 to 180 minutes for the first pass. Faster on subsequent ones once you know the theme’s quirks.

What to ask before you hire someone

If you are paying an auditor or a developer to fix WCAG issues on your Shopify store, ask these three questions before you sign:

Will the audit include a manual screen reader pass on at least NVDA and VoiceOver? If the answer is “we use WAVE and axe-core” alone, you are buying the same automated coverage you can run yourself for free. The gap is in the manual pass.

Will the deliverable include the five patterns above (focus order on filters, Add to Cart announcements, carousel keyboard traps, swatch ARIA, modal focus management)? Any auditor or developer who has worked on a real Shopify store will recognize these immediately. If they look puzzled, they have not done the work before.

Will the audit cover both desktop and mobile widths? Shopify themes ship a different DOM on mobile in many places. Auditing only desktop misses real issues that only mobile users will hit.

If the auditor or developer can answer these three clearly with examples from past work, you are talking to someone who has done it. If they cannot, the score they give you back is the score the customer’s screen reader does not give you back.

Closing

Automated scanners and overlays exist for a reason. They catch the easy half of WCAG quickly and give a baseline that humans can build on. They are not the audit, though. The audit is what happens when someone actually navigates the store the way your customer does, hears what they hear, and reports back where the gaps are. WAVE plus Avada gets you to a number on a dashboard. The five patterns above get you to a store that real customers can actually use.