How to fix aria toggle field name on Webflow

Steps for Webflow

1. In the Webflow Designer, select the checkbox or toggle element on the canvas.
2. Open the Element Settings panel (the gear icon on the right sidebar).
3. Scroll to the 'Accessibility' section and fill in the 'Label' (aria-label) field with a descriptive name.
4. For checkboxes that already have a visible text label next to them, ensure the label element is properly nested or linked: Webflow's native Checkbox component wraps the input in a label by default — confirm the label text is set in the element's text node.
5. For custom toggle components built with Div blocks, add a custom attribute: in the Element Settings panel → Custom Attributes, add Name: aria-label, Value: 'Your descriptive label'.
6. Publish the site and test with the axe DevTools browser extension.

<!-- Option 1: Standard checkbox with <label> -->
<label for="subscribe-newsletter">
  Subscribe to newsletter
</label>
<input type="checkbox" id="subscribe-newsletter" name="subscribe">

<!-- Option 2: aria-label on a custom toggle button -->
<button role="switch" aria-checked="false" aria-label="Enable email notifications">
  <span class="toggle-thumb"></span>
</button>

<!-- Option 3: aria-labelledby referencing visible text -->
<span id="wifi-label">Wi-Fi</span>
<div role="switch" aria-checked="true" aria-labelledby="wifi-label" tabindex="0"></div>

<!-- Option 4: Visually-hidden label text (CSS clip pattern) -->
<style>
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
</style>
<button aria-pressed="false">
  <span class="sr-only">Toggle dark mode</span>
  🌙
</button>

What is aria toggle field name?

An "accessible name" is the text a screen reader speaks aloud when a user focuses on an interactive control. Toggle fields — checkboxes, toggle switches, and buttons with `role="switch"` or `aria-pressed` — must each have a clear, unique label that describes exactly what the toggle does. This is WCAG Success Criterion 4.1.2 (Name, Role, Value). When a toggle has no accessible name, a screen reader user hears something useless like "checkbox" or "button" with no explanation of its purpose.

Screen reader users — a significant portion of shoppers with visual or motor disabilities — cannot use your site if controls lack accessible names. In many countries (including the US under the ADA, and the EU under EAA/EN 301 549) this is a legal accessibility requirement, and lawsuits over inaccessible e-commerce sites are common and costly. Beyond legal risk, roughly 7–8 million Americans use screen readers; unnamed toggles are a complete conversion blocker for them. Google also factors accessibility into site quality signals, so persistent WCAG failures can indirectly hurt your search rankings.

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