Skip to content
WordPressRule: select-name•Reviewed Oct 2026

Provide accessible names for select dropdowns in WordPress

Every `<select>` element must have an associated `<label>` or `aria-label`.

What's wrong

Variant pickers, quantity dropdowns, and currency selectors without labels leave users unaware of what is being chosen.

Who it affects

Screen reader users hear 'Combo box, unlabelled' without knowing if they are choosing size, color, or shipping.

How to fix on WordPress

Ensure WooCommerce variant select dropdowns have explicit `<label for="...">` tags.

Code example

Problematic Code
PHP
<select name="quantity">
  <option value="1">1</option>
</select>
Recommended Accessible Code
PHP
<label for="cart-quantity-<?php echo esc_attr( $cart_item_key ); ?>" class="screen-reader-text">
  <?php esc_html_e( 'Quantity', 'woocommerce' ); ?>
</label>
<select id="cart-quantity-<?php echo esc_attr( $cart_item_key ); ?>" name="quantity">
  <option value="1">1</option>
</select>

How to check your fix

Tab to the `<select>` dropdown using a screen reader. Confirm it announces the field name clearly (e.g. 'Size, combo box').

Check if your site has this issue

Scan any public store page free against WCAG 2.2 AA in 30 seconds.

Your session has ended

Sign in again to carry on. Anything you typed on this page is kept.

Signed in another way? Use another method (opens a new tab)