How to fix select name on Shopify Plus

Steps for Shopify Plus

1. Follow identical steps to Shopify above. On Shopify Plus you can also edit checkout.liquid (available to Plus merchants): go to Online Store → Themes → Edit code → layout/checkout.liquid to label any custom checkout dropdowns.
2. For headless/custom storefronts using the Storefront API, edit the React/Vue component that renders the <select> and add a <label htmlFor="..."> or aria-label prop.

<!-- Method 1: explicit <label> with for/id pair (recommended) -->
<label for="sort-by">Sort results by</label>
<select id="sort-by" name="sort-by">
  <option value="price-asc">Price: Low to High</option>
  <option value="price-desc">Price: High to Low</option>
</select>

<!-- Method 2: wrapping <label> (implicit association) -->
<label>
  Select size
  <select name="size">
    <option value="s">Small</option>
    <option value="m">Medium</option>
  </select>
</label>

<!-- Method 3: aria-label when no visible label is feasible -->
<select name="country" aria-label="Shipping country">
  <option value="us">United States</option>
  <option value="gb">United Kingdom</option>
</select>

<!-- Method 4: aria-labelledby pointing to existing visible text -->
<span id="qty-label">Quantity</span>
<select name="quantity" aria-labelledby="qty-label">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

What is select name?

Every dropdown menu (`<select>` element) on a webpage — such as a size selector, country picker, or sort-by filter — needs a visible or programmatically associated label that tells users what the dropdown is for. Without one, screen readers and other assistive technologies simply announce it as "combo box" or read out the first option, giving blind and low-vision shoppers no idea what they're selecting. WCAG Success Criterion 4.1.2 (Name, Role, Value) requires that all interactive controls, including dropdowns, have an accessible name. The label can be a visible `<label>` element linked by a `for`/`id` pair, a wrapping `<label>`, or an `aria-label` / `aria-labelledby` attribute when a visible label isn't practical.

In many countries (the US, UK, EU, Canada, Australia) accessibility laws require that online stores meet WCAG 2.1 AA, meaning an unlabelled dropdown is a documented legal liability that can trigger complaints, lawsuits, or regulatory action — and ecommerce is one of the most targeted industries. Beyond legal risk, screen-reader users who can't understand a dropdown will abandon the purchase, directly harming conversions and revenue. Google's crawlers also read ARIA and label attributes to better understand form context, so fixing labels can improve how product-filter and checkout pages are indexed. Fixing this issue also benefits voice-control users (e.g. Dragon NaturallySpeaking) who activate controls by speaking their label out loud.

See the complete Select name guide for every platform and the full background.