How to fix aria prohibited attr on Shopify

Steps for Shopify

1. Go to Online Store → Themes → click the three-dot menu next to your active theme → Edit code.
2. Use the search box (top of the file list) to search for the prohibited attribute name (e.g., `aria-label`, `aria-checked`) across all Liquid template files (.liquid).
3. Open the offending file (common culprits: `sections/header.liquid`, `snippets/product-card.liquid`, `snippets/cart-drawer.liquid`, `layout/theme.liquid`).
4. Locate the HTML element flagged by your scanner, then remove or replace the prohibited ARIA attribute following the generic steps above.
5. If the attribute comes from a Shopify App (e.g., a reviews widget or chat bubble), contact the app developer or switch to an accessible alternative app.
6. Click Save, then re-test with the axe DevTools browser extension on your live storefront.

<!-- ❌ WRONG: aria-label is prohibited on role="presentation" -->
<div role="presentation" aria-label="Product image">
  <img src="product.jpg" alt="Blue running shoes">
</div>

<!-- ✅ CORRECT: Remove the prohibited attribute; let the img's alt text do the work -->
<div role="presentation">
  <img src="product.jpg" alt="Blue running shoes">
</div>

<!-- ❌ WRONG: aria-checked is prohibited on role="link" -->
<a href="/wishlist" role="link" aria-checked="true">Add to Wishlist</a>

<!-- ✅ CORRECT: Use aria-pressed (allowed on buttons) or restructure -->
<button aria-pressed="true">Add to Wishlist</button>

What is aria prohibited attr?

ARIA (Accessible Rich Internet Applications) is a set of special HTML attributes — like `aria-label`, `aria-hidden`, or `aria-required` — that help screen readers and assistive technologies understand what elements on your page do. However, not every ARIA attribute is allowed on every type of element. The WAI-ARIA specification defines a strict list of which attributes are permitted ("allowed") and which are forbidden ("prohibited") for each element role. For example, adding `aria-label` to a plain `<div role="presentation">` or using `aria-checked` on a link breaks the rules because those combinations are explicitly prohibited. The `aria-prohibited-attr` rule flags exactly these mismatches.

When prohibited ARIA attributes are present, screen readers — used by millions of shoppers with visual or motor impairments — may behave unpredictably: ignoring the element entirely, announcing it incorrectly, or causing navigation to break. This directly harms the shopping experience for customers who rely on assistive technology, reducing conversions and potentially exposing your store to accessibility-related legal complaints (including ADA and WCAG 2.1 AA lawsuits, which are increasingly common in ecommerce). Search engines also parse ARIA to understand page structure, so garbled semantics can subtly weaken your technical SEO. Fixing these violations brings your store into WCAG 2.1 / 2.2 Success Criterion 4.1.2 compliance and signals a quality, well-coded site.

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