Variant Selector

A variant selector lets users choose product options — such as size and color — using a radio-group pattern with roving tabindex, providing a single tab stop, arrow-key navigation, and clear programmatic indication of selected, unselected, and unavailable states.

Demo

Tab into the size and color option groups below. Use the arrow keys to move between options within each group and press Space to select an option. Notice how the selected state and unavailable states are communicated as you navigate. Try toggling between groups with Tab to verify each group has a single tab stop.

Size

S M L XL Out of stock

Color

Black Blue Red Out of stock

What to Observe

Each variant group (e.g., "Size", "Color") has a single Tab stop — arrow keys navigate between options inside the group, reducing the Tab burden on keyboard users.
The group label ("Size", "Color") is programmatically associated with its options so screen reader users know which attribute they are configuring when they Tab into the group.
The currently selected option is identified both visually and programmatically — a screen reader announces it as selected when the user navigates to it.
Unavailable variants (e.g., a size that is out of stock) are marked as unavailable or disabled, not just grayed out visually, so keyboard users cannot accidentally select them.
Selecting a variant does not cause unexpected page navigation or disrupt the user's focus position.

Anatomy

[Anatomy image placeholder — will be added when assets are available]

Variant group: A labeled container (e.g., "Size" or "Color") that wraps a set of mutually exclusive options; uses a radio group or equivalent pattern.
Group label: A visible heading or label that names the attribute being selected; programmatically associated with the group's option set.
Option button / radio: An individual selectable control representing a single variant value (e.g., "Medium" or "Blue"); keyboard-navigable via arrow keys.
Selected state indicator: The visual and programmatic marker on the currently chosen option; announced by screen readers when the option receives focus.
Unavailable state indicator: A visual and programmatic disabled or unavailable marker applied to options that cannot be selected due to stock or configuration constraints.

Accessibility Behavior

Each variant group implements roving tabindex so only one option in the group receives focus via Tab; arrow keys move focus within the group.
The group label is programmatically associated with its options so screen readers announce the group name alongside the option value when the user navigates into the group.
The selected option is marked with a programmatic selected or checked state so assistive technologies always reflect the current selection accurately.
Unavailable options are disabled using the disabled attribute or equivalent, preventing them from being selected by keyboard and announcing their unavailability to screen readers.
Selecting a new option does not trigger an automatic page reload or change of context — users remain in control of when they proceed to the next step.
Color swatches include text labels or accessible names that identify the color by name (e.g., "Forest Green") rather than relying on hue alone.

Common Mistakes

Making every option a separate Tab stop, forcing keyboard users to Tab through all sizes and colors before reaching the add-to-cart button.
Omitting the group label so screen readers announce individual option values like "Medium" and "Large" without any indication that these are size choices.
Showing unavailable variants as visually grayed-out buttons without disabling them programmatically, so keyboard users can focus and activate them unexpectedly.
Using color swatches with no text labels or accessible names, making color variants completely inaccessible to blind users and users with color-vision differences.
Applying a CSS-only selected state (e.g., a border highlight) without a programmatic selected attribute, so the selection is invisible to screen readers.

Why This Matters

Choosing a size or color is a mandatory step before adding most products to the cart. If a keyboard user must Tab through every size and color option individually, the interaction becomes exhausting on pages with many variants. If a screen reader user cannot tell which size is currently selected, or whether a color is unavailable, they may add the wrong variant to their cart and only discover the error at checkout. Accessible variant selectors ensure that all users can configure a product to meet their needs efficiently and with confidence before committing to a purchase.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.