How to fix aria allowed attr on Shopify

Steps for Shopify

1. Go to Online Store → Themes → click 'Customize' on your active theme.
2. For most ARIA issues, the source is in theme Liquid files. Click 'Edit code' (three-dot menu next to your active theme) to open the code editor.
3. Use the search box (Ctrl+F / Cmd+F in the editor) to find aria- attributes across files — common culprits are sections/header.liquid, snippets/navigation.liquid, snippets/product-card.liquid, and assets/*.js.
4. Locate the flagged element and correct the aria-* attribute (remove it, replace it, or change the role) as determined in your audit.
5. If the violation is inside a third-party app's widget (e.g. a review app or chat widget), contact that app's support team with the specific element and attribute flagged.
6. Save and preview the theme, then re-run axe DevTools in your browser to verify the fix.

What is aria allowed attr?

ARIA (Accessible Rich Internet Applications) is a set of special HTML attributes — like `aria-checked`, `aria-expanded`, `aria-required` — that tell screen readers and other assistive technologies what a page element is and how it behaves. Each HTML element has a "role" (either its native role, such as `button` or `checkbox`, or one you assign with `role="…"`), and only certain ARIA attributes are valid for each role. The `aria-allowed-attr` rule flags situations where an ARIA attribute is applied to an element whose role does not support it — for example, putting `aria-checked` on a plain `<div>` with no appropriate role, or adding `aria-expanded` to an element whose role never has an expandable state. These mismatches are recognised by automated accessibility scanners and flagged against WCAG 4.1.2 (Name, Role, Value).

Screen readers like JAWS, NVDA, and VoiceOver rely on ARIA attributes to announce the correct state and purpose of interactive controls to blind and low-vision shoppers. When an ARIA attribute is mismatched to its element's role, the screen reader either ignores it silently or announces confusing, incorrect information — causing those customers to misunderstand your navigation, forms, filters, and checkout controls. This directly reduces conversions among users with disabilities and exposes your store to legal risk under accessibility laws (ADA Title III in the US, EN 301 549 in the EU, and equivalent legislation elsewhere) that increasingly require WCAG 2.1 AA compliance. Search engines also use ARIA signals to better understand page structure, so clean, valid markup supports long-term SEO health as well.

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