How to fix select name on OpenCart

Steps for OpenCart

1. Navigate to your OpenCart store's theme files. The default theme path is 'catalog/view/theme/YOUR-THEME/template/'.
2. Find the template with the offending <select> (e.g. 'product/product.tpl' for variant selectors, 'checkout/checkout.tpl' for address dropdowns).
3. Add a <label for="MATCHING-ID">Descriptive text</label> before each bare <select>, or add aria-label="Descriptive text" directly on the element.
4. Save, clear caches from Admin → Dashboard → the blue cog icon → Refresh, then verify with axe DevTools.

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