=== Accent-On Accessible Swatches for WooCommerce ===
Contributors: conlaccento
Tags: swatches, woocommerce, variations, accessibility, wcag
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Stable tag: 1.0.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Replace WooCommerce variation dropdowns with accessible swatches — fully keyboard-navigable, screen reader friendly, WCAG 2.2 AA.

== 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

== 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.

== Frequently Asked Questions ==

= 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.

== Screenshots ==

1. Color swatches on a variable product page.
2. Keyboard navigation — focus indicator visible on a swatch.
3. Global shape and size settings under WooCommerce → Settings.
4. Setting a swatch color on a product attribute term.

== Changelog ==

= 1.0.0 =
* Initial release.

== Upgrade Notice ==

= 1.0.0 =
Initial release.