How to fix aria toggle field name on WooCommerce
Give every toggle control (checkbox, switch, or ARIA toggle button) a descriptive accessible name so screen readers can announce what it does.
Steps for WooCommerce
- In WordPress admin, go to Appearance → Theme File Editor (or use a child theme / FTP to avoid overwriting on update).
- Locate the template file containing the toggle: for checkout checkboxes it is typically woocommerce/checkout/form-checkout.php or a plugin template override in your theme's woocommerce/ folder.
- Add a <label for='field-id'> paired with an id attribute on the <input>, or use aria-label on any custom toggle widget.
- If the toggle is output by a plugin (e.g. a cookie consent or newsletter opt-in plugin), check that plugin's settings for a 'label text' field, or use a CSS + JS snippet in a child theme's functions.php to inject aria-label.
- Install the WP Accessibility plugin (by Joe Dolson) for additional helpers, then re-run an axe scan to verify.
<!-- 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.
Not sure if your WooCommerce store has this?
Run a free SEOLZ audit — we’ll find aria toggle field name and every other issue across your whole site.
Scan my site free