WCAG 2.2 AA checklist for online stores

A WCAG 2.2 AA checklist for Shopify and WooCommerce stores by page type: alt text, contrast, labels, keyboard, focus, target size and the new 2.2 criteria.

FixReports editorial team10 min read

A WCAG 2.2 AA checklist for an online store starts with the failures found on most store templates: missing alt text, low-contrast text, links and buttons with no accessible name, unlabeled form fields, keyboard traps and invisible focus. WCAG 2.2 then adds AA checks that hit stores hard: focused items hidden under sticky bars (2.4.11), tap targets smaller than 24 by 24 CSS pixels (2.5.8) and logins that make people remember or retype things (3.3.8). Test each page type (home, collection, product, cart) with a keyboard and an automated checker, then fix the theme templates so every page inherits the fix.

Key points

  • WCAG 2.2 became a W3C Recommendation on 5 October 2023. The current edition is dated 12 December 2024, and it was approved as ISO/IEC 40500:2025 (opens in a new tab).
  • In the WebAIM Million 2026 (opens in a new tab) (February 2026 data), 95.9% of the top one million home pages had detectable WCAG 2 failures.
  • The six most common failures were low-contrast text (83.9% of pages), missing alt text (53.1%), missing form labels (51%), empty links (46.3%), empty buttons (30.6%) and missing page language (13.5%).
  • The 42,516 Shopify home pages in that sample averaged 75.1 detected errors, against 56.1 for all pages.
  • WCAG 2.2 adds four AA criteria (2.4.11, 2.5.7, 2.5.8, 3.3.8) and two Level A criteria (3.2.6, 3.3.7), and removes 4.1.1 Parsing.

What changed in WCAG 2.2 for online stores?

WCAG 2.2 added nine success criteria, six of them at Level A or AA, and dropped 4.1.1 Parsing as obsolete (W3C WAI (opens in a new tab)).

New criterionLevelWhat it means on a store
2.4.11 Focus Not Obscured (Minimum)AAA focused link or button must not be completely hidden by a sticky header, sticky add-to-cart bar, cookie banner or chat widget
2.5.7 Dragging MovementsAAAnything that needs dragging, such as a price range slider, needs a single-tap alternative
2.5.8 Target Size (Minimum)AAClick and tap targets are at least 24 by 24 CSS pixels, or spaced so a 24 px circle around each does not touch its neighbors
3.2.6 Consistent HelpAHelp links, contact details or chat appear in the same relative order on every page
3.3.7 Redundant EntryADo not ask for the same information twice in one process; auto-fill it or let people select it
3.3.8 Accessible Authentication (Minimum)AASign-in must not depend on memorizing or transcribing, unless there is an alternative or a helper such as paste and password managers

The other three (2.4.12, 2.4.13 and 3.3.9) are Level AAA. Because 2.2 keeps every 2.1 criterion except 4.1.1, meeting 2.2 AA also covers 2.1 AA.

Which WCAG criteria fail most often on store templates?

The same handful show up every year: contrast, alt text, form labels and names for links and buttons, plus keyboard and focus problems that automated tools only partly catch.

CriterionWhat fails on storesHow to fix
1.1.1 Non-text Content (A)Product images with no alt text or a file name as alt text; linked images with no textDescribe the product shown (color, style, angle). Use alt="" only for decoration. Shopify themes should output image.alt
1.4.3 Contrast (Minimum) (AA)Light gray body text, placeholder text, sale badges, text over hero images4.5:1 for normal text, 3:1 for large text (about 24 px, or 18.5 px bold) (W3C (opens in a new tab))
2.4.4 Link Purpose (A), 4.1.2 Name, Role, Value (A)Icon-only cart, search and social links; slider arrows; "X" close buttons with no nameGive each control visible text or an aria-label, such as "Cart, 2 items"
1.3.1 Info and Relationships (A), 3.3.2 Labels or Instructions (A)Newsletter and search fields with only placeholder text; unlabeled quantity inputsUse a <label for> that matches the input id; group radio swatches in a fieldset with a legend
2.1.1 Keyboard (A), 2.1.2 No Keyboard Trap (A)Hover-only menus, swatches built from divs, popups that cannot be closed from the keyboardUse real button and a elements; Escape closes overlays and returns focus
2.4.7 Focus Visible (AA)outline: none in theme CSSAdd a :focus-visible style that stands out against the background

WebAIM also found that one in four linked images had no alt text, and 45% of images missing alt text were links (WebAIM (opens in a new tab)). On a collection grid, that usually means the product image link.

What should you check on the home page?

Check the header, the hero and anything that pops up, because every visitor meets them first.

  • Skip link. A "Skip to content" link as the first focusable item (2.4.1 Bypass Blocks, A).
  • Header icons. Search, account and cart icons have accessible names, and the cart name includes the item count.
  • Menu. Opens with Enter or Space, sub-items reachable by Tab, closes with Escape, and does not rely on hover (2.1.1). Shopify's Theme Store requirements (opens in a new tab) say all parts of a page, including dropdown menus, must be keyboard accessible.
  • Hero slider. If slides move automatically for more than five seconds, provide a pause control (2.2.2 Pause, Stop, Hide, A).
  • Announcement bar and text on images. Measure contrast; brand colors often fail 4.5:1.
  • Popups and cookie banners. Move focus into the popup, label the email field, allow Escape to close it, and make sure a sticky banner never fully covers the focused element (2.4.11). W3C lists CSS scroll-padding as one way to keep focused items clear of sticky bars (W3C (opens in a new tab)).
  • Page language. The html element has a correct lang attribute (3.1.1 Language of Page, A).

What should you check on collection pages?

