Select name

What it is

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.

Why it matters

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.

How to fix it

1. Identify every <select> element on the page (size pickers, sort dropdowns, quantity selectors, country/state fields, variant selectors, etc.).
2. For each <select>, choose the labelling method that fits the design: (a) a visible <label> element with a matching 'for' attribute pointing to the select's 'id'; (b) wrap the <select> inside a <label> element; (c) if no visible label is possible, add an aria-label attribute directly on the <select>; or (d) if there is existing visible text nearby, add an aria-labelledby attribute whose value is the 'id' of that text element.
3. Ensure the label text is descriptive and unique — e.g. 'Select size', 'Sort results by', 'Shipping country' — not generic text like 'Choose' or 'Select'.
4. Never use the 'placeholder' or first <option> text alone as a substitute for a label; the first option disappears after a choice is made, leaving no accessible name.
5. Test the fix with a browser accessibility checker (e.g. axe DevTools browser extension) and manually tab to each dropdown with a screen reader (NVDA + Firefox, VoiceOver + Safari) to confirm the label is announced correctly.
6. Re-run your automated scanner to confirm the select-name violation is resolved.

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

Fix it on your platform

Pick your platform for the exact steps.

Frequently asked questions

Authoritative references

• How to fix this specific rule — Deque/axe (rule reference)
• WCAG 2 overview — W3C WAI
• Forms tutorial — W3C WAI
• ARIA basics — MDN