Shopify accessibility: how to check and fix your store

What Shopify takes care of, and what you do

Shopify hosts and maintains the checkout, and its Online Store 2.0 themes, such as Dawn, include skip links, focus styles and labelled controls. Problems usually come from the parts you control:

• Product and collection images without alt text
• Theme colour settings that make text, prices and buttons too faint
• Customised sections and theme code
• Apps that add pop-ups, reviews, chat, upsells and cookie banners
• Content in descriptions, such as images of text and vague links

Step 1: Scan your key templates

Scan the home page, a collection page, a product page and the cart page. Because Shopify pages are built from templates, a problem on one product page is usually on all of them, and one fix in the theme corrects every product.

Scan a Shopify page for free

Step 2: Buy something with the keyboard only

Use Tab, Shift+Tab, Enter, Space and the arrow keys to search for a product, choose a variant, add it to the cart, open the cart drawer and go to checkout. Watch for:

• Colour or size swatches that cannot be reached or selected with the keyboard, or that show the selected option by colour only
• A quantity selector without a label
• A cart drawer that opens without moving focus into it, or that cannot be closed with Escape
• A newsletter or discount pop-up that covers the page and has no reachable close button
• Focus disappearing behind a sticky header or an app's chat button

Step 3: Fix the most common problems

• Product image alt text: in Admin, Products, open the product, click an image and choose Add alt text. Describe what the image shows that matters to a buyer, such as colour and angle, not "product image".
• Theme images: in Online Store, Customize, select the image section and fill in its alt text field.
• Contrast: in theme settings, Colours, check text, button labels, sale badges and prices against their backgrounds, aiming for 4.5:1.
• Icon buttons: cart, search, close and menu icons need an accessible name; in theme code add visually hidden text or an aria-label.
• Variant pickers: use real radio buttons or buttons with labels, and show the selected state with more than colour.
• Headings: one H1 per page (usually the product or collection title), then H2 for sections, chosen in the section settings or Liquid.

Shopify alt text fix guide

Check every app you install

Apps inject their own markup into your storefront. Before keeping one, test it with the keyboard and a scan: review widgets, size charts, upsell pop-ups and chat buttons are frequent sources of new problems. Remove apps you no longer use; their code sometimes stays in the theme.

Be careful with apps that promise to make a store accessible with an overlay. They do not fix the theme or your content.

Do accessibility overlays work?

If you sell to customers in the EU

Since June 2025 the European Accessibility Act applies to many online shops selling to EU consumers, unless the business is a microenterprise. The yardstick is WCAG 2.1 AA, and you are expected to publish information on how your shop meets the requirements.

European Accessibility Act guide

Questions and answers