How to fix aria valid attr on Webflow

Find every misspelled or non-existent ARIA attribute name in your HTML (e.g. `aria-labeledby` instead of `aria-labelledby`) and correct each one to a valid ARIA attribute name.

Steps for Webflow

  1. Open your project in the Webflow Designer. Select the element with the invalid ARIA attribute.
  2. In the right-hand panel, go to Element Settings (the gear icon) → Custom Attributes section.
  3. Find the misspelled attribute (e.g. `aria-labeledby`) in the custom attributes list. Click it to edit the Name field and correct the spelling to `aria-labelledby` (or the correct name). Do NOT change the Value.
  4. For elements where the ARIA attribute is set by a Webflow interaction or CMS binding, check the Interactions panel and any CMS collection field mappings.
  5. Publish your site and re-run axe DevTools to confirm.
Official Webflow documentation ↗
<!-- ❌ WRONG — misspelled attribute; screen readers ignore it entirely -->
<input type="text" id="email" aria-labeledby="email-label">

<!-- ✅ CORRECT — double 'l' in labelledby -->
<input type="text" id="email" aria-labelledby="email-label">

<!-- Other common misspellings to watch for: -->
<!-- aria-descrribedby  →  aria-describedby  -->
<!-- aria-reqired       →  aria-required      -->
<!-- aria-expaned       →  aria-expanded      -->
<!-- aria-valuenow      →  aria-valuenow  (this one IS correct) -->

What is aria valid attr?

ARIA (Accessible Rich Internet Applications) attributes are special HTML attributes like `aria-label`, `aria-labelledby`, and `aria-describedby` that tell screen readers and other assistive technologies what your page elements are and how they work. Every valid ARIA attribute has a precisely defined name — even a single missing or transposed letter (such as writing `aria-labeledby` instead of `aria-labelledby`) makes the attribute completely meaningless to assistive technology. Browsers silently ignore unrecognised ARIA attributes, so the intended accessibility information is simply never conveyed. This rule (WCAG 4.1.2, "Name, Role, Value") requires that all interface components have properly programmatically determinable names and roles.

Screen-reader users — people who are blind, have low vision, or have motor disabilities — rely on ARIA attributes to understand and interact with buttons, forms, dialogs, and navigation. When an ARIA attribute name is misspelled, the assistive technology receives no information at all, as if the attribute were never there. This can make critical controls completely unusable for those users, creating a real accessibility barrier and potential legal liability under laws such as the ADA (US), the European Accessibility Act, and the UK Equality Act. Beyond legal risk, accessible sites consistently earn higher user trust, lower bounce rates, and broader audience reach — all of which support organic rankings and conversions.

See the complete Aria valid 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 valid attr and every other issue across your whole site.

Scan my site free

Fix aria valid attr on another platform