Accessible checkout checklist: 25 checks for e-commerce teams

Use this checklist on every release that touches your theme, cart or checkout. Items marked (auto) can be verified by automated monitoring; others need a human.

Product page

• Product images have meaningful alternative text (auto for presence, human for quality) — WCAG 1.1.1
• Variant selectors (size, colour) have visible labels and are keyboard operable (auto) — 1.3.1, 2.1.1, 4.1.2
• The add-to-cart control is a native <button> reachable with Tab and activated with Enter/Space (auto) — 2.1.1
• Price, sale price and stock messages meet 4.5:1 contrast (auto) — 1.4.3
• Quantity steppers have accessible names ("Increase quantity") (auto) — 4.1.2
• Touch targets are at least 24×24 CSS pixels (auto) — 2.5.8

After "Add to cart"

• If a drawer/popup opens: it has role="dialog", aria-modal="true" and a name (auto) — 4.1.2
• Focus moves into the drawer and returns to the trigger when it closes (auto) — 2.4.3
• Escape closes the drawer (auto)
• If no drawer opens: a polite live region announces "Added to cart" (auto) — 4.1.3

Cart

• Each line item has a remove button with an accessible name including the product (auto for presence)
• Quantity inputs are labelled (auto) — 1.3.1
• Order summary is readable at 200% zoom without horizontal scrolling (human) — 1.4.10
• The checkout button is a native button or link (auto) — 2.1.1

Checkout information step

• Every field has a programmatic label (auto) — 1.3.1, 3.3.2
• Name, email, phone and address fields have correct autocomplete tokens (auto) — 1.3.5
• Required fields are marked with required / aria-required (auto) — 3.3.2
• Submitting with errors moves focus to the first error or an error summary (auto) — 3.3.1
• Each error message is linked to its field via aria-describedby and the field has aria-invalid="true" (auto) — 3.3.1
• Error messages explain how to fix the problem (human) — 3.3.3
• No time limit, or it can be extended (human) — 2.2.1

Payment and confirmation

• Payment iframes have a title (auto) — 4.1.2
• Payment method choices are radio buttons in a group with a legend (auto/human) — 1.3.1
• 3-D Secure / bank challenge windows are usable with a keyboard (human)
• The confirmation page states the order number as text and is announced (human)

Make it stick

Run the checklist once manually, then let automated monitoring re-run the automatable half every day so you are alerted when a release breaks it.