How to fix aria toggle field name on Squarespace

Steps for Squarespace

1. In the Squarespace editor, click on the block or form containing the toggle/checkbox.
2. For built-in Form Blocks: click Edit on the form, select the checkbox field, and fill in the 'Label' field — Squarespace renders this as a visible and accessible <label> linked to the input.
3. For custom toggle UI added via a Code Block: click the block → Edit, and add aria-label='...' or a proper <label for='...'> pairing in the HTML.
4. For site-wide custom CSS/JS injections (Squarespace Business plan or higher), go to Settings → Advanced → Code Injection and add a JS snippet that sets setAttribute('aria-label', '...') on targeted elements if template editing is not available.
5. Preview and validate 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.