Aria toggle field name
Quick winFound on 1% of audited stores.
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.
What it is
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.
Why it matters
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.
How to fix it
- Audit every toggle control on your site — checkboxes, custom switches, and any element carrying role="switch" or role="checkbox" — and confirm each one has a text label that screen readers can read.
- For standard HTML checkboxes and radio buttons, wrap the input and its label text in a <label> element, or link a separate <label> to the input via matching `for` and `id` attributes.
- For icon-only or visually unlabelled toggles (e.g. a sun/moon theme switcher), add an `aria-label` attribute directly on the element with a concise description, e.g. `aria-label="Dark mode"`.
- If a visible heading or text already exists nearby but is not programmatically linked, add `aria-labelledby` on the toggle pointing to the `id` of that text element — this reuses existing visible text without duplication.
- For SVG or image-based toggle icons, either add `aria-label` on the button wrapper or add a visually-hidden `<span>` inside the button with the label text (use a `.sr-only` CSS class to hide it visually while keeping it in the accessibility tree).
- After making changes, re-test with a free screen reader (NVDA + Firefox on Windows, or VoiceOver + Safari on Mac/iOS) and with the axe DevTools browser extension to confirm every toggle is announced with a meaningful name.
Fix it on your platform
Pick your platform for the exact steps.
How to fix aria toggle field name on Shopify
- In your Shopify Admin, go to Online Store → Themes → and click Actions → Edit code on your active theme.
- Search across your Liquid files (especially sections/ and snippets/) for <input type="checkbox">, role="switch", or toggle-related component files.
- For each checkbox without a <label>, either wrap both the input and its visible text in a <label> tag, or add a <label for="INPUT_ID"> element.
- For icon-only toggle buttons (common in header nav, theme switchers), open the relevant snippet file and add aria-label="Description" directly on the <button> element.
- If your theme uses a JS component for custom toggles (common in Dawn and similar themes), locate the component template in snippets/ or assets/ and add the aria-label or <label> there.
- Save changes, preview the theme, and verify with the axe DevTools Chrome extension by right-clicking the toggle and running 'Inspect Accessibility'.
How to fix aria toggle field name on WooCommerce
- Access your WordPress Admin dashboard and go to Appearance → Theme File Editor (or use a child theme via FTP/SFTP).
- Search your theme's template files (especially header.php, footer.php, woocommerce/ overrides, and any page-builder shortcodes) for checkbox inputs or custom toggle markup.
- For each unlabelled checkbox, add a matching <label for="INPUT_ID">Descriptive text</label> or wrap both elements in a <label>.
- For icon-only switches (e.g. in mega menus or cookie plugins), add aria-label="Description" to the <button> or toggle element.
- If a plugin (e.g. a cookie consent or wishlist plugin) generates the unlabelled toggle, check the plugin's settings for an accessible label option, or contact the plugin developer. As a workaround, use a small Custom HTML block or a site-wide CSS+JS snippet via Appearance → Customize → Additional CSS / Custom JS plugin to inject the aria-label.
- Test using the axe DevTools browser extension or the WordPress Accessibility Checker plugin.
How to fix aria toggle field name on BigCommerce
- Log in to your BigCommerce control panel, go to Storefront → My Themes, and click Advanced → Edit Theme Files on your active theme.
- In the Stencil theme file editor, search templates/components/ and templates/layout/ for checkbox inputs, role="switch", or custom toggle HTML.
- For standard checkboxes (e.g. product option checkboxes in templates/components/products/options/), add a <label for="INPUT_ID"> or wrap both elements in a <label>.
- For icon-only toggle buttons (e.g. mobile menu close, wishlist heart icon), open the relevant Handlebars (.html) partial and add aria-label="Description" to the <button> element.
- Save and apply the theme changes, then use BigCommerce's Preview mode to verify before pushing to live.
- Run the axe DevTools extension on a live preview URL to confirm all toggles now report an accessible name.
How to fix aria toggle field name on Wix
- Open the Wix Editor for your site.
- Click on the toggle/checkbox element that is missing a label. In Wix's native checkbox widget, ensure the 'Label' field in the element settings panel contains visible, descriptive text.
- For custom-coded toggles added via Wix Velo (formerly Corvid), open the Page Code or Site Code panel and locate the toggle element. Add element.accessibility.ariaLabel = 'Descriptive label' in the page's onReady function using the Velo Accessibility API.
- For third-party app widgets (e.g. cookie banners, wishlist apps), check the app's own settings panel for an accessible label option, or contact the app developer.
- Use the Wix Preview mode and test with a browser screen reader or the axe DevTools extension to confirm the accessible name is being read aloud.
How to fix aria toggle field name on Squarespace
- In your Squarespace Pages panel, open the page containing the toggle and click the block to edit it.
- For native Form blocks with checkboxes, click the checkbox field → Edit, and ensure the 'Label' field is filled in with descriptive text — this text becomes the accessible name.
- For icon-only toggle buttons in navigation or custom sections, go to Website → Pages → select the page → click Edit, then use a Code Block to inject a small JavaScript snippet that adds aria-label attributes to the toggle elements (see code snippet below).
- For site-wide toggles (e.g. in the header or footer), go to Website → Website Tools → Code Injection and add a JavaScript snippet in the Footer section that selects the toggle elements and adds aria-label values.
- Preview the page, open browser DevTools → Accessibility tab, and verify each toggle has an accessible name.
How to fix aria toggle field name on Webflow
- Open your Webflow Designer and select the toggle/checkbox element on the canvas.
- 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.
- 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'.
- For icon-only buttons acting as toggles, select the <button> or link element, open Element Settings → Custom Attributes, and add aria-label = 'Descriptive text'.
- 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)).
- Publish to staging, then run the axe DevTools extension to confirm all toggles have accessible names.
How to fix aria toggle field name on Adobe Commerce (Magento)
- In your Adobe Commerce / Magento 2 installation, identify the unlabelled toggle using browser DevTools to find the template file responsible (module name + template path shown in template hints — enable via Stores → Configuration → Advanced → Developer → Debug → Enable Template Path Hints).
- Create or edit a template override in your custom theme at app/design/frontend/Vendor/ThemeName/[Module_Name]/templates/.
- In the template (.phtml file), locate the <input type="checkbox"> or role="switch" element and add a matching <label for="INPUT_ID">Descriptive text</label>, or wrap both in a <label>.
- For icon-only toggle buttons (e.g. mobile menu, wishlist), open the relevant .phtml file and add aria-label="Description" to the <button> element.
- Run bin/magento cache:clean and bin/magento setup:static-content:deploy after making template changes.
- Verify with axe DevTools on the frontend that the accessible name is now present.
Does your site have this issue?
Run a free SEOLZ scan to find aria toggle field name — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
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.
Why does aria toggle field name matter?
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.
How do I fix aria toggle field name?
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.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- Forms tutorial — W3C WAI
- ARIA basics — MDN