Aria prohibited attr

What it is

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.

Why it matters

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.

How to fix it

1. Identify the offending element by reviewing your accessibility scan results — note the element's HTML tag, its `role` attribute (explicit or implicit), and the specific prohibited ARIA attribute flagged.
2. Look up which ARIA attributes are allowed for that role using the WAI-ARIA specification or the Deque/axe rule reference. For example, elements with `role='presentation'` or `role='none'` must not carry naming attributes like `aria-label` or `aria-labelledby`.
3. Decide on the correct fix: either (a) remove the prohibited attribute entirely if it serves no purpose, (b) replace the element's role with one that does permit the attribute, or (c) restructure the markup so the attribute is moved to a child or sibling element where it is allowed.
4. Make the change in your theme's HTML/template files or in the CMS component that renders the element. If the attribute is injected by a plugin, app, or third-party widget, update or replace that component.
5. Re-run your accessibility scanner (e.g., axe DevTools browser extension) on the affected page to confirm the `aria-prohibited-attr` violation is resolved and no new violations have been introduced.
6. Repeat for all other instances of this issue across your store — check product pages, cart, checkout, navigation menus, and modal dialogs, as these areas commonly contain ARIA mismatches.

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

Fix it on your platform

Pick your platform for the exact steps.

Frequently asked questions

Authoritative references

• How to fix this specific rule — Deque/axe (rule reference)
• WCAG 2 overview — W3C WAI
• ARIA basics — MDN