How to fix aria allowed role on Webflow

Steps for Webflow

1. Open your project in the Webflow Designer and select the flagged element in the Navigator panel.
2. In the right-hand Settings panel (gear icon), scroll to the Custom Attributes section.
3. Look for a `role` attribute entry — if it contains a disallowed value (e.g., `presentation` on a Link Block or Button element), delete that attribute row entirely or change the value to a permitted role.
4. If no custom attribute is present, check the element's HTML tag: switching from a semantic element (e.g., Button) to a Div may resolve the conflict; alternatively, simply remove the role attribute.
5. Publish the project and verify with axe DevTools or Lighthouse.

<!-- WRONG: role="presentation" strips button semantics, making it inaccessible -->
<button role="presentation">Add to Cart</button>

<!-- CORRECT: Remove the invalid role — the button keeps its native semantics -->
<button>Add to Cart</button>

<!-- WRONG: role="presentation" on an anchor removes link semantics -->
<a href="/products/shirt" role="presentation">View Shirt</a>

<!-- CORRECT: Remove the role; or if truly decorative, use a <span> instead -->
<a href="/products/shirt">View Shirt</a>

<!-- ACCEPTABLE: role="presentation" on a layout <table> (non-data table) -->
<table role="presentation">...</table>

What is aria allowed role?

Every HTML element has a built-in meaning (its "semantics") — a button is a button, a heading is a heading, a link is a link. ARIA roles let developers override or supplement that meaning for screen readers. However, not every role can be applied to every element: the ARIA specification defines which roles are allowed on which elements. When you add a role that is forbidden for a given element — for example, placing `role="presentation"` on a `<button>` or `<a>` tag — you create a conflict that confuses assistive technologies. The `aria-allowed-role` rule flags exactly these mismatches.

Screen readers used by blind and low-vision shoppers rely on ARIA roles to announce what each element is and how to interact with it. An invalid role can cause a button to be announced as something meaningless, make a link unfocusable, or cause interactive controls to disappear entirely from the accessibility tree — effectively making parts of your store unusable for those customers. Beyond losing sales, inaccessible stores face growing legal risk under the ADA (US), AODA (Canada), EAA (EU), and similar laws — accessibility lawsuits against ecommerce sites have surged. Fixing ARIA role mismatches is also a signal of overall technical quality that modern crawlers and ranking algorithms increasingly reward.

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