Shopify accessibility issues: what we found scanning 501 stores

We ran an automated accessibility scan on the homepages of 501 Shopify stores on October 13, 2026. Low color contrast was the most common issue by far: 63% of stores had text that is too faint to read comfortably. Half of the stores (50%) had links with no text, and 28% had images with no text alternative. Only 8% of homepages had no issues our scan could detect, and that does not mean those pages are accessible. This post shows the full top 10, how the three most common themes in the sample compare, and how to fix each issue in Shopify.

The short answer

• The typical homepage had 2 issue types and 12 affected elements. The middle half of stores had between 4 and 24 affected elements.
• Three issues dominate. Low color contrast (63% of stores), links with no text (50%) and images missing alt text (28%).
• Most stores had several problems, not one. 73% of homepages had 5 or more affected elements on the homepage alone.
• Most fixes are small. Contrast is usually a theme color setting. Links, images and buttons need a short text name. Few of these issues need a redesign.

The sample is small and mid-size stores in the US and Canada, homepage only, scanned automatically. It is not a random sample of all Shopify stores. Details are in How we did this.

The 10 most common Shopify accessibility issues

"Share of stores" is the share of the 501 homepages where the issue appeared at least once. "Median instances" is the typical number of affected elements on a homepage that had the issue.

In total the scan found 38 different issue types across the sample. Everything below the top 10 affected fewer than 7% of stores.

The most common issues are much the same as what larger studies find on the web as a whole. The WebAIM Million 2026 report, which tests the homepages of the top one million websites with a different tool (WAVE), also found low contrast text to be the most common failure, on 83.9% of homepages. Missing alt text (53.1%) and empty links (46.3%) are also among its most common failures, along with missing form labels (51%), which rarely show up on a Shopify homepage. The two studies use different tools, rules and samples, so compare which issues come up rather than the exact numbers or order.

What each issue means for shoppers, and how to fix it in Shopify

1. Low color contrast (63% of stores)

Light grey prices, pale sale badges and white text on bright banner images are hard to read for people with low vision, and for anyone using a phone outdoors. Normal text needs a contrast ratio of at least 4.5:1 against its background, and large text 3:1. Contrast also had the most affected elements per store of any common issue: a median of 8 on the homepages that had it.

In most themes you fix it in Online Store > Themes > Customize > Theme settings > Colors, by darkening the text color in each color scheme your sections use. If one element needs a different color, a line of CSS in the theme's custom CSS does it:

.price-item--sale {
  color: #b3261e;
}

The class name depends on your theme. Full steps: how to fix low color contrast in a Shopify theme.

2. Links with no text (50%)

A screen reader announces these as "link" with nothing to say where they go. In Shopify they are almost always icon or image links: social icons in the footer, the logo, product images in cards. The fix is a short name inside the link:

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

The visually-hidden class exists in most themes; check yours. More examples: how to fix links with no text in Shopify.

3. Images missing alt text (28%)

