Replace the default WooCommerce variation dropdowns with color, image, and text swatches that are accessible out of the box — fully keyboard-navigable, screen-reader friendly, and compliant with WCAG 2.2 AA.
Most swatch plugins render <div> elements patched with JavaScript, which are inaccessible by design. This one is built on semantic HTML — a <fieldset> of native <input type="radio"> controls — so it works without custom ARIA, is operable from the keyboard, and is announced correctly by assistive technology.
Positioning: EAA-ready in the EU, ADA-ready in the USA — the same WCAG 2.2 AA standard, one plugin, a different marketing frame per market.
| Typical swatch plugins | Accent-On Accessible Swatches | |
|---|---|---|
| Markup | <div> + JavaScript |
Semantic <fieldset> + <input type="radio"> |
| Keyboard | Broken or partial | Native (Tab + arrow keys) |
| Screen readers | Silent / mislabeled | Name, selected state & stock announced |
| Reset "Clear" | <a href="#"> (announced "link") |
Real <button> (Enter and Space) |
| Out-of-stock | Often hidden | Kept reachable and announced |
| Formal audit | Fails | Passes WCAG 2.2 AA |
- Color, image, and text (label) swatch types
- Square, rounded, and circle shapes; small / medium / large sizes
- Full keyboard navigation and an always-visible focus indicator (WCAG 2.4.11)
- Screen-reader support — variant name, selected state, and out-of-stock status announced without custom ARIA
- Live availability — options that become unavailable as attributes are picked are disabled and announced through an
aria-liveregion - Accessible tooltips — reveal the variant name on hover and keyboard focus, dismissible with Escape (WCAG 1.4.13)
- Accessible reset control — a real button, not a link (WCAG 4.1.2)
- Visible border on any color so options stay distinguishable on light and dark themes (WCAG 1.4.11)
- Windows High Contrast / forced-colors support — swatch colors are preserved
- Copy the plugin folder to
wp-content/plugins/and activate it (requires WooCommerce). - Set a color or image per option under Products → Attributes → Configure terms. Options with no color or image render as accessible text swatches.
- Adjust the global shape and size under WooCommerce → Settings → Accessible Swatches.
Swatches then replace the dropdowns automatically on every variable product page.
Accessibility is the whole point, not an add-on. Each swatch is a native radio input inside a labelled group, so:
- Tab reaches the group; arrow keys move between options and update price/image.
- Selected and out-of-stock states are exposed to assistive tech without custom ARIA.
- The focus indicator is provided by the plugin and stays visible regardless of the active theme.
The plugin has been validated against WCAG 2.2 AA with automated tooling (axe-core, state-contrast, target-size, reflow) and manual keyboard + screen-reader testing.
Issues and pull requests are welcome. Please keep accessibility as the first-class constraint: changes should preserve semantic markup, keyboard operability, and screen-reader output.
GPL-2.0-or-later. © Antonio Trifirò.