` + `` 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
[⌊Color swatches on a variable product page.⌉⌊Color swatches on a variable product
page.⌉[
Color swatches on a variable product page.
[⌊Keyboard navigation — focus indicator visible on a swatch.⌉⌊Keyboard navigation—
focus indicator visible on a swatch.⌉[
Keyboard navigation — focus indicator visible on a swatch.
[⌊Global shape and size settings under WooCommerce → Settings.⌉⌊Global shape and
size settings under WooCommerce → Settings.⌉[
Global shape and size settings under WooCommerce Settings.
[⌊Setting a swatch color on a product attribute term.⌉⌊Setting a swatch color on
a product attribute term.⌉[
Setting a swatch color on a product attribute term.
## Installation
1. Upload the `accent-on-accessible-swatches-for-woocommerce` folder to `/wp-content/
plugins/`, or install it from the Plugins screen.
2. Activate the plugin from the **Plugins** menu in WordPress.
3. 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.
4. Adjust the global shape and size under **WooCommerce Settings Accessible Swatches**.
5. 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
* [ Antonio Trifirò ](https://profiles.wordpress.org/conlaccento/)
[Translate “Accent-On Accessible Swatches for WooCommerce” into your language.](https://translate.wordpress.org/projects/wp-plugins/accent-on-accessible-swatches-for-woocommerce)
### Interested in development?
[Browse the code](https://plugins.trac.wordpress.org/browser/accent-on-accessible-swatches-for-woocommerce/),
check out the [SVN repository](https://plugins.svn.wordpress.org/accent-on-accessible-swatches-for-woocommerce/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/accent-on-accessible-swatches-for-woocommerce/)
by [RSS](https://plugins.trac.wordpress.org/log/accent-on-accessible-swatches-for-woocommerce/?limit=100&mode=stop_on_copy&format=rss).
## Changelog
#### 1.0.0
* Initial release.
## Meta
* Version **1.0.0**
* Last updated **3 days ago**
* Active installations **Fewer than 10**
* WordPress version ** 6.7 or higher **
* Tested up to **7.1**
* PHP version ** 7.4 or higher **
* Tags
* [accessibility](https://wordpress.org/plugins/tags/accessibility/)[swatches](https://wordpress.org/plugins/tags/swatches/)
[variations](https://wordpress.org/plugins/tags/variations/)[wcag](https://wordpress.org/plugins/tags/wcag/)
[woocommerce](https://wordpress.org/plugins/tags/woocommerce/)
* [Advanced View](https://wordpress.org/plugins/accent-on-accessible-swatches-for-woocommerce/advanced/)
## Ratings
No reviews have been submitted yet.
[Your review](https://wordpress.org/support/plugin/accent-on-accessible-swatches-for-woocommerce/reviews/#new-post)
[See all reviews](https://wordpress.org/support/plugin/accent-on-accessible-swatches-for-woocommerce/reviews/)
## Contributors
* [ Antonio Trifirò ](https://profiles.wordpress.org/conlaccento/)
## Support
Got something to say? Need help?
[View support forum](https://wordpress.org/support/plugin/accent-on-accessible-swatches-for-woocommerce/)