How to fix aria toggle field name on Webflow

Add a visible or programmatic accessible name to every toggle control (checkbox, switch, or button with role="switch") so screen readers can announce what the control does.

Steps for Webflow

  1. Open your Webflow Designer and select the toggle/checkbox element on the canvas.
  2. For a native Webflow Form Checkbox, click the element, then in the right-hand Settings panel ensure the 'Label' text field is filled in. This text is rendered as a <label> linked to the checkbox.
  3. For custom toggle components (e.g. a div styled as a switch), select the element, open the Element Settings panel (the gear icon), and add a custom attribute: Name = aria-label, Value = 'Descriptive text for the toggle'.
  4. For icon-only buttons acting as toggles, select the <button> or link element, open Element Settings → Custom Attributes, and add aria-label = 'Descriptive text'.
  5. Alternatively, place a hidden text element inside the button: add a <span> with the label text and apply a class with CSS properties that visually hide it but keep it accessible (position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0)).
  6. Publish to staging, then run the axe DevTools extension to confirm all toggles have accessible names.
Official Webflow documentation ↗

What is aria toggle field name?

WCAG Success Criterion 4.1.2 requires that every interactive control — including checkboxes, toggle switches, and any element with `role="switch"` — has an accessible name: a short text label that screen readers speak aloud when a user lands on the control. This label can come from visible text next to the element, an `aria-label` attribute, an `aria-labelledby` attribute pointing to another element, or (for images/icons) an `alt` attribute. When none of these are present, the control is essentially nameless — a screen reader announces only "checkbox" or "switch" with no clue what it toggles.

Without accessible names on toggles, blind and low-vision shoppers cannot use critical site controls: newsletter opt-ins, cookie consent switches, "Add to wishlist" toggles, product option selectors, and checkout preference checkboxes all become unusable. This directly blocks sales and exposes your store to legal risk under the ADA (USA), EN 301 549 (EU), and equivalent laws in many other markets — accessibility lawsuits against ecommerce stores have increased sharply year over year. Search engines also use accessibility signals as a quality indicator, so poorly accessible pages can indirectly affect your organic rankings. Fixing this typically takes under an hour and immediately removes a barrier for millions of users who rely on assistive technology.

See the complete Aria toggle field name guide for every platform and the full background.

Not sure if your Webflow store has this?

Run a free SEOLZ scan — we’ll find aria toggle field name and every other issue across your whole site.

Scan my site free

Fix aria toggle field name on another platform