How to fix aria toggle field name on Adobe Commerce (Magento)

Steps for Adobe Commerce (Magento)

1. Identify the .phtml template or UI Component XML file rendering the toggle. Common locations: app/design/frontend/<Vendor>/<Theme>/Magento_Checkout/ for checkout toggles, or a custom module's view/frontend/templates/ directory.
2. For <input type='checkbox'>, ensure a <label for='...'> with matching 'for' and 'id' values is present in the template.
3. For custom JavaScript toggle widgets (e.g. using Magento's UI Component or KnockoutJS bindings), add an aria-label binding: <button aria-label='...' data-bind="attr: {'aria-pressed': isActive}">.
4. Clear the Magento cache after changes: in the admin go to System → Cache Management → Flush Magento Cache, or run bin/magento cache:flush from the CLI.
5. Re-run an axe scan on the affected page to confirm the accessible name is detected.

<!-- 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.