Skip to content
StoreA11y

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

Dropdown menus with no accessible name on WooCommerce

Some <select> dropdowns have no name. On a product page these are usually the size and colour variant pickers, so a screen-reader user is offered a list of options with no idea what they are choosing.

Which WCAG criterion this fails

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

How to fix it on WooCommerce

Everything below is done from Appearance > Theme File Editor, or your child theme over SFTP. Take a copy of the theme before editing.

  1. Variant selectors: open snippets/product-variant-picker.liquid (Dawn and its derivatives) or sections/main-product.liquid.
  2. Each <select> needs a <label for="…"> naming the option — "Size", "Colour" — or an aria-label with the same text.
  3. The sort-by dropdown on collection pages needs the same treatment; it usually sits in snippets/facets.liquid or sections/main-collection-product-grid.liquid.
  4. Do not rely on the first <option> ("Choose a size") as the label — it is a value, not a name, and it vanishes once a selection is made.
  5. Country and province selects in the address/checkout area also need labels.

Where this usually lives

woocommerce/single-product/add-to-cart/variable.php override, and the catalog ordering select in woocommerce/loop/orderby.php

Paths given for Storefront, Astra, Flatsome and other WooCommerce themes. A heavily customised theme may differ; the CSS selector in your scan report points at the exact element.

Code

<label class="form__label" for="Option-{{ option.name | handle }}">{{ option.name }}</label>
<select id="Option-{{ option.name | handle }}" name="options[{{ option.name | escape }}]">
  {% for value in option.values %}
    <option value="{{ value | escape }}">{{ value }}</option>
  {% endfor %}
</select>

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: select-name (axe-core).