How to fix aria prohibited attr on Webflow

Remove or replace ARIA attributes that are explicitly prohibited on an element's assigned role, ensuring every ARIA attribute used is valid for its context.

Steps for Webflow

  1. Open your project in the Webflow Designer. Select the element flagged by your scanner.
  2. In the right-hand panel, open the Element Settings tab (the gear icon). Scroll to 'Custom Attributes' — this is where manually added ARIA attributes live.
  3. Locate the prohibited ARIA attribute in the custom attributes list and either delete it or replace the element's role with one that allows the attribute.
  4. If the element's role itself needs to change, update the `role` custom attribute value to a role that is compatible with the ARIA attribute you want to keep.
  5. For elements rendered by Webflow CMS collections, open the Collection Template page in the Designer and apply the same fix to the bound element.
  6. Publish the site and verify with the axe DevTools browser extension.
Official Webflow documentation ↗
<!-- ❌ 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.

Not sure if your Webflow store has this?

Run a free SEOLZ audit — we’ll find aria prohibited attr and every other issue across your whole site.

Scan my site free

Fix aria prohibited attr on another platform