Skip to content
StoreA11y

Shopify · 4.1.2 Name, Role, Value (Level A)

ARIA input fields with no accessible name on Shopify

Some elements act as form fields through an ARIA role — role="combobox", role="searchbox", role="spinbutton", role="slider" — but have no name. The shopper is told there is a field and not what it is for. On a store this is usually the predictive search box or a custom price-range filter.

Which WCAG criterion this fails

  • Does not meet 4.1.2 Name, Role, Value (Level A)

How to fix it on Shopify

Everything below is done from Online Store > Themes > Edit code. Take a copy of the theme before editing.

  1. Give each element an aria-label, or an aria-labelledby pointing at a visible label that exists on the page.
  2. For the predictive search input, the name should say what is searched: aria-label="Search the store".
  3. For a price filter, name each end: aria-label="Minimum price", aria-label="Maximum price".
  4. Where the element is really an <input>, prefer a real <label for> and drop the ARIA role — native fields carry their own role and state.
  5. Check that any id referenced by aria-labelledby actually exists in the rendered page; inside a loop it usually needs a suffix.

Where this usually lives

sections/predictive-search.liquid, snippets/facets.liquid (price range), assets/predictive-search.js

Paths given for Dawn and its derivatives (Sense, Craft, Refresh, Studio). A heavily customised theme may differ; the CSS selector in your scan report points at the exact element.

Code

<input type="search"
       role="combobox"
       aria-label="Search the store"
       aria-expanded="false"
       aria-controls="predictive-search-results"
       aria-autocomplete="list">
<ul id="predictive-search-results" role="listbox"></ul>

How to confirm it is fixed

Re-run the scan. This rule should drop out of the findings entirely. If the instance count falls but does not reach zero, the same defect exists in another template — product cards and quick-view modals are the usual second home for it.

Effort: low. Rule id: aria-input-field-name (axe-core).