Making Size and Colour Swatches Accessible
Swatches compress choices into coloured squares and letter tiles that often have no text meaning. Patterns that keep variant selection usable for everyone.
Variant selection is where a product page becomes a form. Colour swatches, size tiles, and finish options decide price, stock, and whether the buy button works, yet they are commonly built as clickable coloured boxes with no name a screen reader can say.
The fix is structure, not decoration. This guide covers naming every option in text, announcing selection and stock states, and handling the out of stock variant without hiding it or lying about it.
Give every swatch a text name
Each colour option needs its colour name as the accessible label, and the selected colour should also appear as page text near the selector, Colour: Forest Green, updating as choices change. A shopper should never have to guess which shade a photograph suggests.
Sizes need the same treatment, with the full meaning where letters are ambiguous, and size guidance linked nearby. A tile that announces only S gives a screen reader user the letter and nothing about fit, availability, or price difference.
Announce selection, price, and stock changes
Changing a variant can change price, delivery estimate, image, and stock state at once. The important changes, especially price and availability, should be announced or at least present in text that updates in place in a predictable location.
Out of stock variants are a design decision with accessibility consequences. Strikethrough alone does not communicate. Mark unavailable options in text, keep them focusable or clearly listed so shoppers learn the range exists, and offer a notify route with a labelled control.
Keep the buy path honest about selection state
If a shopper must choose a size before buying, the requirement and the missing step should be stated in text when they try to proceed, with focus moved to the selector. An add to basket button that silently does nothing is the worst version of this pattern.
Where a default variant is preselected, that should be visible in the text summary too. Preselection surprises shoppers at delivery when the colour that arrives is the colour the page chose, not the one they thought they picked.
Test variants like a form, because they are one
Select every variant type by keyboard alone, read the page with a screen reader while changing options, and confirm price, stock, and selected values are all obtainable as text. Repeat on the best selling product after any theme update.
Image alt text for variant images should name the variant shown. When the main image changes with selection, its description changing with it is how a screen reader user confirms their choice took effect.
Related reading
If this topic is useful, these earlier guides go deeper on connected questions: Accessible Product Bundles and Gift Sets, Making Delivery Slot Pickers Accessible, and Accessible Star Ratings and Review Widgets.
Frequently asked questions
What label should a colour swatch have?
The colour name itself, with the current selection also shown as page text, for example Colour: Forest Green. A swatch announced as button or as a filename gives the shopper nothing to choose by.
How should out of stock sizes be shown?
In text as unavailable, not by strikethrough or grey alone. Shoppers should be able to learn the size exists, understand it cannot be bought now, and find a notify option if one is offered.
What should happen if a shopper tries to buy without choosing a size?
A text message naming the missing step, with focus moved to the size selector. Silent failure, where the button simply does nothing, leaves every shopper guessing and assistive technology users stranded.
Why announce price changes on variant selection?
Because a variant change that quietly alters the price presents a different offer than the shopper thinks they accepted. Price after selection should be obtainable as updated text in a predictable place.