I scanned 37 Shopify stores for accessibility. 89% had serious failures.

On November 3, 2026, I ran an automated accessibility scan on 37 Shopify stores. I checked each store’s homepage and one product page.

33 of the 37 stores (89%) had at least one issue the scanner rated serious or critical. The typical store had 4 different types of failure, spread across about 20 elements on just those two pages.

Most of these problems come from theme code, apps and design choices that look fine to a sighted mouse user. They show up when someone shops with a keyboard, a screen reader, or low vision.

Below are the most common failures, who each one affects, and how to fix it in a Shopify theme.

The 10 most common failures

Issue (axe rule)	Stores affected	Share of 37
Low color contrast (color-contrast)	24	65%
Links with no accessible name (link-name)	22	59%
Buttons with no accessible name (button-name)	14	38%
Clickable elements inside clickable elements (nested-interactive)	12	32%
Hidden content that can still get keyboard focus (aria-hidden-focus)	10	27%
Broken list markup (listitem)	8	22%
Images missing alt text (image-alt)	7	19%
Invalid ARIA attribute values (aria-valid-attr-value)	5	14%
Scrollable areas you can’t reach by keyboard (scrollable-region-focusable)	5	14%
ARIA attributes used where they aren’t allowed (aria-prohibited-attr)	5	14%

How to fix each one

1. Low color contrast (24 of 37 stores)

What it is: Text too close in color to its background, like light gray body text, pale sale prices, or white text over a busy photo.

Who it affects: People with low vision, color blindness or aging eyes, and anyone reading a phone in sunlight.

How to fix it: WCAG AA asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Check your theme colors with the WebAIM contrast checker. Most Shopify themes let you change colors under Online Store > Themes > Customize > Theme settings > Colors. If a color is hard-coded, update it in your CSS:

