[WordPress] 外掛分享： Accent-On Accessible Swatches for WooCommerce

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

延伸相關外掛