Without alt text, a screen reader user hears "image" or a file name instead of what the photo shows. Add alt text in your Shopify admin (click an image in a product's media, then Add alt text), and make sure custom sections output it:

{{ section.settings.image | image_url: width: 1200 | image_tag: alt: section.settings.image.alt }}

If the image has no alt text in the admin, this outputs an empty alt, so fill in the alt text rather than relying on the code.

Use an empty alt (alt: '') only for purely decorative images. Full guide: missing alt text on Shopify product images.

4. Targets too small or too close together (23%)

Color swatches, pagination dots and small icon buttons are hard to tap for people with tremors or limited dexterity, and for anyone on a small phone. WCAG 2.2 asks for targets of at least 24 by 24 CSS pixels, or enough space around smaller ones:

.swatch,
.slider-dot {
  min-width: 24px;
  min-height: 24px;
}

The class names depend on your theme, and inline elements also need display: inline-block or similar for this to apply.

5. Hidden elements that still receive keyboard focus (15%)

This usually happens in slideshows and carousels: the inactive slides are hidden from screen readers with aria-hidden="true", but their "Shop now" links can still be reached with the Tab key. A keyboard user lands on something invisible that is announced as nothing. The fix is to make slides that are off-screen inert in the slider script, for example:

slides.forEach((slide, i) => {
  slide.inert = i !== activeIndex;
});

If the slider shows several slides at once, apply this only to the slides that are out of view.

6. Controls nested inside each other (14%)

A common example is a "Quick add" button placed inside the link that wraps a whole product card. Screen readers and keyboards handle nested controls unpredictably, and the inner button may not be reachable. Make the link and the button siblings:

<div class="card">
  <a href="{{ product.url }}">{{ product.title }}</a>
  <button type="button">Add to cart</button>
</div>

7. Zooming disabled on mobile (11%)

A viewport tag with user-scalable=no or maximum-scale=1 stops people with low vision from pinch-zooming to read prices and details. It is one line in layout/theme.liquid:

<meta name="viewport" content="width=device-width, initial-scale=1">

8. Buttons with no name (9%)

Icon-only buttons such as the cart, menu toggle, quantity plus and minus, or a drawer's close button are announced only as "button". Give each one a label, for example with aria-label or visually hidden text. Full guide: how to fix buttons with no name in Shopify.

9 and 10. Scroll areas and ARIA attributes (7% each)

Boxes that scroll on their own but contain no links or buttons, such as size tables, text panels or some sliders, need tabindex="0" plus a role and a label (for example role="region" aria-label="Size chart") so keyboard users can scroll them. ARIA attributes placed on elements that do not support them usually come from theme or app code, so report them to the theme or app developer with the exact element.

How the most common themes compare

Three themes had at least 20 stores in the sample: Dawn (74 stores), Prestige (35) and Impulse (28). The largest group, 215 stores, used custom, renamed or less common themes (fewer than 5 stores each). The share is the percentage of stores on that theme where the issue appeared.

What stands out:

• Dawn stores had low contrast more often than the sample as a whole (82% against 63%). Dawn lets merchants set their own color schemes, so this reflects the colors stores chose as much as the theme itself.
• Prestige stores often had zooming disabled on mobile (49%, against 11% across all stores). That likely points to the viewport tag in the theme code of the versions those stores run, which is a one-line fix.
• Impulse stores had a different top issue: hidden elements that can still receive keyboard focus (61%). Slideshows and sliders are the usual source of this pattern. Low contrast affected only 21% of Impulse stores.

Read these numbers with care. The groups are small: on Impulse, one store moves a percentage by almost 4 points. Stores run different versions of each theme and many have customized it, so a result describes these stores, not every store on the theme. Other themes had too few stores to compare; Horizon, for example, appeared on only 7.

How we did this

• Sample. We checked 1,007 domains from FixRamp's outreach list of small and mid-size online stores in the US and Canada. 195 were not Shopify or did not respond. Of the 812 confirmed Shopify stores, 501 were scanned successfully, 141 scans failed and 170 were not scanned. This is not a random sample of all Shopify stores.
• Pages. Homepage only, one page per store. Product, cart and checkout pages can have other issues, such as form fields without labels.
• Tool. An automated scan based on axe-core, run through FixRamp's scanner on October 13, 2026, with WCAG 2.0, 2.1 and 2.2 level A and AA rules.
• Counting. An issue type is one rule that failed on the page. Instances are the affected elements, counted per rule.
• Themes. We identified Shopify stores and their theme from the homepage code (the theme name that Shopify includes in the page).
• Limits. Automated testing finds only part of WCAG issues. Keyboard traps, unclear content or confusing focus order need a person to test them. A homepage with no detected issues is not necessarily accessible.
• Privacy. Results are anonymous aggregates. We do not publish store names or domains.

Check your own store

Run a free scan of your homepage. It lists up to 5 of the most serious issue types it finds on that page, with how many elements each one affects. To see what a full report looks like, with every issue grouped by template and the exact code fix, open the sample report. Paid reports cover 2, 25 or 150 pages, and the 150-page report includes the cart. A FixRamp report is a diagnostic, not a certification: it tells you what to fix, and your team or developer makes the changes in your theme.