Accessible Shopify variant pickers and colour swatches

The variant picker is where a shopper chooses colour, size or material, so if it fails, they cannot buy. A picker works for keyboard and screen reader users when each option is a group with a name (a fieldset and legend), each choice is a real radio button or an option in a labelled select, swatches have text names, the selected and sold-out states are shown in more than colour, and price or stock changes are announced. Shopify's free Dawn theme follows this pattern, which makes it a useful reference.²³

Why variant pickers go wrong

A picker looks simple, but it carries a lot of information: which options exist, which is selected, which combinations are sold out, and what the price is now. Themes and apps often draw all of that with colour and layout alone. The problems we see most often are:

• swatches that are coloured circles with no text name, so a screen reader announces "button" or nothing at all;
• a selected state shown only by a colour change, which fails people who cannot see the difference;⁵
• custom dropdowns built from div elements that cannot be reached or opened with a keyboard;
• sold-out options shown only with a strike-through or faded colour;
• a price that changes on screen without anything being announced;
• small, tightly packed swatches that are hard to tap.

Each of these maps to a WCAG 2.2 success criterion, covered below.

The pattern that works: a named group of radio buttons

WCAG asks that information and relationships shown visually are also available in code.⁴ For a variant picker, the relationship is "these choices belong to the option called Colour". The native way to say that is a fieldset whose legend is the option name, containing one radio button per value. Dawn's variant picker does exactly this: each option is rendered as a fieldset with a legend, and each value as an input type="radio" with a label.²³

<fieldset>
  <legend>Colour: <span>Navy</span></legend>
  <input type="radio" id="c-navy" name="Colour" value="Navy" checked>
  <label for="c-navy">Navy</label>
  <input type="radio" id="c-sand" name="Colour" value="Sand">
  <label for="c-sand">Sand <span class="visually-hidden">sold out</span></label>
</fieldset>

Native radio buttons bring the right behaviour for free. In the WAI-ARIA Authoring Practices radio group pattern, Tab moves focus into and out of the group, and the arrow keys move between choices.¹¹ Each control also exposes its name, role and state, which is what WCAG 4.1.2 asks for.⁹ If you style the radios as swatches or pills, hide the default circle visually but keep the input in the page, so keyboard and screen reader behaviour stays intact.

A native select with a visible label is also a sound choice, especially for long lists such as sizes. The trouble starts with custom dropdowns that imitate a select but are not one; if your theme or app uses one, test it with a keyboard first.

Colour swatches: name every colour

WCAG 1.4.1 says colour must not be the only visual way of conveying information.⁵ A swatch that shows navy blue is fine, but it must also have a text name. Dawn's swatch picker puts the value in visually hidden text inside each label and shows the selected value next to the option name in the legend, so sighted and screen reader users both get it.²³

• Give every swatch a text label with the colour name your shoppers would use, such as "Navy", not a code like "C-104".
• Show the selected swatch with more than colour: a thicker outline, an offset ring or a tick.
• Make the outline or ring visible against the page. WCAG 1.4.11 asks for a contrast of at least 3:1 for the visual parts of controls and their states.⁶
• Print the selected value as text near the picker, as Dawn does in the legend.²

Light swatches such as white, cream or pale grey need extra care, because a white swatch on a white page has no visible edge. A thin border at 3:1 contrast fixes it.⁶

Sold-out and unavailable combinations

When one combination is sold out, many themes fade the swatch or draw a line through it. Those are visual cues only. Dawn also adds visually hidden text that says the value is sold out or unavailable, so a screen reader user hears it.³ Do the same: put the words in the label, not just in the styling.⁵

Think about whether to disable sold-out options entirely. A disabled radio cannot be focused, so a keyboard or screen reader user may not learn the option exists at all. Dawn marks unavailable values with a class and the hidden text rather than removing them.³ Keeping them reachable and clearly labelled lets shoppers find out what is out of stock, and opens the door to a back-in-stock sign-up.

Price, stock and image changes must be announced

Picking a variant usually changes the price, the stock message and the main image. A sighted shopper sees that happen; a screen reader user does not, unless you tell them. Shopify's accessibility guidance for themes is explicit: if a theme changes price and availability when a variant is selected, the change must be communicated to screen readers, with aria-live.¹ WCAG 4.1.3 covers the same ground: status messages must be announced without moving focus.¹⁰

• Use one polite live region near the price, and update its text after the change, for example "Navy, size 10: $48, in stock".
• Announce once per change. Live regions that repeat the whole product block are noisy.
• Do not move keyboard focus to the price or image; leave it on the option the shopper just chose.

Do not jump to another page when an option is chosen

WCAG 3.2.2 says changing the setting of a control must not cause a change of context, such as loading a new page, unless the user has been told beforehand.⁸ Most Shopify themes update the page in place, which is fine. Watch for set-ups where each colour is a separate product and choosing a swatch loads that product's page. If you do that, make the swatches links (which people expect to navigate) rather than radio buttons, or say near the picker that choosing a colour opens its page.

Make options big enough to tap

WCAG 2.2 added success criterion 2.5.8, Target Size (Minimum), at level AA: pointer targets should be at least 24 by 24 CSS pixels, unless an exception applies, such as enough space around a smaller target.⁷ Shopify's own accessibility guidance for themes goes further and asks for at least 44 by 44 pixels for primary touch targets, listing product page variants and options, such as colour, size and quantity, among them.¹ Small swatches in a tight grid are the usual failure.

A ten-minute test for your own picker

1. Open a product with two or more options. Press Tab until focus reaches the picker. Is the focus clearly visible?
2. Use the arrow keys to move between values in one option. Does the selection follow, and does the price or stock message update?
3. Turn on a screen reader (VoiceOver on a Mac or iPhone, NVDA on Windows). When you reach the picker, do you hear the option name, the value and whether it is selected?
4. Move to a sold-out value. Do you hear that it is sold out?
5. Change the variant. Is the new price announced?
6. Look at the picker in greyscale (most operating systems have a colour filter setting). Can you still tell which swatch is selected?
7. On a phone, try tapping each swatch with your thumb without hitting its neighbour.

For a wider keyboard pass, see how to test your website with only a keyboard; for brand colours that fail contrast, see colour contrast explained; and for theme settings and apps, see how to make a Shopify theme accessible. If you need to change theme code, fix accessibility issues without breaking your theme covers working on a copy.

Checking the rest of the store

An automated check finds some of these problems, such as controls with no accessible name or low contrast, but not all; whether a name makes sense, or whether an announcement is helpful, needs a person (see why automated testing finds some problems but not all). Jralo for Shopify, our app, runs a WCAG 2.2 A and AA check of your homepage and up to five linked pages from inside your Shopify admin, and keeps a dated record of every check.¹² You can install Jralo from the Shopify App Store; it is free to install. Disclosure: Jralo is our own product, made by Misimi Corp.