WCAG 2.1 AA Checklist for Online Stores, Page by Page

Most online stores that set an accessibility target pick WCAG 2.1 Level AA, then struggle to turn about 50 success criteria into work a merchandising or dev team can act on. This WCAG 2.1 checklist groups the criteria by the parts of a store shoppers actually use.

A WCAG 2.1 checklist for an online store covers the Level A and AA success criteria shoppers hit most: alt text on product images (1.1.1), 4.5:1 text contrast (1.4.3), full keyboard access (2.1.1), visible focus (2.4.7), labeled checkout fields with clear error messages (3.3.1, 3.3.2) and announced cart updates (4.1.3).

What does WCAG 2.1 AA ask of an online store?

WCAG 2.1 is the W3C's Web Content Accessibility Guidelines, version 2.1, first published in 2018 and updated as a W3C Recommendation in May 2025. It has 78 success criteria, each rated Level A, AA or AAA. A store that targets Level AA aims to meet every Level A and Level AA criterion.

The criteria are written for any website, so they use general terms like "non-text content" and "status messages." On an online store, those terms mean product photos, size charts, mega menus, variant pickers, promo banners, add-to-cart alerts and the checkout form. The checklist below translates each relevant criterion into the store element it applies to.

The WCAG 2.1 AA checklist for online stores

Use this as the working checklist for each high-traffic template. The level in brackets is the WCAG 2.1 conformance level for that success criterion.

Product images and media

• 1.1.1 Non-text Content (A): every product image, swatch and icon button has a text alternative that describes what a shopper needs to know, such as color and style. Decorative images use empty alt text.
• 1.2.2 Captions (Prerecorded) (A): product and how-to videos with sound have captions.
• 2.2.2 Pause, Stop, Hide (A): auto-rotating hero carousels and moving promo banners can be paused or stopped.

Navigation and menus

• 2.4.2 Page Titled (A): each product, collection and checkout step has a descriptive page title.
• 2.4.3 Focus Order (A): mega menus, filters and slide-out carts receive focus in an order that matches the visual layout.
• 2.4.4 Link Purpose (In Context) (A): links make sense from their text or context, so a page has no row of identical "Shop now" links with no way to tell them apart.
• 3.1.1 Language of Page (A): the page declares its language so screen readers pronounce product copy correctly.

Forms, cart and checkout

• 3.3.2 Labels or Instructions (A): every checkout, search and newsletter field has a visible label, not only hint text that disappears when the shopper starts typing.
• 1.3.5 Identify Input Purpose (AA): name, email, address and payment fields use the correct autocomplete attributes.
• 3.3.1 Error Identification (A) and 3.3.3 Error Suggestion (AA): a declined card or invalid postal code is described in text, with a suggestion for how to correct it.
• 3.3.4 Error Prevention (Legal, Financial, Data) (AA): shoppers can review and correct an order before it is submitted.
• 4.1.2 Name, Role, Value (A): custom quantity steppers, variant pickers and accordions expose their name, role and state to assistive technology.

Color and contrast

• 1.4.3 Contrast (Minimum) (AA): body text and prices have at least a 4.5:1 contrast ratio, and large text at least 3:1, including text on sale badges and image banners.
• 1.4.11 Non-text Contrast (AA): form field borders, focus rings and selected-swatch outlines have at least 3:1 contrast against what sits next to them.
• 1.4.1 Use of Color (A): out-of-stock sizes, sale prices and form errors are not signaled by color alone.

Keyboard access

• 2.1.1 Keyboard (A): a shopper can browse, choose a variant, add to cart and finish checkout with only a keyboard.
• 2.1.2 No Keyboard Trap (A): pop-ups, chat widgets and quick-view modals can be closed and left with the keyboard.
• 2.4.7 Focus Visible (AA): the element that has keyboard focus is always visibly highlighted.

Dynamic content and responsive layout

• 4.1.3 Status Messages (AA): "Added to cart," discount-code results and stock alerts are announced to screen readers without moving focus.
• 1.4.13 Content on Hover or Focus (AA): tooltips and hover menus can be dismissed, hovered over and stay visible until the shopper moves away.
• 1.4.4 Resize Text (AA) and 1.4.10 Reflow (AA): pages stay usable at 200% text size and at a 320 CSS pixel width without sideways scrolling.
• 1.3.1 Info and Relationships (A): headings, lists and size-chart tables are marked up so their structure is available to screen readers.
• 2.5.3 Label in Name (A): a button's accessible name contains the words shown on it, so voice-control users can say "Add to cart" and have it work.

Which WCAG 2.1 checklist items fail most often?

Low contrast text is the most common detected WCAG failure on the web: the WebAIM Million report found it on 83.9% of the one million home pages tested in February 2026, and 95.9% of those home pages had at least one detected WCAG 2 failure (WebAIM Million, 2026).

The same WebAIM Million analysis found missing alternative text on 53.1% of home pages, missing form input labels on 51%, empty links on 46.3% and empty buttons on 30.6%. On an online store, those failures usually trace back to sale badges, image-only product tiles, icon-only cart and search buttons, and checkout fields that rely on hint text inside the field. They map to success criteria 1.4.3, 1.1.1, 3.3.2, 2.4.4 and 4.1.2 in the checklist above.

For a ranked view of which of these to address first on a store, see which accessibility issues an online store should fix first.

How do you work through a WCAG 2.1 checklist on a live store?

Work by template, not by URL. Most online stores render thousands of product pages from one product template, so a missing label on the variant picker is one issue repeated across the catalog. Checking the home page, a collection page, a product page, the cart and each checkout step covers most of what shoppers see.

Rank what you find by traffic and by how hard each failure blocks a purchase. An unlabeled payment field or a keyboard trap in the cart drawer stops an order; a low-contrast footer link does not. The guide to running a website accessibility audit walks through the audit step in more detail, and finding accessibility issues on a Shopify store covers theme-specific checks.

What can't an automated scan check on the WCAG 2.1 checklist?

Automated scanners reliably detect missing alt attributes, contrast ratios, missing labels and empty links. They cannot tell whether alt text describes the product, whether focus order matches the layout of a mega menu, or whether a screen reader announces a cart update in a way a shopper understands.

Close that gap with a manual pass on the purchase path: complete a test order using only a keyboard, then repeat it with a screen reader such as VoiceOver or NVDA. The comparison of accessibility testing tools for ecommerce shows what each type of tool catches and misses.

Frequently asked questions

How Noibu's ADA agent works through the checklist

Noibu's ADA agent audits a store's highest-traffic pages against WCAG standards and creates a comprehensive report of what is falling short, so the team sees which checklist items fail on the pages that matter most. The ADA agent stages changes for review, nothing ships without the team's approval, and after a change goes live it re-audits the page to confirm the violation has been resolved. Teams can work with the ADA agent in the Noibu console or through Noibu MCP in AI tools like Claude. Read more in Noibu's ADA agent overview.

Noibu is AI for ecommerce operations, the always-on optimization system that keeps online stores running at their best. A team of supervised AI agents finds what's broken, slow, or leaking revenue, does the work, and hands results back for human approval. Trusted by retailers like Free People, Guess, Liquid I.V., and Ariat.

To see how your own pages measure up, start with a free website audit.