/* Before: #999 on white is about 2.8:1 */
.price--sale { color: #999999; }

/* After: #595959 on white is about 7:1 */
.price--sale { color: #595959; }

For text over images, add a solid or semi-transparent overlay behind the text instead of relying on the photo.

2. Links with no accessible name (22 of 37 stores)

What it is: A link containing only an icon or image, with no readable text. Footer social icons and image-only promo tiles are the usual culprits.

Who it affects: Screen reader users hear “link” with no clue where it goes. Voice control users can’t say “click Instagram”.

How to fix it: Give the link a name. Visually hidden text works well, and most themes already include a visually-hidden class:

<a href="{{ settings.social_instagram_link }}">
  <svg aria-hidden="true" focusable="false"><!-- icon --></svg>
  <span class="visually-hidden">Instagram</span>
</a>

For a linked image, the image’s alt text becomes the link’s name, so describe where the link goes (“Shop the fall collection”), not what the photo looks like.

3. Buttons with no accessible name (14 of 37 stores)

What it is: Icon-only buttons such as slider arrows, close (X) buttons, menu toggles and cart icons.

Who it affects: Screen reader and voice control users. Three buttons all announced as “button” is guesswork.

How to fix it: Add an aria-label that says what the button does:

<button type="button" class="slider__next" aria-label="Next slide">
  <svg aria-hidden="true" focusable="false"><!-- arrow --></svg>
</button>

<button type="button" class="drawer__close" aria-label="Close cart">
  <svg aria-hidden="true" focusable="false"><!-- X --></svg>
</button>

4. Clickable elements inside clickable elements (12 of 37 stores)

What it is: A link or button placed inside another link or button. The classic Shopify case is a product card where the whole card is a link, with a “Quick add” button inside it.

Who it affects: Screen reader and keyboard users, who may not be able to reach the inner control or may get unpredictable results.

How to fix it: Keep the two controls separate. Put the link on the product title only, then stretch its click area over the card with CSS so mouse users still get the whole-card click:

.card { position: relative; }
.card__title-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card__quick-add { position: relative; z-index: 1; }

5. Hidden content that can still get keyboard focus (10 of 37 stores)

What it is: Content marked aria-hidden="true" that still contains links or buttons, such as closed cart drawers, closed menus and duplicated carousel slides.

Who it affects: Keyboard and screen reader users. Focus lands on something invisible or silent, and they lose their place.

How to fix it: Use the inert attribute on closed drawers and off-screen slides. It hides the content and removes it from the tab order in one step:

// When the drawer closes
drawer.inert = true;
// When the drawer opens
drawer.inert = false;

6. Broken list markup (8 of 37 stores)

What it is: List items (<li>) outside a <ul> or <ol>, or lists with other elements placed directly inside. Menus and footer columns are common spots.

Who it affects: Screen reader users, who rely on hearing “list, 6 items” to skim navigation.

How to fix it: Every <li> should sit directly inside a <ul> or <ol>, and lists should contain only <li> children.

7. Images missing alt text (7 of 37 stores)

What it is: Product and content images with no text alternative.

Who it affects: Blind and low-vision shoppers, plus anyone whose images fail to load.

How to fix it: In the Shopify admin, open a product, click the image in the Media section, and fill in the alt text field. Describe what matters for buying: color, material, fit, and what’s shown. For example, “Olive linen midi dress with tie waist, shown from the front.”

In your theme, make sure the alt text is actually output:

{{ image | image_url: width: 800 | image_tag: alt: image.alt }}

Purely decorative images should use an empty alt (alt="") so screen readers skip them.

8 to 10. ARIA and scrolling issues (5 stores each)

These three tend to come from theme or app JavaScript:

• Invalid ARIA values (aria-valid-attr-value): for example, aria-controls pointing to an ID that doesn’t exist, or aria-expanded="yes" instead of "true". Correct the values.
• Scrollable areas you can’t reach by keyboard (scrollable-region-focusable): product rows or size charts that only scroll with a mouse. Add tabindex="0", role="region" and an aria-label to the container so keyboard users can scroll it.
• ARIA where it isn’t allowed (aria-prohibited-attr): usually an aria-label on a plain <div> or <span>, which many screen readers ignore. Use visible or visually hidden text instead.

One fix scanners can’t fully check: visible focus

Scanners can’t reliably tell whether keyboard users can see where they are. Press Tab on your store. If you can’t tell what’s selected, add a clear focus style:

:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 3px;
}

Avoid outline: none unless you replace it with something just as visible.

Why this matters

People with disabilities shop online, and these issues stop them at the product page or the cart. Fixing them usually makes a store easier for everyone.

There’s also a legal side, which I’ll mention briefly and without advice. UsableNet counted 5,114 US digital accessibility lawsuits in 2025, with about 70% aimed at e-commerce and 64% of defendants under $25M in revenue. And the European Accessibility Act has applied since June 28, 2025, which is worth looking into if you sell to EU customers. If you have legal questions, a lawyer is the right person to ask.

A note on accessibility overlays

Overlay widgets promise accessibility with one line of code. They add a toolbar on top of the page but don’t change the theme code underneath, so the issues above remain. In April 2025 the FTC approved a final order requiring accessiBe to pay $1 million over claims that its tool could make websites compliant. The reliable fix is changing the code itself.

Methodology and limits

Here’s exactly what I did, and what this data can’t tell you.

• Date and tool: November 3, 2026, using axe-core 4.10.2 in headless Chromium at a 1280px desktop width.
• Rules checked: WCAG 2.0 and 2.1, levels A and AA.
• Pages: each store’s homepage and one product page. No collection, cart or checkout pages.
• Sample: I attempted 40 Shopify stores; 37 scanned successfully. About 30 were small and mid-size independent brands (mostly pet accessories and apparel) and 10 were well-known DTC brands across apparel, home, beauty and coffee. It isn’t a random sample, and all stores stay anonymous.
• Automated only: automated tools can only detect some types of accessibility issues. A manual review with a keyboard and screen reader always finds more.
• Desktop only: no mobile layouts.
• Not WCAG 2.2: criteria added in 2.2, such as minimum target size, weren’t covered.
• “No violations” isn’t a clean bill of health: 4 stores showed no serious or critical violations in the scan, but some sites may have served the scanner a different page than a real shopper would see. Treat those results with caution.
• One point in time: stores change often, so these results reflect one day.

Erick Nolasco is a UX/UI designer in Virginia who specializes in visual design and accessibility. Read about my Shopify accessibility audits and fixes.