{"id":355997,"date":"2026-08-24T13:50:18","date_gmt":"2026-08-24T13:50:18","guid":{"rendered":"https:\/\/it.wordpress.org\/plugins\/inclusive-variation-swatches-for-woocommerce\/"},"modified":"2026-08-24T13:50:06","modified_gmt":"2026-08-24T13:50:06","slug":"accent-on-accessible-swatches-for-woocommerce","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/accent-on-accessible-swatches-for-woocommerce\/","author":11703891,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.0","stable_tag":"1.0.0","tested":"7.1","requires":"6.7","requires_php":"7.4","requires_plugins":null,"header_name":"Accent-On Accessible Swatches for WooCommerce","header_author":"Antonio Trifiro","header_description":"Accessible WooCommerce variation swatches. WCAG 2.2 AA compliant \u2014 keyboard navigation, screen reader support, EAA\/ADA ready.","assets_banners_color":"675b61","last_updated":"2026-08-24 13:50:06","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/wordpress.org\/plugins\/accent-on-accessible-swatches-for-woocommerce\/","header_author_uri":"","rating":0,"author_block_rating":0,"active_installs":0,"downloads":48,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"Conlaccento","date":"2026-08-24 13:50:06"}},"upgrade_notice":{"1.0.0":"<p>Initial release.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3663561,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3663561,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3663561,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3663561,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3663561,"resolution":"1","location":"assets","locale":"","width":1112,"height":506},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3663561,"resolution":"2","location":"assets","locale":"","width":368,"height":82},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3663561,"resolution":"3","location":"assets","locale":"","width":2120,"height":318},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3663561,"resolution":"4","location":"assets","locale":"","width":1556,"height":978}},"screenshots":{"1":"Color swatches on a variable product page.","2":"Keyboard navigation \u2014 focus indicator visible on a swatch.","3":"Global shape and size settings under WooCommerce \u2192 Settings.","4":"Setting a swatch color on a product attribute term."}},"plugin_section":[],"plugin_tags":[1953,18781,6602,1956,286],"plugin_category":[34,45],"plugin_contributors":[277242],"plugin_business_model":[],"class_list":["post-355997","plugin","type-plugin","status-publish","hentry","plugin_tags-accessibility","plugin_tags-swatches","plugin_tags-variations","plugin_tags-wcag","plugin_tags-woocommerce","plugin_category-accessibility","plugin_category-ecommerce","plugin_contributors-conlaccento","plugin_committers-conlaccento"],"banners":{"banner":"https:\/\/ps.w.org\/accent-on-accessible-swatches-for-woocommerce\/assets\/banner-772x250.png?rev=3663561","banner_2x":"https:\/\/ps.w.org\/accent-on-accessible-swatches-for-woocommerce\/assets\/banner-1544x500.png?rev=3663561","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/accent-on-accessible-swatches-for-woocommerce\/assets\/icon-128x128.png?rev=3663561","icon_2x":"https:\/\/ps.w.org\/accent-on-accessible-swatches-for-woocommerce\/assets\/icon-256x256.png?rev=3663561","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/accent-on-accessible-swatches-for-woocommerce\/assets\/screenshot-1.png?rev=3663561","caption":"Color swatches on a variable product page."},{"src":"https:\/\/ps.w.org\/accent-on-accessible-swatches-for-woocommerce\/assets\/screenshot-2.png?rev=3663561","caption":"Keyboard navigation \u2014 focus indicator visible on a swatch."},{"src":"https:\/\/ps.w.org\/accent-on-accessible-swatches-for-woocommerce\/assets\/screenshot-3.png?rev=3663561","caption":"Global shape and size settings under WooCommerce \u2192 Settings."},{"src":"https:\/\/ps.w.org\/accent-on-accessible-swatches-for-woocommerce\/assets\/screenshot-4.png?rev=3663561","caption":"Setting a swatch color on a product attribute term."}],"raw_content":"<!--section=description-->\n<p><strong>Accent-On Accessible Swatches for WooCommerce<\/strong> replaces the default WooCommerce variation dropdowns with color, image, and text swatches that are accessible out of the box.<\/p>\n\n<p>Unlike other swatch plugins, it is built on semantic HTML (<code>&lt;fieldset&gt;<\/code> + <code>&lt;input type=\"radio\"&gt;<\/code>) instead of <code>&lt;div&gt;<\/code> elements patched with JavaScript. The swatches work without custom ARIA, are operable from the keyboard, and are announced correctly by screen readers. The result:<\/p>\n\n<ul>\n<li><strong>WCAG 2.2 AA compliant<\/strong> \u2014 passes a formal accessibility audit<\/li>\n<li><strong>EAA-ready (EU)<\/strong> and <strong>ADA-ready (USA)<\/strong> \u2014 same standard, same plugin, different marketing frame<\/li>\n<li>Works with your existing products, prices, and variations \u2014 frontend UI only<\/li>\n<\/ul>\n\n<h4>Features<\/h4>\n\n<ul>\n<li>Color, image, and text (label) swatch types<\/li>\n<li>Square, rounded, and circle shapes; small, medium, and large sizes<\/li>\n<li><strong>Full keyboard navigation<\/strong> \u2014 Tab to the group, arrow keys to choose an option<\/li>\n<li><strong>Screen reader support<\/strong> \u2014 variant name, selected state, and out-of-stock status announced without custom ARIA<\/li>\n<li><strong>Always-visible focus indicator<\/strong> (WCAG 2.2 SC 2.4.11), independent of the theme<\/li>\n<li><strong>Accessible tooltips<\/strong> \u2014 reveal the variant name on hover <em>and<\/em> keyboard focus, dismissible with Escape (WCAG 1.4.13)<\/li>\n<li><strong>Out-of-stock handling<\/strong> \u2014 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<\/li>\n<li><strong>Dynamic availability<\/strong> \u2014 as shoppers pick attributes, options that become unavailable are disabled and announced through a live region, with no page reload<\/li>\n<li><strong>Accessible reset control<\/strong> \u2014 a real button (announced as a button, not a link), operable with Enter and Space<\/li>\n<li><strong>Visible swatch border on any color<\/strong> \u2014 keeps options distinguishable on light and dark themes (WCAG 1.4.11)<\/li>\n<li><strong>Windows High Contrast \/ forced-colors support<\/strong> \u2014 swatch colors are preserved so options stay distinguishable<\/li>\n<\/ul>\n\n<!--section=installation-->\n<ol>\n<li>Upload the <code>accent-on-accessible-swatches-for-woocommerce<\/code> folder to <code>\/wp-content\/plugins\/<\/code>, or install it from the Plugins screen.<\/li>\n<li>Activate the plugin from the <strong>Plugins<\/strong> menu in WordPress.<\/li>\n<li>Set a color or image per option under <strong>Products \u2192 Attributes<\/strong>, then <strong>Configure terms<\/strong> for the attribute (e.g. a color per \"Color\" term). Options with no color or image render as accessible text swatches.<\/li>\n<li>Adjust the global shape and size under <strong>WooCommerce \u2192 Settings \u2192 Accessible Swatches<\/strong>.<\/li>\n<li>That's it \u2014 swatches replace the dropdowns automatically on all variable product pages.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20this%20work%20with%20my%20theme%3F\"><h3>Does this work with my theme?<\/h3><\/dt>\n<dd><p>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).<\/p><\/dd>\n<dt id=\"will%20it%20break%20my%20existing%20products%3F\"><h3>Will it break my existing products?<\/h3><\/dt>\n<dd><p>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.<\/p><\/dd>\n<dt id=\"is%20it%20compatible%20with%20woocommerce%20hpos%3F\"><h3>Is it compatible with WooCommerce HPOS?<\/h3><\/dt>\n<dd><p>Yes, the plugin is compatible with WooCommerce High-Performance Order Storage.<\/p><\/dd>\n<dt id=\"what%20does%20%22wcag%202.2%20aa%20compliant%22%20mean%20for%20my%20store%3F\"><h3>What does \"WCAG 2.2 AA compliant\" mean for my store?<\/h3><\/dt>\n<dd><p>It means your variation swatches meet the Web Content Accessibility Guidelines 2.2 at Level AA \u2014 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 \u2014 one commonly-failing component \u2014 compliant.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<\/ul>","raw_excerpt":"Replace WooCommerce variation dropdowns with accessible swatches \u2014 fully keyboard-navigable, screen reader friendly, WCAG 2.2 AA.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/355997","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=355997"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/conlaccento"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=355997"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=355997"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=355997"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=355997"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=355997"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=355997"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}