Shopify WCAG accessibility: the 2026 compliance guide

Shopify WCAG accessibility stopped being a nice to have in 2025. The European Accessibility Act went into effect across the EU in 2025. US ADA lawsuits are increasing year over year. And Google rewards accessibility in new ways via Core Web Vitals and by rewarding themes with structured data accessibility features. So theme authors, if your theme fails to meet WCAG accessibility standards, your clients are already exposed on 3 fronts.

The good news: Most of the WCAG failures on your Shopify store will be caused by a handful of issues that can be fixed without ever touching a line of code. The vast majority of failures fall into 3 categories: color contrast, missing alt text, and broken keyboard navigation. You can start by downloading the free Contrast Checker extension for Google Chrome, and use it to score the contrast for every pair of colors in your Shopify theme.

Shorturl(output Covers WCAG levels you need to meet, Shopify gotchas, Theme defaults that fail, and the legal risks of doing nothing.

In this post

WCAG 2.2 levels explained

WCAG 2.2 (published October 2023) has three levels of conformance to the guidelines, however Level AA is where most legal requirements are directed and Level AAA is only required for government websites or regulated industries such as banks.

LevelScopeRequired for
AMinimum, 30 criteriaBasic usability for users with disabilities
AAAdds 20 criteria. Contrast, resize, focusADA, EAA, most lawsuits
AAAAdds 28 more, strictestGovernment, healthcare, accessibility-first brands

Target AA. Demonstrate attempt to achieve target AA. Include an Accessibility Statement. The vast majority of ADA lawsuits can be defended on the basis that the entity has made efforts to achieve accessibility and has informed visitors of its website’s limitations.

Color contrast requirements

WCAG 2.2 Level AA requirements for normal text contrast is 4.5:1, large text is 3:1 (18pt bold is 14pt), component and graphical objects require 3:1 against adjacent colors, and WCAG 2.2 Level AAA requires 7:1 for text.

Most Shopify themes fail at color contrast in one fundamental way: using a brand accent color selected for its beauty in isolation, but later failing miserably on white backgrounds. Light gray text on white backgrounds, yellow text on white backgrounds, orange text on cream backgrounds. All of these violations of minimal acceptable color contrast fail AA standards and will be reported by any commerce-focused auto-audit tool.

Use the Contrast Checker for every single color pair in your theme before you release it. Paste in the text color and the background color. It’ll return you the ratio, your AA pass or fail, and a simple fix for the failing ratio that just takes seconds. I average about 10 seconds per pair.

Alt text on Shopify

Every content image on the site should have alt text. Decorative images should have an empty alt (alt=””) so that screen readers ignore them. Shopify defaults to product title for alt text if you don’t assign one, but using the product title for every image on the product page is redundant.

Good alt text describes the image specifically. Olive linen shirt, front view, unbuttoned, not unhemmed (Note: Good alt text describes the image *specifically*, e.g. Olive linen shirt, front view, unbuttoned, not unhemmed rather than e.g. shirt) . The Alt Text Generator can quickly and efficiently produce this accessible alt text for large product catalogs.

Keyboard navigation

Is it possible to use the website store without using the mouse? Use tab to navigate from the tab on the header to the products, through the focus ring to move able items around the page, through the focus ring to the checkout and payment details tab on the checkout. If the focus ring is not visible in any of these steps, if tab order is not correct in any of the steps, or if any of the modals trap focus in any of the steps then you have failed Level A.

Sticky headers/mega menus/product gallery carousels are probably the worst offenders of clutter on single product pages. Unfortunately many themes remove the focus ring outline for the main navigation with outline: none in CSS, which is a WCAG no-no in itself. Even if you use a different method to highlight focus, keep in mind that the default ring outline has a 7:1 contrast, and you should have at least a 3:1 contrast for anything you come up with.

Screen readers and semantic HTML

Screen readers rely on semantic HTML for proper rendering. This means that all heading tags (H1, H2, H3, etc.) must be used in sequential order without skipping. For example, after an H3 do not immediately follow with an H1. Button elements (<button>) should be used as opposed to clickable divs. Forms need to include labels. Any links (whether they are text or icon) should have meaningful copy. None of these best practices are difficult to implement or expensive to purchase. Give your customers a better experience with simple changes to your theme.

Variant pickers are a frequent failure. Color swatches rendered as

with behaviour hooked to click events are invisible to screen reader users. Instead of rendering swatches as colour options within a