Accent-On Accessible Swatches for WooCommerce

Accent-On Accessible Swatches for WooCommerce replaces the default WooCommerce variation dropdowns with color, image, and text swatches that are accessible out of the box.

Unlike other swatch plugins, it is built on semantic HTML (<fieldset> + <input type="radio">) instead of <div> elements patched with JavaScript. The swatches work without custom ARIA, are operable from the keyboard, and are announced correctly by screen readers. The result:

• WCAG 2.2 AA compliant — passes a formal accessibility audit
• EAA-ready (EU) and ADA-ready (USA) — same standard, same plugin, different marketing frame
• Works with your existing products, prices, and variations — frontend UI only

Features

• Color, image, and text (label) swatch types
• Square, rounded, and circle shapes; small, medium, and large sizes
• Full keyboard navigation — Tab to the group, arrow keys to choose an option
• Screen reader support — variant name, selected state, and out-of-stock status announced without custom ARIA
• Always-visible focus indicator (WCAG 2.2 SC 2.4.11), independent of the theme
• Accessible tooltips — reveal the variant name on hover and keyboard focus, dismissible with Escape (WCAG 1.4.13)
• Out-of-stock handling — unavailable options stay visible and keyboard-reachable, are marked with a cross-out, and are announced as out of stock; they are never silently removed
• Dynamic availability — as shoppers pick attributes, options that become unavailable are disabled and announced through a live region, with no page reload
• Accessible reset control — a real button (announced as a button, not a link), operable with Enter and Space
• Visible swatch border on any color — keeps options distinguishable on light and dark themes (WCAG 1.4.11)
• Windows High Contrast / forced-colors support — swatch colors are preserved so options stay distinguishable