How to fix aria toggle field name on Adobe Commerce (Magento)
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.
Steps for 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.
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.
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.
See the complete Aria toggle field name guide for every platform and the full background.
Not sure if your Adobe Commerce (Magento) store has this?
Run a free SEOLZ scan — we’ll find aria toggle field name and every other issue across your whole site.
Scan my site free