Size, color and variant pickers AI agents can use

Ask an AI agent to buy "the navy jacket in a medium" and the hard part isn't finding the jacket. It's choosing navy and medium. Size, color and other variant pickers are where many product pages lose agents: the swatch has no name, the selected size looks different but reads the same, and the sold-out option can still be clicked. This guide covers how to build variant pickers AI agents can use without guessing.

Why variant pickers trip agents up

A person sees a row of colored circles, notices a thicker border around one, and sees a crossed-out "XL". A browser agent mostly reads the page's structure: each control's role, its name and its state. If the swatch is a <div> with a background color, it has no role and no name. If "selected" is shown only with a border, there's no state to read. The agent may click the right circle by chance, click the wrong one, or not realize there's a choice to make at all.

The cost is direct. An agent that can't choose a size either gives up and tells the shopper it couldn't complete the task, or adds the wrong item to the cart. Both are lost or returned orders. And the same problems affect shoppers who use a keyboard or a screen reader, so fixing them helps people too.

Agents need four things from a picker: what each option is called, which one is chosen, which ones can't be bought, and confirmation that the page changed after they chose.

1. Make each option a real control with a name

The simplest, most reliable picker is a group of native radio buttons. Only one option can be chosen, the browser handles the keyboard, and every agent knows what a radio button is. You can style the label to look like a swatch or a size box.

<fieldset>
  <legend>Color</legend>
  <label class="swatch">
    <input type="radio" name="color" value="navy" checked>
    <span class="dot" style="background:#1f2a44" aria-hidden="true"></span>
    Navy
  </label>
  <label class="swatch">
    <input type="radio" name="color" value="olive">
    <span class="dot" style="background:#5b5e3a" aria-hidden="true"></span>
    Olive
  </label>
</fieldset>

• Name every option. The color name, such as "Navy", should be the control's name, as visible text or at least an aria-label. A hex code or an image file name isn't a name.
• Name the group. A <fieldset> with a <legend> ("Color", "Size") tells the agent what the choice is about.
• Use the words shoppers use. "Medium" or "M" is fine. An internal code like "SZ-03" isn't. If sizes need context ("UK 8 / US 4"), put it in the name.
• Keep swatch images as decoration. If a swatch is a photo of the fabric, give the control the color name and the image empty alt="", so the name isn't read twice.

If your design uses buttons rather than radios, that works too, as long as they are real <button> elements with names. AgentScore's checks that buttons and links have names, and that clickable things are real buttons and links, look for exactly these problems, though they run on your home page. A product page needs the same care.

2. Show which option is selected, in the code

Selection is the detail most often shown only visually. Radio buttons report it for free through checked. Custom buttons have to say it themselves:

<div role="group" aria-labelledby="size-label">
  <span id="size-label">Size</span>
  <button type="button" aria-pressed="false">S</button>
  <button type="button" aria-pressed="true">M</button>
  <button type="button" aria-pressed="false">L</button>
</div>

• Use aria-pressed="true" on the chosen button and "false" on the others, and update them when the choice changes.
• Alternatively, use role="radio" with aria-checked inside a role="radiogroup". It's more work to get the keyboard right, which is why native radios are usually the better choice.
• Repeat the current choice in text near the picker ("Color: Navy"). It gives agents and people a plain confirmation.

3. Mark out-of-stock options clearly

Hiding a sold-out size makes the shopper wonder whether it ever existed. Showing it with only a strike-through or faded color leaves an agent free to choose it, then fail at "Add to cart". Say it in words and in the control's state.

Approach	What an agent sees
Option faded or struck through with CSS only	A normal option it can pick
Option removed from the page	No sign the size exists
Native radio with disabled and "XL, sold out" in the label	An option that can't be chosen, and why
Button with aria-disabled="true" and "XL, sold out" in its name	The same, and it stays reachable by keyboard

If you offer back-in-stock alerts, make that a separate, named button ("Email me when XL is back"), so an agent can tell it apart from buying.

4. Give each variant its own URL

Many AI assistants fetch pages rather than click through them. They can't press a swatch, but they can open a link. If each variant has its own address, an assistant can point a shopper straight to "the navy jacket in medium", and a browser agent can recover if a click doesn't take.

https://northwind.example/products/field-jacket?color=navy&size=m
https://northwind.example/products/field-jacket?variant=40318

• Update the address when a shopper picks an option, so the current view always has a link.
• Make the URL load with that variant already selected, its price and stock shown, when opened fresh.
• Point the canonical URL at the main product page unless variants are really separate products. See canonical URLs and duplicate pages.

5. Update price, stock and photos where agents can see it

Choosing a larger size or a different material often changes the price. If the new price only appears in an image, or changes quietly in a corner of the page, an agent may report the old one to the shopper.

• Show price and availability as text, and update them when the variant changes.
• Wrap the price and stock line in a live region (aria-live="polite"), so the change is announced to assistive tech and is easier for agents reading the page structure to notice.
• Keep "Add to cart" a real button with the same name throughout. If it's disabled until a size is chosen, say so next to it: "Choose a size". AgentScore's add-to-cart check accepts a button that's disabled until options are chosen, because agents can handle that, as long as they can tell what's missing.

6. Describe variants in your structured data

Agents that read your page HTML rather than click it rely on structured data for the full list of options. schema.org has a ProductGroup type for this: one group, with variesBy naming the dimensions and hasVariant listing each variant as a Product with its own offer. Google documents the pattern in its product variant structured data guide.

{
  "@context": "https://schema.org",
  "@type": "ProductGroup",
  "name": "Field jacket",
  "productGroupID": "FJ-100",
  "variesBy": ["https://schema.org/color", "https://schema.org/size"],
  "hasVariant": [{
    "@type": "Product",
    "sku": "FJ-100-NAV-M",
    "color": "Navy",
    "size": "M",
    "url": "https://northwind.example/products/field-jacket?variant=40318",
    "offers": {
      "@type": "Offer",
      "price": "189.00",
      "priceCurrency": "USD",
      "availability": "https://schema.org/InStock"
    }
  }]
}

AgentScore's "Product pages give price and stock in a form agents can read" check reads offers inside ProductGroup and hasVariant, as well as on a plain Product. For more on the fields that matter, see product data AI shopping agents can read and prices AI agents can read.

How to test your pickers

1. Use only the keyboard. Tab to the color and size pickers, choose an option, and add to cart. If you can't, many agents can't either.
2. Inspect the accessibility tree. In Chrome's developer tools, the Accessibility pane should show each option as a radio or button with a name like "Navy", and its checked or pressed state.
3. Pick a sold-out size. The page should tell you, in words, before you reach the cart.
4. Copy the URL after choosing. Open it in a private window. The same variant should be selected.
5. Run a journey. AgentScore's free scan doesn't choose options on your product pages, so the best test is an agent trying it. A Ghost Agent can run "find the field jacket, choose navy in medium, add it to the cart" on a schedule and replay each step when it gets stuck. See testing key journeys with AI agents.

For the rest of the page's controls, see buttons, links and forms agents can use. For what happens after "Add to cart", see carts AI agents can manage.