Skip to content

EVAL-005Compare

Variant data structured

Checks that size, colour and other variant choices are exposed as named controls an AI agent can read, not as unlabelled swatches.

What we check

On each sampled product page we find the controls used to choose a variant: select menus, radio buttons, ARIA radio groups and listboxes, and swatch containers with two or more images, buttons or links. We check that every option has an accessible name, that the dimension (such as "Size") is named, and that the controls can express every variant your structured data declares. Quantity, sort and filter controls are ignored.

Why it matters

To buy the right item an agent must pick the size or colour the shopper asked for. Swatches with empty alt text are choices it cannot tell apart; an unnamed dimension leaves it guessing between size and finish.

How we check

We read up to 3 product pages. A product has variants when its JSON-LD declares several (hasVariant, or offers with distinct SKUs) or the page has a control with 2 or more options. FAIL: variants are declared but there is no control (or the page says "contact us for sizes"); or no control names all its options. WARN: the structured data declares more variants than the named controls can express (option counts are multiplied, so 3 sizes and 2 colours cover 6); or no control names its dimension through a label, legend, aria-label, or a name, id or class containing a word such as size or colour. PASS otherwise. SKIPPED when no product pages were captured or no sampled product has variants. We do not test whether choosing a variant changes price or stock.

How to fix it

  1. Expose size and colour as a select, labelled radio inputs, or an element with role="radiogroup" and an aria-label.
  2. Give every swatch an accessible name: alt text on the image or aria-label on the button.
  3. Label the dimension itself with a label, legend or aria-label.
  4. Declare variants in JSON-LD (hasVariant, or one Offer per variant with its own sku and url) and make sure the controls can select each one.
  5. If you use a swatch app or custom theme, check each swatch has a name.

What good looks like

<label for="option-size">Size</label>
<select id="option-size" name="option1">
  <option value="S">S</option>
  <option value="M">M</option>
  <option value="L">L</option>
</select>

<fieldset>
  <legend>Colour</legend>
  <label><input type="radio" name="colour" value="sand"> Sand</label>
  <label><input type="radio" name="colour" value="navy"> Navy</label>
</fieldset>

<!-- or image swatches with names -->
<div class="swatches" aria-label="Colour">
  <button aria-label="Sand"><img src="sand.png" alt="Sand"></button>
  <button aria-label="Navy"><img src="navy.png" alt="Navy"></button>
</div>

Sources