How do you make Shopify product variant pickers accessible?

Make variant pickers accessible by using real buttons or radio inputs instead of clickable divs, announcing the current selection to assistive technology, and making sure the price and availability updates are perceivable to everyone. The variant picker is where shoppers make the buying decision, so a keyboard or screen reader user who cannot operate it cannot buy. Test it with a keyboard alone: if you cannot select every variant and confirm the price, it is broken.

Use real controls, not styled divs

Most inaccessible variant pickers fail at the foundation: the options are divs or spans with click handlers instead of buttons or radio inputs. A div is not focusable by keyboard and means nothing to a screen reader. Rebuild the picker on native controls. Radio inputs grouped in a fieldset with a legend like "Size" give you keyboard support, screen reader announcements, and a visible selected state almost for free.

If the design demands a custom look, keep the native input and style around it. Visually hidden radio inputs with styled labels are the standard pattern. The input stays in the accessibility tree, the label carries the visual design, and both keyboard and assistive technology users get a working control.

Announce the selection and its consequences

Selecting a variant usually changes the price, the availability message, and the product image. Sighted users see all three update. Screen reader users get none of it unless the page announces it. Use a polite live region for the price and availability text so the update is announced without interrupting the shopper.

Also make the currently selected option programmatically clear. A visual highlight is not enough. The selected radio input's checked state, or aria-pressed on a button, is what assistive technology reports. Test with a screen reader: select a variant and listen. If you hear nothing change, the picker is silent for the people who need it most.

Do not let unavailable variants trap keyboard users

Disabled or sold-out variants need care. A disabled button is skipped by keyboard navigation, which is correct behavior, but the shopper needs to know the option exists and is unavailable. Keep the option visible and marked as unavailable in text, not just with a strikethrough or gray color. Color alone is never the only signal.

Watch for the worse pattern: variants that look selectable but do nothing when activated, or that reset the picker's focus to the top of the page. Either one strands keyboard users. Every variant must be reachable, operable, and honest about its state.

Test the whole decision, not just the click

Component tests are not enough. Run the full variant decision flow with a keyboard: tab to the picker, select each variant, confirm the price and availability update, and add the selected variant to cart. Then do it with a screen reader. The bugs that block purchases hide in the transitions between controls, like a price that updates visually but not in the accessibility tree, or an add-to-cart button that keeps the previous variant's data.

Variant pickers sit on the highest-value page of the store. An inaccessible picker does not just risk a demand letter. It turns away customers at the exact moment they decided to buy.

Check the picker on a real phone

Variant pickers fail on mobile in ways desktop testing never shows. Small option buttons become untappable targets, swatches rely on color alone at small sizes, and the price update can scroll out of view so shoppers never see it change. Test the picker on an actual phone with a keyboard attached if you can, and with a screen reader if your audience includes blind shoppers, who buy on mobile at high rates.

Touch targets should be at least 44 pixels, the selected state must survive zoom, and the price and availability text should sit close enough to the picker that the update is visible without scrolling. Mobile is where most variant decisions happen, so mobile is where the picker has to work.