Select name
Quick winFound on 24% of audited stores.
Add a visible or programmatic label to every `<select>` dropdown so assistive technologies can announce its purpose to users.
What it is
Every dropdown menu on your website (a `<select>` element — things like "Choose a size", "Select a country", or "Sort by") must have a text label that is programmatically linked to it. Without this link, a screen reader user who tabs to the dropdown hears nothing useful — just "combo box" with no context about what they're supposed to choose. A label can be a visible `<label>` tag, a hidden-but-accessible ARIA attribute, or a wrapping label element — but something must be there and connected.
Why it matters
Screen reader users — who include blind shoppers, people with motor disabilities, and many others — cannot use unlabeled dropdowns. This directly breaks the shopping experience: they cannot select a product size, filter results, choose a shipping country, or complete a checkout form. Beyond lost sales, missing form labels violate WCAG 2.1 Success Criterion 4.1.2, which is cited in accessibility laws in the US (ADA), EU (EAA), UK (PSBAR), and Canada (AODA). Accessibility lawsuits overwhelmingly target e-commerce sites, and missing form labels are among the most commonly cited violations. Fixing this removes legal risk and opens your store to a wider audience.
How to fix it
- Identify every unlabeled `<select>` element on the page — common locations are product option dropdowns (size, color, quantity), sort/filter controls, country/state fields in checkout, and currency or language switchers.
- For each dropdown, decide on the labeling method: (a) a visible `<label>` element linked via matching `for` and `id` attributes — the preferred, most accessible approach; (b) a visually-hidden `<label>` if a visible label would break your design; or (c) an `aria-label` or `aria-labelledby` attribute directly on the `<select>` tag as a last resort.
- Apply method (a): wrap or associate a `<label>` — set `<label for="my-select">Sort by</label>` and `<select id="my-select">` so the `for` value matches the `id` exactly.
- If a visible label is not possible, apply method (b): add the label to the DOM but hide it visually using a `.visually-hidden` CSS class (clip technique) — never use `display:none` or `visibility:hidden` because those hide it from screen readers too.
- If you cannot change the HTML structure, apply method (c): add `aria-label="Sort by"` directly to the `<select>` tag, or add `aria-labelledby="heading-id"` pointing to an existing on-page text element that describes the dropdown.
- Test the fix: use a screen reader (NVDA + Firefox on Windows, or VoiceOver + Safari on Mac/iOS) and tab to the dropdown — you should hear the label announced followed by the currently selected option; also re-run your accessibility scanner to confirm the rule passes.
Fix it on your platform
Pick your platform for the exact steps.
How to fix select name on Shopify
- In your Shopify admin go to Online Store → Themes → click 'Customize' on your active theme.
- For product option selects (size, color, etc.), click 'Edit code' (Actions → Edit code) and open the relevant Liquid file — typically `snippets/product-variant-picker.liquid`, `sections/main-product.liquid`, or `snippets/product-form.liquid` depending on your theme.
- Locate the `<select>` tag for each option. Check whether it already has a `<label for="…">` above it with a matching `id` on the select. If not, add `id="product-option-{{ option.name | handleize }}"` to the `<select>` and add `<label for="product-option-{{ option.name | handleize }}">{{ option.name }}</label>` immediately before it.
- For sort-by dropdowns, open `sections/main-collection-product-grid.liquid` (or `collection.liquid`) and find the sort `<select>`. Add `id="SortBy"` to the select and `<label for="SortBy" class="visually-hidden">Sort by</label>` before it. Most themes already include a `.visually-hidden` utility class in their base CSS.
- For checkout fields (country, province), these are controlled by Shopify's checkout — you cannot directly edit them on standard Shopify plans. On Shopify Plus you can customize checkout.liquid: add matching `for`/`id` pairs to any custom selects you add.
- Save the file, then preview the theme and test with a screen reader or the axe browser extension to verify the label is announced.
How to fix select name on WooCommerce
- Unlabeled selects in WooCommerce most often appear in: product variation dropdowns, the country/state fields in the checkout, and the shop sort dropdown.
- Create a child theme (if you haven't already) to avoid losing changes on theme updates. In your child theme, copy the relevant template: `woocommerce/templates/single-product/add-to-cart/variable.php` for variation selects, or `woocommerce/templates/checkout/form-billing.php` for checkout selects.
- In `variable.php`, find the `<select>` for each attribute. Ensure the `<label>` above it has a `for` attribute matching the select's `id` attribute. Example: `<label for="pa_size">Size</label>` and `<select id="pa_size" name="attribute_pa_size">`.
- For the shop sort dropdown, copy `woocommerce/templates/loop/orderby.php` to your child theme and add `<label for="orderby" class="screen-reader-text">Sort by</label>` before the `<select id="orderby">` element.
- Alternatively, use the `woocommerce_form_field` filter or a small plugin/snippet in your child theme's `functions.php` to inject `aria-label` attributes on problematic selects without editing templates.
- Flush any page/object caches, then re-test with the axe DevTools browser extension.
How to fix select name on BigCommerce
- In your BigCommerce admin go to Storefront → Themes → click 'Advanced' → 'Edit Theme Files' for your active theme (Stencil-based).
- Product option selects live in `templates/components/products/options/swatch.html`, `set-select.html`, or `set-rectangle.html`. Open the relevant file and locate the `<select>` tag.
- Add a matching `<label>` before the `<select>`: `<label for="attribute_{{ product.options[i].id }}">{{ product.options[i].display_name }}</label>` and add the corresponding `id="attribute_{{ product.options[i].id }}"` to the `<select>` tag.
- For the sort-by dropdown on collection pages, open `templates/components/category/shop-by.html` or `templates/pages/category.html` and add `<label for="sort" class="u-hidden-visually">Sort by</label>` and `id="sort"` on the select.
- Commit your changes in the theme editor. BigCommerce Stencil themes include a `.u-hidden-visually` utility class for visually-hidden labels.
- Preview the storefront and verify labels are announced using a screen reader or the axe browser extension.
How to fix select name on Wix
- Wix renders its own UI components and you cannot directly edit the underlying HTML of Wix-native form elements or dropdowns.
- For Wix-native dropdowns (e.g., in Wix Stores product pages), open the Editor, click the dropdown element, and in the Settings/Design panel check whether a visible label text field exists — fill it in. Wix uses this text as an accessible name internally.
- For any custom HTML dropdowns added via the 'HTML iframe' (Embed Code) widget, you control the full HTML inside that widget — add a proper `<label for="…">` / `id` pair as shown in the Generic HTML snippet below.
- For Wix Forms, click the form, select the dropdown field, and ensure the 'Placeholder' and 'Label' fields in the field settings panel are filled — Wix Forms uses the label text to generate an accessible name.
- If the unlabeled select is part of a Wix Stores filter/sort bar, contact Wix support or raise a feedback request, as those components are not user-editable at the HTML level.
- Test any embeddable/custom HTML you control with the axe browser extension.
How to fix select name on Squarespace
- Squarespace controls most form and product option HTML; you have limited direct access. Navigate to Pages → the page containing the dropdown, then open the block/section editor.
- For Squarespace Form blocks: click the form block → Edit → click the dropdown field → ensure the 'Label' field is filled in. Squarespace renders this as a visible label linked to the field.
- For product option dropdowns (Commerce), go to Commerce → your product → click 'Options' and ensure each option has a descriptive name (e.g., 'Size', 'Color'). Squarespace uses these names to build accessible labels automatically in most templates.
- For any remaining unlabeled selects, use Settings → Advanced → Code Injection (available on Business plan and above) to inject a JavaScript snippet that adds `aria-label` to the specific `<select>` element by its class or position. Example: `document.querySelector('.your-select-class').setAttribute('aria-label', 'Sort by');`
- Alternatively, add a Custom CSS / Custom Code block via a Code Block widget with the JavaScript above, scoped to the relevant page.
- Re-test with the axe extension after publishing.
How to fix select name on Webflow
- Open your project in the Webflow Designer. In the Navigator or on-canvas, click the `<select>` (Select Field element) that is unlabeled.
- In the left-side Elements panel, drag a 'Label' element from the Form Elements section and place it immediately before the Select element inside the same form wrapper.
- With the Label element selected, type the descriptive label text (e.g., 'Sort by', 'Choose size'). Then, in the Label element's Settings panel, set the 'For' field to the exact ID of the Select element.
- Click the Select element and in its Settings panel set a unique Element ID (e.g., `sort-select`) — this must match the 'For' value you set on the label.
- If you want the label visually hidden, add a custom class (e.g., `visually-hidden`) to the Label element and add the CSS for that class in Webflow's Style panel under Global CSS: `.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }`
- Publish the site and verify with the axe DevTools browser extension.
How to fix select name on Adobe Commerce (Magento)
- Unlabeled selects typically appear in: product option/swatch selects, the layered navigation sort dropdown, country/region selects in checkout, and currency switchers.
- Create a custom theme (or use your existing child theme) under `app/design/frontend/<Vendor>/<theme>/`. Never edit core files directly.
- For product options, override `Magento_Catalog/templates/product/view/options/type/select.phtml`. Locate the `<select>` and add `id="select_{{ $block->getOption()->getId() }}"`. Add `<label for="select_{{ $block->getOption()->getId() }}">{{ $block->getOption()->getTitle() }}</label>` before the select.
- For the sort-by toolbar dropdown, override `Magento_Catalog/templates/product/list/toolbar/viewmode.phtml` and `toolbar.phtml`. Add a `<label>` with a matching `for` and add a matching `id` to the `<select>` for sorting.
- For checkout country/region selects, override `Magento_Checkout/frontend/templates/onepage/shipping.phtml` or use a ViewModel/plugin to inject the correct `id` and matching `<label>` elements.
- Run `php bin/magento cache:flush` and `php bin/magento setup:static-content:deploy`, then test with a screen reader and the axe browser extension.
How to fix select name on Shopify Plus
- 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.
- 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.
How to fix select name on Wix Studio
- Open Wix Studio and navigate to the page with the dropdown. Click the dropdown component.
- In the right-hand Properties panel, ensure the 'Label' field is populated with descriptive text. Toggle label visibility on if it is currently hidden.
- For custom widgets or code components, open the Velo code editor and use: $w('#dropdownId').setAttribute('aria-label', 'Descriptive label text here');
- Publish and verify with the axe DevTools browser extension.
How to fix select name on Magento Open Source
- Follow the same steps as Adobe Commerce (Magento) above — the template structure and cache-clearing commands are identical.
How to fix select name on PrestaShop
- In your PrestaShop back office, go to Design → Theme & Logo → your active theme. Template files are in '/themes/YOUR-THEME/templates/'.
- Find the template rendering the unlabelled <select> — common files: 'catalog/product.tpl' (variant selectors), 'checkout/checkout.tpl' (address country/state), '_partials/form-fields.tpl' (generic form fields).
- Add a <label for="MATCHING-ID">{l s='Descriptive text' d='Shop.Theme'}</label> before the <select> tag, or add aria-label="{l s='Descriptive text' d='Shop.Theme'}" on the element itself.
- Clear the PrestaShop cache via Advanced Parameters → Performance → Clear cache, then verify.
How to fix select name on OpenCart
- Navigate to your OpenCart store's theme files. The default theme path is 'catalog/view/theme/YOUR-THEME/template/'.
- Find the template with the offending <select> (e.g. 'product/product.tpl' for variant selectors, 'checkout/checkout.tpl' for address dropdowns).
- Add a <label for="MATCHING-ID">Descriptive text</label> before each bare <select>, or add aria-label="Descriptive text" directly on the element.
- Save, clear caches from Admin → Dashboard → the blue cog icon → Refresh, then verify with axe DevTools.
Does your site have this issue?
Run a free SEOLZ scan to find select name — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Select name?
Every dropdown menu on your website (a `<select>` element — things like "Choose a size", "Select a country", or "Sort by") must have a text label that is programmatically linked to it. Without this link, a screen reader user who tabs to the dropdown hears nothing useful — just "combo box" with no context about what they're supposed to choose. A label can be a visible `<label>` tag, a hidden-but-accessible ARIA attribute, or a wrapping label element — but something must be there and connected.
Why does select name matter?
Screen reader users — who include blind shoppers, people with motor disabilities, and many others — cannot use unlabeled dropdowns. This directly breaks the shopping experience: they cannot select a product size, filter results, choose a shipping country, or complete a checkout form. Beyond lost sales, missing form labels violate WCAG 2.1 Success Criterion 4.1.2, which is cited in accessibility laws in the US (ADA), EU (EAA), UK (PSBAR), and Canada (AODA). Accessibility lawsuits overwhelmingly target e-commerce sites, and missing form labels are among the most commonly cited violations. Fixing this removes legal risk and opens your store to a wider audience.
How do I fix select name?
Add a visible or programmatic label to every `<select>` dropdown so assistive technologies can announce its purpose to users.