How to fix aria roles on Webflow

Steps for Webflow

1. Open your project in the Webflow Designer.
2. Select the element with the invalid role in the Navigator or on the canvas.
3. In the right-hand Settings panel (gear icon), scroll to the Custom Attributes section.
4. Find the `role` attribute entry, click it, and type the correct valid ARIA role value — or click the × to delete it if no valid role applies.
5. Publish the site and re-run axe DevTools or WAVE to confirm the fix.
6. For roles added inside Embed components (HTML Embed): click the Embed element on the canvas, open the embed editor, and correct the `role` attribute in the raw HTML.

What is aria roles?

The `role` attribute tells assistive technologies (screen readers, braille displays, voice control software) what kind of interface element something is — for example, a button, a navigation landmark, a dialog, or a list. The WAI-ARIA specification defines an exact list of allowed role names. If any element on your store carries a role that isn't on that list — whether it's a typo like `role="buton"`, an invented name like `role="product-card"`, or an outdated value like `role="presentation"` used incorrectly — the browser and screen reader simply ignore it or misinterpret the element entirely. WCAG Success Criterion 4.1.2 (Name, Role, Value) requires that every user interface component exposes a valid, programmatically determinable role so all users can understand and operate it.

Screen reader users — who include people with visual impairments, motor disabilities, and cognitive disabilities — rely on role information to navigate and interact with your store. An invalid role means those customers hear confusing or missing announcements, cannot identify interactive controls, and may abandon your checkout or product pages. Beyond lost conversions, accessibility failures carry real legal risk: WCAG 2.1 AA compliance is referenced in ADA Title III lawsuits and, in many jurisdictions, is a statutory requirement for online businesses. Google also uses accessibility signals as a quality factor, so pages riddled with invalid ARIA can indirectly suppress organic rankings. Fixing invalid roles is typically a quick code change with outsized impact on both compliance and customer experience.

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