Stall library · Buy
Size or colour can only be chosen by hovering
A hover only variant picker is a size or colour selector whose options are visible but not focusable or clickable, because they respond only to a mouse hover. An AI agent reaching this product page can see the choices and cannot make one, so the journey ends at the size picker with the purchase decision already made. This is the failure that is invisible in your conversion rate, because the agent never reached a cart to abandon.
Why the agent stops
An agent interacts with a page the way assistive technology does: by finding controls and activating them. A div that changes appearance on mouseover is not a control. It has no role, it takes no focus, and clicking it does nothing, so there is no action for the agent to take.
The picker looks entirely finished to the person who built it, because a mouse makes it work. That is why this survives QA: every human test passes.
How often we see this
Not stated here. A frequency means nothing without the cohort it was counted over, and this page is about one stall rather than one category. Where a category has enough stores measured at every stage, the share of them showing this stall is published on its benchmark page, with the methodology beside it.
See it for yourself
- Open a product page with size or colour options.
- Press Tab repeatedly and watch whether focus ever lands on an option value.
- With focus on an option, press Enter or Space and see whether the selection changes.
- If focus never reaches the options, or reaching them does not let you select one, this is your stall. The keyboard test is the agent test.
What to change
- Make each option a real control: a select, a radio input, or a button that responds to a click and to the keyboard.
- Give each option an accessible name that matches the value a shopper would say, such as Medium rather than a swatch with no label.
- Reflect the chosen variant in the URL or in a form value, so the choice is observable rather than only visual.
- Test with the keyboard alone. If you can buy the product without touching the mouse, an agent can too.
What Ottom looks at
When the journey agent finds no focusable or clickable option control, it distinguishes between two cases: option values that are present in the page but not activatable, which is this finding, and options that were never rendered at all, which is variant_js_required. The distinction matters because the fixes are different.
Questions
Is a hover only picker an accessibility or agent problem?
The same problem, seen twice. A control that cannot be operated without a pointer is unusable by somebody using a keyboard or a screen reader, and unusable by an agent for the identical reason: there is no value to set. That is the most useful thing about this finding. The change that makes your store buyable by software is a change you probably owed a person already, and it is the same change rather than a parallel one.
Is a hover only swatch picker common in store themes?
Custom swatch pickers built from non interactive elements are a well established pattern in themes, which is exactly why the keyboard test is worth running on a theme you did not write.