Accessibility | Rubik Combined Listings Swatch

Rubik Combined Listings Swatch is built with accessibility as a core consideration. Every swatch type — visual, button, and dropdown — includes features that help customers using screen readers, keyboards, and other assistive technologies navigate and select product options.

Semantic HTML structure

The component uses meaningful HTML elements rather than generic <div> containers:

Anchor links for swatches — each visual and button swatch is rendered as an <a href> element pointing to the linked product's URL. This means swatches are natively focusable, clickable, and navigable without any extra JavaScript.
Select element for dropdowns — the dropdown swatch type uses a native <select> element, which is fully supported by all screen readers and provides built-in keyboard interaction.
SVG elements marked as decorative — color swatches, out-of-stock line overlays, and placeholder graphics are SVG elements with aria-hidden="true", so screen readers skip them and focus on the meaningful text content instead.

ARIA labels

Every interactive element includes an aria-label attribute so screen readers can announce what each control does:

Element	ARIA attribute	Example value
Visual swatch	`aria-label`	"Blue" (option value, falling back to the product title)
Button swatch	`aria-label`	"Red" (option value, falling back to the product title)
Dropdown	`aria-label`	"Color" (the option name)
Overflow indicator (+n)	`aria-label`	"Show 5 more options" (number of hidden swatches)

Labels prefer the option value over the product title because linked products often share one title: without this, every swatch in a group would announce identically and screen reader users could not tell the options apart.

Active state indication

The currently selected swatch is announced to screen readers using aria-current="true". When a customer clicks a different swatch, the previous one loses the attribute and the new selection receives it. This lets assistive technology users know which option is currently active without relying on visual cues alone.

Group labeling

Swatch groups use ARIA group roles and label associations to provide context:

Each swatch grid or carousel is wrapped in a container with role="group"
The group label (e.g., "Color: Blue") has a unique id, and the group container references it via aria-labelledby
Screen readers announce the group name before listing the individual swatches, so users understand the context (e.g., "Color group, Blue link, Red link...")

Keyboard navigation

All swatch types are fully operable with a keyboard:

Visual and button swatches — since they are <a> elements, they are in the natural tab order. Customers can Tab through swatches and press Enter to navigate to the linked product.
Dropdown swatches — the native <select> element supports Arrow Up/Arrow Down to browse options and Enter to select.
Overflow indicator — the "+n" button has tabindex="0" and role="button", making it focusable and operable with both Enter and Space keys. It exposes its state via aria-expanded, and activating it moves focus to the first newly revealed swatch, so keyboard and screen reader users keep their place instead of being returned to the top of the page.
Carousel navigation — previous/next buttons in carousel mode are clickable controls for scrolling through swatches when the group contains many options.

Focus management

The component handles focus states carefully to balance visual clarity with usability:

Focus-visible support — focus outlines appear when navigating with a keyboard (:focus-visible) but are hidden for mouse clicks (:focus:not(:focus-visible)). This prevents distracting outlines during normal browsing while keeping them visible for keyboard users.
Consistent focus styles — focused swatches display a 2px solid outline with an offset, using the active border color for consistency with the selected state.
Fallback for older browsers — browsers that do not support :focus-visible still show focus outlines via the standard :focus pseudo-class.

Out-of-stock indication

Unavailable products are communicated through multiple channels, not just color or opacity:

Reduced opacity — unavailable swatches have reduced opacity (configurable via CSS variable), providing a visual distinction.
Diagonal line overlay — an SVG line is drawn across unavailable swatches as an additional visual indicator that does not rely on color alone. The SVG is marked aria-hidden="true" since it is decorative.
Stock-aware ordering — merchants can push out-of-stock swatches to the end of the list or hide them entirely, helping customers find available options first.

Beyond these visual cues, availability is also announced programmatically for visual and button swatches: the accessible name of an unavailable swatch appends "sold out" (for example "Mauve, sold out"), so screen reader users hear the same information the crossed-out styling conveys visually. Dropdown options list the option value only.

Touch device support

The component adapts its behavior for touch devices:

Hover tooltips disabled on touch — the app detects touch-only devices via (hover: none) media query and disables hover tooltips, which would otherwise be inaccessible on touchscreens.
Tap-friendly sizing — swatch dimensions are configurable via CSS variables, allowing merchants to ensure touch targets meet the recommended 44×44px minimum.

Color independence

The component does not rely on color alone to convey information:

Swatch labels display the option value as text (e.g., "Blue", "Red")
The selected state uses a border change in addition to any color change
Out-of-stock state uses both opacity reduction and a diagonal line overlay
Tooltips show the option name on hover for additional clarity. When image tooltips are enabled, the product's featured image is displayed with the option name as alt text.

Browser compatibility

The component includes fallbacks to ensure accessibility features work across a wide range of browsers:

Feature	Fallback
`:focus-visible`	Standard `:focus` outline on older browsers
`aspect-ratio`	Padding-bottom technique for Safari 14 and earlier
Flexbox `gap`	Negative margin technique for older iOS Safari
`backdrop-filter`	Solid background color on unsupported browsers

Summary of ARIA attributes used

Attribute	Where used	Purpose
`aria-label`	All swatches, dropdowns, overflow indicator	Announces the element's purpose to screen readers
`aria-current="true"`	Active/selected swatch	Indicates which option is currently selected
`aria-expanded`	Overflow indicator (+n)	Communicates whether the hidden swatches have been revealed
`aria-hidden="true"`	Color SVGs, out-of-stock lines, placeholders	Hides decorative elements from screen readers
`aria-labelledby`	Swatch grids and carousels	Associates the group with its visible label
`role="group"`	Swatch grids and carousels	Groups related swatches semantically
`role="button"`	Overflow indicator (+n)	Identifies a clickable non-link element as a button
`tabindex="0"`	Overflow indicator (+n)	Makes the element focusable via keyboard

Summary

Rubik Combined Listings Swatch provides accessible product navigation out of the box. Screen reader users hear descriptive labels and group context. Keyboard users can tab through and activate swatches. Touch users get appropriately adapted interactions. And all users benefit from multiple visual cues for selected and out-of-stock states that do not rely on color alone, with sold-out status also announced directly to screen readers.

Related guides

Overview: full feature list and pricing
SEO benefits: independent URLs, meta tags, and AI discoverability
Custom CSS: customize focus styles and swatch appearance with 70+ CSS variables

Accessibility Rubik Combined Listings Swatch