Description
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
Screenshots
Installation
- Upload the
accent-on-accessible-swatches-for-woocommercefolder to/wp-content/plugins/, or install it from the Plugins screen. - Activate the plugin from the Plugins menu in WordPress.
- Set a color or image per option under Products Attributes, then Configure terms for the attribute (e.g. a color per “Color” term). Options with no color or image render as accessible text swatches.
- Adjust the global shape and size under WooCommerce Settings Accessible Swatches.
- That’s it — swatches replace the dropdowns automatically on all variable product pages.
FAQ
-
Does this work with my theme?
-
Yes. The plugin hooks into WooCommerce’s standard variation system and does not modify theme templates. It has been tested with Storefront, Astra, Kadence, Blocksy, and the default block themes (e.g. Twenty Twenty-Five).
-
Will it break my existing products?
-
No. The plugin replaces the dropdown UI on the frontend only. All product data, variations, and prices remain unchanged. Deactivating the plugin restores the default dropdowns.
-
Is it compatible with WooCommerce HPOS?
-
Yes, the plugin is compatible with WooCommerce High-Performance Order Storage.
-
What does “WCAG 2.2 AA compliant” mean for my store?
-
It means your variation swatches meet the Web Content Accessibility Guidelines 2.2 at Level AA — the standard required by the European Accessibility Act (EAA) for EU e-commerce and referenced by ADA Title III case law in the USA. Note that a fully accessible store requires more than accessible swatches; this plugin makes the variation selector — one commonly-failing component — compliant.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Accent-On Accessible Swatches for WooCommerce” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Accent-On Accessible Swatches for WooCommerce” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.0
- Initial release.