Shopify accessibility fixes: the 10 most common issues and how to fix them

Updated 2026-10-18

We ran our scanner on Shopify's own free theme demo stores (Dawn, Sense, Refresh, Craft and Origin) while building ClearAisle. Shopify's themes are a good starting point (Shopify requires Theme Store themes to score at least 90 on Lighthouse accessibility), yet every demo still had issues, mostly colour contrast. Real stores add products, images, apps and custom colours, which is where most problems come from. Here are the fixes we recommend most, in priority order.

1. Add alt text to product and banner images

Products > [product] > click an image > Add alt text. Describe what the photo shows ("Brown leather tote, front view, brass buckle"), not "image1". For section images use Online Store > Themes > Customize, select the section and fill in the image's alt text, or edit it in Content > Files. Purely decorative images can stay empty.

2. Fix colour contrast in your colour schemes

Low contrast is the single most common issue we find. In Customize > Theme settings > Colors, check each colour scheme: text and button labels need 4.5:1 against the background. Watch sale badges, "compare at" prices, placeholder text and footer links. Text over image banners: increase Image overlay opacity or move the text off the image.

3. Label icon-only buttons and links

Search, cart, account, menu, slider arrows and social icons need an accessible name. Current Shopify themes include these; if yours is missing them, update your theme first (Online Store > Themes; check for an update). For custom code, add aria-label="Cart" or a visually-hidden text span inside the link.

4. Label form fields

Newsletter, search and quantity inputs need a label, not just a placeholder. In the theme code, a visually-hidden <label class="visually-hidden" for="..."> keeps the design unchanged. Form apps (contact, reviews, wholesale) should have labels switched on in their settings.

5. Keep one H1 and headings in order

Each page should have one H1 (product title on product pages) and headings shouldn't skip levels. In section settings pick heading sizes that keep the order; size is styling, level is structure.

6. Don't disable zoom

In theme.liquid the viewport tag should be width=device-width,initial-scale=1 with no maximum-scale=1 or user-scalable=no.

7. Audit your apps

Pop-ups, chat widgets, cookie banners, review widgets and sliders are the most common source of new issues: unlabeled close buttons, focus traps, content outside landmarks. Check Customize > App embeds, test each with the keyboard, and ask the developer for fixes or switch apps.

8. Make carousels pausable

Auto-rotating slideshows should have a pause control, or turn off auto-rotate in the section settings. Hidden slides shouldn't receive keyboard focus.

9. Underline links in text

Links in product descriptions and pages should be distinguishable without colour. A small CSS rule like .rte a { text-decoration: underline; } fixes it.

10. Caption your videos

Product videos with speech need captions. Host on YouTube or Vimeo with captions, or add a captions track to self-hosted video.

What about checkout?

Shopify maintains the checkout itself, so your effort goes into the storefront: home, collections, product pages, cart and content pages.

Test after every change

Re-scan after theme updates, new apps or big product uploads, and do a quick keyboard test: Tab from the top of a product page to "Add to cart" and through the cart.

Check your store in 2 minutes

Run our free in-browser check on any page of your store, or get the full $39 report: every automated issue on 5 key pages, with step-by-step fixes for Shopify and WooCommerce.

Free check See the full report

FAQ

Are Shopify themes accessible out of the box?

Shopify requires Theme Store themes to score at least 90 on Lighthouse accessibility, but stores still add issues through content, colours and apps. Free theme demos still showed issues in our scans.

How do I add alt text in Shopify?

Products > select the product > click the image > Add alt text. For section images, use the theme editor or Content > Files.

What is the most common Shopify accessibility issue?

In our scans, low colour contrast, which you fix in Theme settings > Colors.

Do I need to fix Shopify checkout?

Shopify maintains the checkout; focus on your storefront pages, theme and apps.