Accent-On Accessible Swatches for WooCommerce
| 开发者 | conlaccento |
|---|---|
| 更新时间 | 2026年8月24日 21:50 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPL-2.0-or-later |
| 版权网址: | 版权信息 |
详情介绍:
<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
- 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
安装:
- 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.
屏幕截图:
常见问题:
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.
更新日志:
- Initial release.