Skip to main content
WCAGrules
Quick navigation

Guides · Building it right

The Six Places Online Stores Break

Ecommerce draws more accessibility complaints than any other category, for an obvious reason. A broken checkout is a customer who cannot buy.

Last reviewed August 28, 2026

Every accessibility failure costs somebody effort. On a shop, it costs you money, and the loss looks exactly like every other abandoned basket in your analytics. Nobody writes in to say they could not complete the purchase. They just leave.

The failures cluster in six places, and they are the same six on every platform we audit.

1. Product Images With No Alt Text

The single most common failure on any store, because every platform gives you an alt field and none of them enforce it. A catalogue of four hundred products usually has it blank on most of them.

For a shop this is not a compliance detail. The photo is the product description. "Blue kettle" is not enough when the customer is choosing between six blue kettles. Our alt text guide has the worked examples.

2. Variant Selectors That Announce Nothing

Colour swatches and size pickers get built as styled divs or list items with click handlers. They look excellent and they expose no name, no role, and no selected state.

The customer hears a row of unlabelled things, cannot tell which one is chosen, and adds the wrong variant to the basket. Native radio inputs, styled however you like, solve this completely. Use them.

3. Silent Add-to-Basket

The basket count updates in the corner. Nothing is announced. A screen reader user presses Add, hears nothing, and presses it again. And again.

This is 4.1.3 Status Messages and it needs a live region. It is a small fix with a direct effect on whether somebody can shop at all.

4. Filters That Update Silently

Faceted navigation applies a filter, the product grid re-renders, and no announcement is made. The user has no way to know whether anything changed, how many results there are now, or where focus went.

Price sliders are worse. They are usually mouse-only, so a keyboard user cannot set a range at all.

5. Checkout Errors Nobody Hears

The highest-cost failure. A card is declined or a field is invalid, the error renders at the top of the form, focus stays where it was, and nothing is announced. The customer knows only that pressing the button did nothing.

Payment iframes make it harder. Errors inside a gateway's iframe are outside your control, the iframe itself often has no title, and focus handling across the boundary is inconsistent. Test it rather than assuming, and report what you find to the gateway.

6. Modals and Drawers That Trap or Lose Focus

Quick view, cart drawer, size guide, cookie banner, newsletter popup. Each one opens without moving focus into it, or traps focus with no Escape handler, or returns focus to the top of the page on close.

On a store these stack. The newsletter popup appears over the cookie banner while a cart drawer is open, and a keyboard user is somewhere underneath all three.

The test that matters most

Buy something from your own store using only the keyboard, then again with a screen reader running. Start to finish, including a deliberately failed payment. Everything above shows up in one pass, and most owners find at least three of the six.

What This Costs

Ecommerce is the most-sued category in US web accessibility litigation, which is the visible cost. The invisible one is larger. Customers who could not finish and left, on traffic you already paid to acquire.

The 1.3 billion people living with a significant disability are not a niche audience, and the fixes above are small. Most of them are a day of development work. That is the whole gap.

One honest limit

A scanner cannot exercise a purchase. It does not add to a basket, apply a discount code, fail a payment, or move through checkout steps, so the whole part that matters most goes unchecked. That is what our checkout audit is for, with a real screen reader user completing the purchase.

Common questions

Why is ecommerce accessibility important?
Because a broken checkout is a customer who cannot buy, and the loss is invisible in analytics. Ecommerce is also the most-sued category in US web accessibility litigation.
What breaks most often on online stores?
Product images with no alt text, variant selectors that expose no state, silent add-to-basket, filters that update without announcement, checkout errors that are not announced, and modals that trap or lose focus.
Can a scanner test my checkout?
No. Automated tools check a page as it sits. They do not add to a basket, apply a code, fail a payment, or move between checkout steps. The part that matters most needs a person going through the whole flow.
How do I test my store myself?
Buy something from it with the mouse out of reach, then again with a screen reader running, including a deliberately failed payment. That single pass surfaces most of the common failures.

Sources

Keep reading

More on building it right

Reading about it is the cheap part.

Find out where your site actually stands. The free scan checks 10 pages in a real browser against all 90 supported automated rules, keeps its 27 best-practice checks separate from WCAG findings, and names the rule behind every finding. The full audit adds an expert review and a real blind screen-reader user. From $499, with the report in 5 business days on Rapid and 10 on Standard, and the clock starting at cleared payment.

Go somewhere useful

Find tools, resources and your workspace.

29 destinations