How to fix aria prohibited attr on Adobe Commerce (Magento)

Steps for Adobe Commerce (Magento)

1. SSH into your server (or use your IDE) and locate the relevant PHTML or HTML template file in your custom theme under `app/design/frontend/<Vendor>/<Theme>/`.
2. Search the theme directory for the prohibited attribute string: `grep -r 'aria-label\|aria-checked' app/design/frontend/<Vendor>/<Theme>/` (adjust the attribute name as needed).
3. Open the relevant `.phtml` or `.html` (Knockout/Magento UI component) template and remove or correct the prohibited ARIA attribute.
4. If the attribute comes from a third-party module, override its template in your custom theme rather than editing the module directly.
5. Run `bin/magento cache:flush` and `bin/magento setup:static-content:deploy` to push the changes to the frontend.
6. Verify the fix with the axe DevTools browser extension on the affected page.

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