Online store accessibility: product pages, cart and checkout (keyboard and screen reader checklist)

An online store only works if a visitor can get from a product page to a finished order. For people who use a keyboard, a screen reader or magnification, that path usually breaks in the same few places: the size or colour picker, the add-to-cart confirmation, the slide-out cart and the checkout form. This checklist walks the buying path in order so you can test your own store in about 20 minutes.

1. Product photos

Alt text should say what a shopper needs: product name, colour or material, and the view ("Black leather tote, side view showing zip pocket"). The same alt text on every gallery image doesn't help. Thumbnail buttons and gallery arrows need names such as "Show image 2 of 5". If you used an AI tool to fill alt text in bulk, see reviewing AI-generated alt text.

2. Size, colour and variant pickers

Colour swatches shown only as coloured circles need a text name for each option, and the selected option must be announced, not shown only by a border colour. Sold-out options should say "sold out" in text. Test: Tab to the picker and change the option using only the keyboard.

<fieldset><legend>Colour</legend>
<input type="radio" id="c-blk" name="colour" value="Black"><label for="c-blk">Black</label>
<input type="radio" id="c-tan" name="colour" value="Tan" disabled><label for="c-tan">Tan (sold out)</label>
</fieldset>

3. Quantity and price

Plus and minus buttons need names ("Increase quantity"), and the quantity field needs a label. Sale prices shown only with a strike-through should also say "was $40, now $30" in text that screen readers can reach.

4. Add to cart and the cart drawer

When someone presses Add to cart, a screen reader user should hear that it worked (a short status message such as "Added to cart, 2 items"). If a cart drawer slides out, keyboard focus should move into it, Escape should close it, and focus should return to the button afterwards. A drawer that opens behind the page or traps focus is one of the most common store barriers.

5. Discount code and shipping fields

The discount field needs a visible label, and its result ("Code applied" or "This code has expired") must be announced, not just shown in red or green. Shipping calculators need labelled country and postcode fields.

6. Checkout forms

Every field needs a visible label, autocomplete should be allowed (name, address, card), and errors should say what's wrong and how to fix it. On hosted checkouts (for example Shopify Checkout or Stripe Checkout) you control less of the code; test it anyway, and tell the provider about anything that blocks you. See accessible forms for field-level fixes.

7. Pop-ups, chat and cookie banners

Email sign-up pop-ups and cookie banners should close with Escape or a named close button and must not hide the focused element. Chat bubbles should not cover the checkout button on small screens. See the full cookie banner, pop-up and chat widget checklist.

The 20-minute self-test

1. Unplug your mouse (or don't touch the trackpad).
2. From the home page, use Tab, Shift+Tab, Enter, Space and the arrow keys to find a product, pick a variant, add it to the cart, open the cart and reach the checkout.
3. At each step, can you see where focus is? Can you tell what happened after each button press?
4. Zoom the browser to 200% and repeat the product page and cart steps.
5. Run our free homepage snapshot and the free alt text checker on a product page for the code-level issues.

The keyboard navigation test has more detail on step 2. Platform-specific steps: Shopify, Squarespace, Wix, WordPress and WooCommerce.

What a scan can and can't check here

An automated scan like ours finds missing alt text, unlabelled buttons and fields, low contrast and similar code problems on the pages it visits. It can't complete a purchase, judge whether your announcements make sense, or test a hosted checkout it can't reach, which is why the self-test above matters. If you sell to consumers in the EU, note that the European Accessibility Act lists e-commerce among the services it covers; ask a lawyer how it applies to you.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

• Cookie banners, pop-ups and chat widgets: an accessibility checklist for small business websites
• Video captions and transcripts for small-business websites
• Mobile website accessibility: pinch zoom, text size, reflow and tap targets
• WCAG 2.2 explained for small-business websites

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.