Accessible Size and Fit Selectors: Swatches Are Radio Groups, Not Pictures

A size selector built from clickable colour blocks and letter tiles fails in predictable ways. Treating swatches as a labelled radio group, with a visible selected state, fixes most of them.

Pick a size on a product page and watch what you actually operated. On many stores it is a row of letter tiles, S, M, L, XL, each a div with a click handler, and the selected one is marked only by a darker border. A keyboard user tabs past the whole row without landing anywhere. A screen reader user hears the letters read as plain text, with no hint that choosing one is required before the buy button will work.

That is a markup problem, not a design problem. WCAG 2.2 criterion 4.1.2, Name Role Value, asks that a control expose what it is, what it is called, and whether it is selected. A native radio group gives you all three for free. A pile of clickable spans gives you none of them, and every assistive technology then has to guess at a control the sighted shopper found obvious.

Build it as a radio group first

Use a fieldset with a legend that says Size, then one radio input per option, each with its own label. The label is the big tap target, styled as a tile, and the input can be visually hidden as long as focus and selected states stay visible. Selecting with arrow keys then matches how radio groups behave everywhere else, which is exactly what keyboard and switch users expect.

Out of stock sizes need the same treatment. Mark the input disabled, keep the label readable, and add text such as sold out to the label rather than relying on a strikethrough. A strikethrough is a visual convention. It is not announced, and at low contrast it is not reliably seen either, so a shopper can pick a size the store cannot ship and only learn that at checkout.

States you have to be able to see

Two states fail most often in audits. The focus indicator on a tile that is itself a border change, so focus and selection look identical. And a selected state carried by colour alone, which fails 1.4.1 Use of Color and disappears for anyone who cannot separate the two shades the design team chose. Add a shape change, a check mark, bold text, or an outline with real thickness. Any second cue works, colour alone does not.

Test at 200 percent zoom as well. WCAG 1.4.10 Reflow expects content to work at 320 CSS pixels wide, and size rows that wrap badly at that width push the buy button under sticky banners. If the row wraps, let it wrap cleanly in reading order, and keep the selected tile fully visible rather than half cut off at the fold.

The error is part of the selector

Add to bag with no size chosen is where this control earns its keep. The common pattern shakes the tile row, turns it red for a second, and says nothing. Link the error to the group with aria-describedby, put the text where the group is, and move focus to the fieldset if the form was submitted. The shopper should hear please choose a size, not hunt for what turned red.

Do the same check on the quick view version of the product, not just the full product page. Quick view modals often rebuild the selector with different markup, and the accessible full page version is no defence if the modal version, which is where mobile traffic mostly buys, is the broken one.

Related reading: Accessible Quantity Pickers and Steppers on Product Pages, Accessible Back in Stock Forms: The Email Field Is Only Half the Job, Accessible Address Autocomplete and Lookup Fields at Checkout.

Frequently asked questions

Do colour swatches need text labels too?

Yes, in some accessible form. A swatch named only by its colour value in an image alt or title attribute is fragile. Put the colour name in the label text, visually hidden if the design will not carry it, so a screen reader announces navy, not swatch 3.

Can I keep custom tiles and still pass WCAG?

Yes, if the underlying control is a real radio input and the states survive. Custom styling is not the failure. Custom behaviour built on divs, with no role, no keyboard support, and no selected state exposed to assistive technology, is the failure.

How big should a size tile be?

WCAG 2.5.8 Target Size Minimum at AA sets 24 by 24 CSS pixels with narrow exceptions, and the AAA level in 2.5.5 sets 44 by 44. Letter tiles are normally well above both. Small swatch dots are where stores fall short, so measure the dot, not the row.

Should sold out sizes stay in the group?

Usually yes, marked disabled with the reason in text. Removing them entirely leaves a returning shopper unsure whether their size exists at all. Keeping them, clearly unavailable, answers that question and keeps the group structure honest.