Most ADA website lawsuits and demand letters against Shopify stores quote the same handful of problems. According to Ecomback's mid-year report, 952 Shopify stores were sued over website accessibility in US federal courts from January to June 2026, out of 2,045 cases.
The good news: the common problems are small, and most are fixed in the theme code or the Shopify admin. Here are the six I see most, with the fix for each in a Dawn-based theme.
1. Images with no alt text
Product and collection images need a text alternative that says what the image shows.
- Fix it in the admin: Products → (product) → click the image → Add alt text. Do the same for collection images and image blocks in the theme editor.
- In Liquid, make sure the alt is passed through:
{{ product.featured_media | image_url: width: 800 | image_tag: alt: product.featured_media.alt }}
- Purely decorative images should have an empty alt (
alt="") so screen readers skip them.
2. Icon buttons with no name
Cart, search, menu and close buttons are often just an SVG icon. A screen reader announces them as "button" with no name.
<button type="button" class="header__icon" aria-label="{{ 'general.search.search' | t }}">
{% render 'icon-search' %}
</button>
Or keep a visually hidden label inside the button: <span class="visually-hidden">Open cart</span>. Dawn already has a visually-hidden class.
3. Form fields with no label
Newsletter, search, quantity and contact fields often rely on a placeholder. A placeholder is not a label.
<label for="NewsletterForm-{{ section.id }}" class="visually-hidden">Email address</label>
<input id="NewsletterForm-{{ section.id }}" type="email" name="contact[email]" placeholder="Email">
4. Menus that don't work with a keyboard
Dropdowns that only open on mouse hover are a common complaint. Dawn uses <details> and <summary>, which work with a keyboard out of the box. Problems usually come from custom mega menus or apps that replace them with hover-only <div>s.
Test it: press Tab through the header. Every link should be reachable, Enter should open a submenu, and Escape should close it.
5. Focus you can't see
Custom CSS like *:focus { outline: none; } hides where the keyboard is. Remove it, or bring a clear outline back:
:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
6. Low colour contrast
Light grey text on white looks clean but fails WCAG 1.4.3: normal text needs a contrast ratio of at least 4.5:1, large text 3:1. Check sale badges, placeholder text and footer links. Most theme colour settings can be changed in Online Store → Themes → Customize → Theme settings → Colors.
How to check your store
- Tab through the home page, a product page and the cart with no mouse.
- Run a browser checker such as axe DevTools or WAVE on the same pages.
- Turn on VoiceOver (Mac) or NVDA (Windows) and listen to the product page for a minute.
Automated tools find only part of the problems, so the keyboard and screen reader checks matter. And no fix makes a site "lawsuit-proof"; the aim is a site people can actually use, plus a record of what you fixed and when.
Disclosure: I built a free scan that checks your home page and a product page for several of these problems: https://disputekits.com/shopify-accessibility-fix
If you'd rather have them fixed in your theme code (no overlay widget, worked on a copy of your theme, with a dated report of each fix), I offer that as a Fiverr gig: https://www.fiverr.com/s/zAr73Kv
Top comments (1)
Useful list, and the alt="" note for decorative images is the one people get backwards. Worth adding a seventh: keyboard focus that disappears inside the cart drawer or a popup, since a drawer that traps or loses focus blocks checkout entirely for keyboard users.