Accessible Variant Pickers: Size and Color Swatches That Work Without Sight or a Mouse
2026-10-18
The variant picker looks like the simplest component on the product page: a row of color dots, a grid of sizes. It is also a concentrated bundle of accessibility failures. The dots are often images with no names, the sizes are list items with click handlers, selection shows as a subtle outline, and a sold out size is marked by a strikethrough that assistive technology cannot perceive.
Shoppers who cannot use the picker cannot buy the product in a chosen variant at all. They guess, they take the default, or they leave. Because the failures are invisible in a visual review, they survive for years. Every one of them has a standard fix.
Every option needs a real control and a real name
Build the picker on radio inputs or buttons, one per option, grouped with a label like Color or Size. Radio groups are the natural pattern: one selection per group, arrow key movement, state announced by the screen reader without extra scripting. The visual swatch can sit inside the control; the name must too, as text or an accessible label.
Color names matter beyond accessibility. A dot labeled Midnight, Ember, or Stone tells a screen reader user nothing about the actual color, while Navy blue, rust red, and light gray do. Marketing names can stay as decoration, but the accessible name should describe, because the shopper is choosing a color she cannot see rendered.
Selection must be announced, not just outlined
A two pixel outline is not a state. The selected option must be exposed programmatically, through the checked state of a radio or aria-pressed or aria-selected on a button pattern, so assistive technology announces selected when the shopper lands on it. Pages that track selection only in a CSS class leave screen reader users unable to confirm what they are buying.
The confirmation should echo at the decision point too. When a variant is chosen, the product summary near the buy button should update in text: size 10, color navy, in stock, with the price for that variant. That line, reachable and announced politely, is the shopper's receipt before purchase.
Unavailable is information, not a style
A strikethrough size with no text alternative forces shoppers to infer. Keep unavailable options focusable and labeled as sold out in their name, size 10, sold out, rather than removing or disabling them silently. A disabled control that cannot receive focus cannot be discovered by a keyboard shopper, who then never learns the size exists or that it might return.
Where the store offers it, the unavailable option is also the natural home for a notify me action. Putting restock signup on the picker itself serves every shopper, and for assistive technology users it converts a dead end into a path, announced in the same list as the available options.
Errors at the picker need words and focus
Add to cart without a chosen size is the most common picker error, and the common implementation, a brief red shake or a border, is invisible to anyone not watching that pixel. The accessible pattern: a text error naming the missing choice, placed at the picker and announced, with focus moved to the group so the shopper can act immediately.
The same applies to combinations: a size available in one color and not another should be stated when the combination is chosen, not discovered at checkout. Variant logic is complex; the shopper's experience of it should be a sentence, not a surprise.
Related reading
These earlier guides go deeper on connected questions: The Forgotten Page: Making Order Confirmation and Tracking Accessible, Accessible Guest Checkout: Forms That Do Not Punish Shoppers for Skipping the Account, and Accessible Shipping Options in the Cart: Radio Groups Done Right.
Frequently asked questions
Why are color swatches an accessibility problem?
Swatches are often images with no text name, or names like Ember that do not describe a color. Screen reader shoppers need a real control with a descriptive label, such as rust red.
Should sold out sizes be removed from the picker?
No. Keep them focusable and labeled sold out in words. Removing or disabling them silently hides their existence from keyboard and screen reader shoppers.
How does a screen reader shopper confirm their selection?
Through the checked or selected state on the control itself, plus a text summary near the buy button that updates with size, color, availability, and price.
What should happen when someone adds to cart without picking a size?
A text error that names the missing choice, announced to assistive technology, with focus moved to the size group so the shopper can fix it at once.