Make add to cart easy for browser agents

Browser agents use your store as a shopper does, by clicking. They find buttons and options by the names screen readers read, so an unlabeled or custom control can stop them.

Check C2 in the Checkout path dimension, worth 4 points of 100 and measured by software.

What we check

On 3 product pages we read the accessibility tree, the structure screen readers use. Each page earns 60% for an enabled button named Add to cart, Add to bag, Add to basket or Buy now, and 40% times the share of variant pickers that are selects, radio buttons or list boxes with an accessible name. A product with a single variant gets the 40%. The score is the average over the pages.

Why it matters

Browser agents find controls by their accessible names; unlabeled or custom controls get missed.

How to fix it

Use a native button labeled "Add to cart" and label the variant pickers. Typical effort: half a day.

  1. Use a real button for add to cart, with its words as visible text, such as "Add to cart".
  2. Build size and color pickers from radio buttons or a select, each with a label. Swatches styled from radio buttons pass, while custom buttons that only look like options don't.
  3. If an app replaces the button, such as a pre-order or subscription app, check that its button keeps an accessible name.

Check it yourself

In Chrome, open DevTools, select the add to cart button and look at the Accessibility pane. Its role should be button and its name should read like Add to cart.

See how your store does

The free audit runs this check and the rest on your store and emails you your score, your grade and your top findings, with the evidence for each.