How to fix aria toggle field name on Shopify

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 Shopify

  1. In your Shopify Admin, go to Online Store → Themes → and click Actions → Edit code on your active theme.
  2. Search across your Liquid files (especially sections/ and snippets/) for <input type="checkbox">, role="switch", or toggle-related component files.
  3. 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.
  4. 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.
  5. 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.
  6. Save changes, preview the theme, and verify with the axe DevTools Chrome extension by right-clicking the toggle and running 'Inspect Accessibility'.
Official Shopify documentation ↗

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 Shopify 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

Fix aria toggle field name on another platform