WCAG 2.1 AA checklist for Shopify stores

WCAG is the W3C web accessibility standard, and Level AA of version 2.1 is the bar used in US ADA cases and the EU Accessibility Act. Here is what to check on each type of store page.

Updated · A11yPass

What WCAG 2.1 AA means

WCAG is organised around four principles: perceivable, operable, understandable and robust. Each success criterion has a level: A, AA or AAA. WCAG 2.1 has 78 criteria, 30 at Level A and 20 at Level AA. Conforming to AA means meeting all 50 A and AA criteria; AAA is not required.

WCAG 2.2, published in 2023, adds criteria such as focus not obscured and target size. Most laws and standards still cite 2.1, so get 2.1 AA right first and add the 2.2 criteria as you go.

Site-wide

  • Each page declares the correct language
  • One H1 per page and no skipped heading levels
  • A skip link that is the first Tab stop
  • Focus is always visible and moves in a logical order
  • Text contrast at least 4.5:1, large text at least 3:1
  • Pinch zoom is allowed and there is no horizontal scrolling at 375px
  • Every icon button has a name: search, cart, account, menu, close

Home page and navigation

  • Dropdown menus open and close with the keyboard
  • Carousels can be paused and do not steal focus
  • Text inside banner images is repeated in the alt text
  • Newsletter pop-ups take focus, close with Esc and return focus when closed

Collection pages

  • Product card links are named with the product, not "View details"
  • Filters and sort controls have labels and announce their state
  • Load more and pagination work by keyboard and leave focus in a sensible place

Product pages

  • Every product image has alt text that describes the product
  • Size and color pickers are real radio buttons or selects with labels and announced state
  • Quantity field has a label and the plus and minus buttons have names
  • Price changes, sold-out states and add-to-cart confirmations are announced
  • Review, Q&A and other app widgets are tested too

Cart and checkout

  • Remove and quantity buttons have names
  • Discount code field has a label and errors are tied to the field
  • Errors are not shown by color alone
  • Shopify maintains its checkout; test any checkout extensions you add

What automated tools miss

Automated tools find roughly 30–40% of issues. These need a person:

  • Whether alt text is accurate, not "image1"
  • Whether the screen reader output makes sense in order
  • Whether an order can be placed from home page to checkout with a keyboard only
  • Whether dynamic messages and pop-ups are announced
  • Captions and audio description for video

Start with our free accessibility checker, which tests home, product and collection pages and presses Tab 30 times to check focus. For the manual part, request a free manual review.

Questions

What does Level AA mean in WCAG?

Each success criterion is rated A, AA or AAA. Level AA means meeting every A and AA criterion, which is 50 criteria in WCAG 2.1.

Should we go straight to WCAG 2.2?

You can. WCAG 2.2 adds a few criteria to 2.1, including focus not obscured and target size. Most lawsuits and European standards still reference 2.1 AA, so make sure that is met first.

Are Shopify's own themes compliant?

They are a good starting point but not a guarantee. Apps, template edits, images and copy all introduce new issues.

Sources

  1. W3C: Web Content Accessibility Guidelines (WCAG) 2.1
  2. W3C: Web Content Accessibility Guidelines (WCAG) 2.2

This article summarises technical requirements and public data. It is not legal advice; for legal obligations and lawsuits, consult a qualified attorney.