How to fix aria allowed attr on Shopify

Steps for Shopify

1. In your Shopify Admin go to Online Store → Themes → click the '…' menu next to your active theme → Edit code.
2. Use the search box (top-left of the code editor) to search for the offending `aria-` attribute string (e.g. `aria-checked`) across all Liquid and snippet files.
3. Open the relevant file (commonly a section file under Sections/, a snippet under Snippets/, or `theme.liquid` under Layout/).
4. Locate the HTML element, inspect its `role` and all `aria-*` attributes, remove or replace the disallowed attribute as described in the generic steps, then save.
5. If the ARIA mismatch originates inside a third-party app widget (e.g. a review carousel or product filter), contact the app developer — you cannot directly edit app-injected markup.
6. Republish/preview the theme and re-test with axe DevTools or Lighthouse to confirm the error is gone.

<!-- 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.