How to fix aria allowed attr on WooCommerce

Steps for WooCommerce

1. In your WordPress Admin go to Appearance → Theme File Editor (or use a code editor via FTP/SSH to the theme directory for safety).
2. Search your active theme's template files (`single-product.php`, `cart.php`, page templates, and any block patterns) and your child theme's `functions.php` for the offending `aria-` attribute.
3. Edit the relevant template or partial file, remove or correct the disallowed ARIA attribute, and save.
4. If the violation comes from a plugin (e.g. a slider, tabs, or filter plugin), check the plugin's settings for an option to disable or customise its markup; if none exists, report it to the plugin author or replace the plugin.
5. Use the axe DevTools browser extension or WP Accessibility Helper plugin to re-scan the page after saving.
6. Clear any caching plugin (e.g. WP Rocket, W3 Total Cache) and re-test on the live site.

<!-- WRONG: aria-checked is not allowed on role="heading" -->
<div role="heading" aria-level="2" aria-checked="true">Sale Items</div>

<!-- CORRECT: remove the disallowed attribute -->
<div role="heading" aria-level="2">Sale Items</div>

<!-- BETTER: use a native HTML element (implicit correct role + no mismatch risk) -->
<h2>Sale Items</h2>

<!-- WRONG: aria-expanded is not allowed on role="img" -->
<div role="img" aria-label="Product photo" aria-expanded="false"></div>

<!-- CORRECT: aria-expanded belongs on interactive roles like button/combobox -->
<button type="button" aria-expanded="false" aria-controls="filter-panel">
  Filter products
</button>

What is aria allowed attr?

ARIA (Accessible Rich Internet Applications) attributes are special HTML properties — like `aria-checked`, `aria-expanded`, or `aria-haspopup` — that tell screen readers and other assistive technologies what a page element is and how it behaves. Every ARIA role (e.g. `button`, `listbox`, `img`) has a defined set of attributes it is allowed to carry. When an element has an ARIA attribute that its role does not support — for example, placing `aria-checked` on a plain `<div role="heading">` — the browser and screen reader can't make sense of the conflicting signals. The `aria-allowed-attr` rule flags exactly these mismatches.

Screen reader users — who rely entirely on ARIA signals to understand and navigate your store — receive garbled or misleading information when roles and attributes conflict, making buttons, menus, forms, and product options unusable for them. In many countries (the US ADA, EU EAA, UK PSBAR, and others) online stores must meet WCAG 2.1 AA, and ARIA mismatches are a clear, documentable failure of Success Criterion 4.1.2 (Name, Role, Value) — creating real legal exposure. Beyond legal risk, inaccessible checkout flows and product pages directly reduce conversions from the roughly 15–20 % of shoppers who use assistive technology. Fixing these mismatches is also a trust signal: accessibility audits and Core Web Vitals tooling surface these errors, and a clean bill of health supports your brand reputation.

See the complete Aria allowed attr guide for every platform and the full background.