Collection pages usually fail on product cards, filters and swatches.

  • Product cards. The image link has alt text, or the image is hidden from assistive technology and the title link carries the name.
  • Filters. Every checkbox has a label and each group has a heading or legend. The filter drawer opens, works and closes by keyboard. Announce updated result counts as a status message (4.1.3 Status Messages, AA).
  • Price sliders. Add minimum and maximum number inputs so the filter works without dragging (2.5.7) and without a mouse (2.1.1).
  • Color swatches. Each swatch has a text name, and "sold out" is not shown by color alone (1.4.1 Use of Color, A). Swatches meet 24 by 24 CSS pixels or the spacing rule (2.5.8).
  • Sorting and pagination. The sort dropdown has a label; page links and "load more" buttons meet target size.

What should you check on product pages?

The product page carries the buying decision, so test every control between the photos and the add-to-cart button.

  • Gallery. Each image has alt text, thumbnails are buttons with names such as "Show image 2", and arrows work without dragging (2.5.7).
  • Variant pickers. Size and color options sit in a labeled group (1.3.1), the selected option is exposed to screen readers (4.1.2), and unavailable sizes are marked in text.
  • Quantity. The input has a label, and the minus and plus buttons have names and meet 2.5.8. Shopify's Theme Store now requires touch targets of at least 24 by 24 CSS pixels, and its accessibility best practices (opens in a new tab) recommend 44 by 44 for primary controls.
  • Add to cart. Success and error messages are announced (4.1.3). The FTC's complaint against an overlay vendor cited a site where a screen reader did not announce that an item had been added to the cart, and a 5-star rating graphic read aloud as a "previous" button (FTC complaint (opens in a new tab)).
  • Ratings, tabs and accordions. Ratings have text such as "4.5 out of 5 stars". Accordions expose whether they are expanded.
  • Sticky add-to-cart bar. It must not fully cover the focused element as a keyboard user tabs down the page (2.4.11).
  • Video. Product videos with speech have captions (1.2.2 Captions (Prerecorded), A).

What should you check in the cart and at sign-in?

The cart is the last page most themes fully control, so test it through to the checkout button, then check that account sign-in does not depend on memory or retyping.

  • Cart drawer. Focus moves into the drawer, stays there while it is open, and returns to the cart button when Escape closes it, as Shopify's best practices describe.
  • Line items. Each quantity input is labeled with the product name, and each remove button says what it removes, such as "Remove Linen shirt, size M".
  • Discount and note fields. Labeled, with errors described in text (3.3.1 Error Identification, A).
  • Checkout button. Reachable by Tab, visibly focused and not hidden behind sticky elements.
  • Sign-in (3.3.8). Shopify's customer accounts use passwordless sign-in with a one-time code (opens in a new tab) by default. W3C says codes must be pasteable or auto-filled, and that blocking paste or password managers fails the criterion; object-recognition CAPTCHAs are allowed at AA, but puzzle or math CAPTCHAs need another method (W3C (opens in a new tab)).

Platform differences matter here. On Shopify, checkout.liquid is no longer supported (opens in a new tab) for the information, shipping and payment steps, so most checkout markup is Shopify's rather than your theme's; test the checkout apps and customizations you add. On WooCommerce, checkout is a page on your WordPress site. WooCommerce says its core front end is substantially conformant with WCAG 2.2 AA (statement last updated April 1, 2025), but your theme and plugins can still break it (WooCommerce (opens in a new tab)).

How should you test a store against this checklist?

Combine an automated scan with a keyboard-only purchase and a short screen reader check, on each page type.

  1. Automated scan. Tools such as axe, WAVE or Lighthouse catch contrast, alt text, labels and empty links. Shopify's Theme Store asks for an average Lighthouse accessibility score of at least 90 on home, collection and product pages. That is a floor, not conformance: W3C says tools cannot determine accessibility on their own (opens in a new tab).
  2. Keyboard-only purchase. From the home page, reach a product through the menu or search, filter, choose a variant, add to cart, open the cart and reach the checkout button without a mouse.
  3. Screen reader spot check. With VoiceOver or NVDA, listen to the product name, price, variant state and add-to-cart confirmation.
  4. Retest after changes. Theme updates and new apps can undo fixes.

Our free scan covers step 1 on a home, collection, product, cart and content page in real Chromium with axe-core. The Accessibility Fix Report tests up to 25 pages, adds step 2 as a keyboard-only shopping test up to the checkout button, gives before-and-after code, and includes a checklist for step 3, which needs a person with a screen reader. Neither guarantees ADA or WCAG compliance.

Frequently asked questions

Is WCAG 2.2 legally required for US online stores?

The Justice Department has no ADA regulation setting a web standard for private businesses, and its 2022 web guidance (opens in a new tab) points to WCAG as helpful guidance. Demand letters commonly cite WCAG 2.1 or 2.2 AA, so talk to a lawyer about your specific obligations.

Does meeting WCAG 2.2 AA also meet WCAG 2.1 AA?

Yes, for practical purposes. WCAG 2.2 keeps all WCAG 2.1 success criteria except 4.1.1 Parsing, which W3C removed as obsolete.

What is the minimum target size in WCAG 2.2?

Under 2.5.8, targets must be at least 24 by 24 CSS pixels, unless a 24 px circle centered on each smaller target does not touch other targets or their circles. Links inside sentences, unstyled browser controls, essential presentations and targets with an equivalent control that passes are exempt.

Does a Lighthouse accessibility score of 100 mean my store conforms?

No. Automated tools detect only some failures, and WebAIM notes that an absence of detected errors does not mean a page is accessible or conformant.

Does a password login fail 3.3.8?

Not by itself. A password field passes when people can paste into it and use a password manager; blocking paste or autofill is what fails.

How often should I retest my store?

Retest after every theme update, new app or major template change, and spot-check the buying path regularly, since apps can inject new markup without warning.

Sources

All guides