Reviewed October 25, 2026

Accessible Size and Color Selectors: Where Shoppers Get Stuck

Swatches and size buttons that only work by mouse or by sight block real buyers. How to make selectors keyboard friendly, labeled, and clear about what is chosen.

Selectors are controls, not pictures

On many product pages, size and color selectors are built as styled images or clickable boxes that behave like controls for mouse users and like decoration for everyone else. A keyboard shopper tabs past them without ever landing. A screen reader user hears nothing, or hears a filename. The product might as well not come in sizes.

A selector is a form control and needs to be built like one. Real radio inputs under the visual styling, or buttons with proper roles, give keyboard focus, screen reader announcements, and a programmatic selected state for free. The visual design can stay identical. Only the machinery underneath has to grow up.

Labels that exist outside the shopper head

Color swatches identified only by their color fail twice. A blind shopper gets no name at all, and a color blind shopper cannot reliably tell which swatch is the navy and which is the black. Every swatch needs a real text label, visible on focus or selection at minimum, and announced by assistive tech always.

The selected state needs the same treatment. A slightly thicker border is a weak signal that many shoppers miss. Pair the visual change with text somewhere persistent, such as Selected color: Navy near the selector, which also helps every shopper confirm a choice before adding to cart. Clarity here prevents returns as well as exclusion.

Sold out states and error handling

Unavailable sizes are often shown struck through and skipped entirely by the markup, leaving keyboard and screen reader shoppers unable to learn that their size exists but is sold out. That information matters. It tells the shopper to check back or join a waitlist instead of assuming the product runs small.

Selection errors need care too. If a shopper tries to add to cart without choosing a size, the error should move focus to the selector, name what is missing in text, and be announced. A red shake animation and a brief red outline communicate nothing to the shoppers most likely to miss the requirement.

A quick audit you can run today

Unplug your mouse and buy your best selling product using only the keyboard. You should be able to tab to the size and color controls, see where focus is, change the selection with arrow keys or the spacebar, and hear or read the selected value. Then run the same purchase with a screen reader on your phone.

Time it and note every point where you had to guess. Each guess is a place real customers abandon. Selector fixes are usually small template changes with outsized effect, because they sit on the one control every apparel and footwear shopper must use to buy anything.

Frequently asked questions

Are image swatches ever acceptable?

Yes, when each swatch is a real button or radio control with a text label that assistive tech can read, a visible focus style, and a selected state conveyed in more than styling alone. The image is fine. The missing machinery around it is the problem.

How should sold out sizes be handled for screen readers?

Keep them in the control group with their names, marked as unavailable in text and in the accessibility properties, rather than removing them or leaving them as silent struck through text. Shoppers deserve to know the size exists.

What keyboard pattern should size selectors follow?

Radio group behavior is the expected pattern: tab lands on the selected size, arrow keys move between sizes and select as you go. Buttons that each take a tab stop also work. What fails is a control the keyboard cannot reach at all.

Does fixing selectors help mobile shoppers too?

Yes. Larger tap targets, clear selected labels, and text confirmation of the chosen variant help anyone shopping one handed in bright light. Accessible selectors and usable selectors are mostly the same selectors.