ADA website accessibility checklist for Shopify stores

By Fizz Labs · Last checked: 2026-11-09

This checklist walks through the screens every Shopify store has and lists what to look at on each one. Every item names the WCAG 2.1 success criterion it relates to, so you can hand the list to a developer or a theme author without translating it first.

What the ADA guidance actually says about websites

The US Department of Justice published web accessibility guidance in March 2022. It says the Department does not have a regulation setting out detailed technical standards for the websites of businesses, and that businesses have flexibility in how they meet the ADA’s general requirements. The same page points to WCAG and the Section 508 standards as helpful technical references.

In practice this means WCAG 2.1 Level AA is the yardstick most US teams, developers and tools use when they talk about an accessible store. This checklist uses it for the same reason. It is a technical starting point, not a statement about what any court or agency requires of your business.

Every page: the theme shell

• The html element has a correct lang attribute, set by the theme layout file (3.1.1 Language of Page).
• A “Skip to content” link is the first thing a keyboard user reaches and it moves focus to the main content (2.4.1 Bypass Blocks).
• Each template has a unique, descriptive page title, for example the product or collection name followed by the store name (2.4.2 Page Titled).
• The keyboard focus outline is visible on every link, button and form field, including on dark sections and image banners (2.4.7 Focus Visible).
• The main menu, mega menu and any drop-downs open with Enter or Space and close with Escape, without needing a mouse hover (2.1.1 Keyboard).
• The page still works when zoomed to 200% and at a width of 320 CSS pixels, with no sideways scrolling (1.4.4 Resize Text, 1.4.10 Reflow).

Home and collection pages

• Banner and slideshow images that carry words also have those words in real text or in the alt text (1.1.1 Non-text Content, 1.4.5 Images of Text).
• Slideshows and announcement bars that move on their own can be paused (2.2.2 Pause, Stop, Hide).
• Headings follow the visual structure: one main heading, then section headings in order (1.3.1 Info and Relationships).
• Filter and sort controls have visible labels, and applying a filter does not move focus somewhere unexpected (3.3.2 Labels or Instructions, 3.2.2 On Input).
• Product cards have link text that makes sense on its own, not only “View” or an image without alt text (2.4.4 Link Purpose).

Product page

• Product images have alt text that describes what the photo shows; purely decorative images use an empty alt (1.1.1 Non-text Content).
• Variant pickers (size, colour) are real form controls or buttons with names, and the selected option is announced, not shown by colour alone (4.1.2 Name, Role, Value; 1.4.1 Use of Color).
• Sale and regular prices are distinguishable in text, not only by a strikethrough style (1.3.1 Info and Relationships).
• Body text has a contrast ratio of at least 4.5:1, and icons and input borders at least 3:1 (1.4.3 Contrast, 1.4.11 Non-text Contrast).
• “Added to cart” and stock messages are announced to screen readers through a status message (4.1.3 Status Messages).

Cart, search and the way into checkout

• The cart drawer or mini-cart receives focus when it opens, keeps focus inside while open and returns focus when it closes (2.4.3 Focus Order, 2.1.2 No Keyboard Trap).
• Quantity fields and the remove button each have an accessible name that includes the product (4.1.2 Name, Role, Value).
• The search field has a label, and search suggestions can be reached and chosen with the keyboard (3.3.2 Labels or Instructions, 2.1.1 Keyboard).
• Form errors such as an invalid discount code are shown in text next to the field and explain what to change (3.3.1 Error Identification, 3.3.3 Error Suggestion).

What you can and cannot change

Shopify hosts the checkout, and many store features come from apps that inject their own markup: reviews, chat bubbles, pop-ups and loyalty widgets. Your theme code cannot always reach those parts. When a check fails inside an app, record which app produced it and ask its developer for a fix or an alternative. Shopify’s own theme accessibility best practices note that following them does not on its own guarantee an accessible theme, which is a fair summary of every checklist, including this one.

An automated scan covers some of the items above, such as missing alt attributes, empty buttons and low contrast. Items about meaning, order and behaviour need a person with a keyboard. Run the free scan on each template first, fix what it finds, then go through this list by hand. When you need the whole store documented for a developer, see the Report options.

Check your own pages

The free scanner runs automated WCAG checks in your browser. Nothing is uploaded.

Related guides

• WCAG 2.1 AA quick audit: a 30-minute method
• EAA vs ADA: one accessibility scan, two laws

Related tools

• Run it on your store: the free Shopify check

Sources

• DOJ: Guidance on Web Accessibility and the ADA (2022): https://www.ada.gov/resources/web-guidance/
• W3C: Web Content Accessibility Guidelines (WCAG) 2.1: https://www.w3.org/TR/WCAG21/
• Shopify: Theme accessibility best practices: https://shopify.dev/docs/storefronts/themes/best-practices/accessibility