How to fix select name on Webflow

Add a visible or programmatic label to every `<select>` dropdown so assistive technologies can announce its purpose to users.

Steps for Webflow

  1. Open your project in the Webflow Designer. In the Navigator or on-canvas, click the `<select>` (Select Field element) that is unlabeled.
  2. 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.
  3. 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.
  4. 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.
  5. 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; }`
  6. Publish the site and verify with the axe DevTools browser extension.
Official Webflow documentation ↗

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.

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.

See the complete Select name guide for every platform and the full background.

Not sure if your Webflow store has this?

Run a free SEOLZ scan — we’ll find select name and every other issue across your whole site.

Scan my site free

Fix select name on another platform