Give product pages a structure agents can follow

Agents rely on the same structure screen readers use: headings, landmarks and labels. A page built well for accessibility is easier for an agent to read.

Check X3 in the Agent experience dimension, worth 5 points of 100 and measured by software.

What we check

On sampled product pages we check four things, each worth a quarter of the points: a single H1 that matches the product's name, a main landmark, alt text on 80% or more of the images in the main content, and an accessible name on every form control in the main content.

Why it matters

Agents rely on headings, landmarks and labels to find the product and its options.

How to fix it

One H1 for the product name, a main landmark, and alt text on product images. Typical effort: half a day.

  1. Use one H1, for the product's title. Some themes also put the store name or a section heading in an H1, which leaves two.
  2. Wrap the page's main content in a main element. Shopify themes usually do this in theme.liquid.
  3. Add alt text to product images in Shopify admin: open the product, select an image and fill in its alt text.
  4. Label every input in the main content, such as the quantity box and the variant pickers.

Check it yourself

Run Lighthouse's accessibility audit on a product page in Chrome DevTools. It flags missing alt text, unlabeled controls and heading problems.

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.