Select Element Must Have an Accessible Name: How to Fix It

This check flags a <select> that has no accessible name, meaning nothing tells assistive tech what the dropdown is for. A screen reader lands on it and announces "combo box" with no context, so the user is choosing blind between options like "US" and "CA" without knowing they are picking a country. Dropdowns gate a lot of high-intent flows, shipping, filters, plan selection, and an unnamed one quietly kills completion for anyone not using a mouse.

Why a placeholder option is not a name

This is the single most common misunderstanding behind the failure, so it is worth being blunt about. The first <option> in a select, the "Select a country" line, is a value inside the list, not a label for the control. Sighted users read it as a prompt because it happens to be showing when the menu is collapsed, and developers assume screen readers treat it the same way. They do not. The accessible name is computed from labels and ARIA attributes on the <select> itself, and an option's text never enters that calculation. So a dropdown whose only "label" is a placeholder option announces with no name at all, or with the placeholder text read as the current value rather than as the field's purpose. The moment the user picks a real option, even that prompt disappears, and there is nothing left to tell them what the field was. That is why the fix has to live on the control, through a <label> or an ARIA attribute, and not inside the option list.

A real failure, and the fix

The usual culprit leans on a placeholder option and visual proximity instead of a real association:

Country
<select name="country">
  <option value="">Select a country</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
</select>

The word "Country" is just floating text; it is not connected to the control. Bind them with a matching for and id:

<label for="country">Country</label>
<select id="country" name="country">
  <option value="">Select a country</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
</select>

Now the control is announced as "Country, combo box," and the placeholder option stays exactly where it belongs, as a prompt inside the list.

Ways to name a select, ranked

How to detect it

1. axe DevTools: run the extension; "Select element must have an accessible name" lists each unnamed dropdown with a link straight to the node.
2. Lighthouse: run the Accessibility audit in Chrome DevTools and check the "Names and labels" group, where unlabeled selects are reported.
3. WAVE: load WAVE and look for the red "Missing form label" marker sitting on the select control.
4. Manual check: click the dropdown and confirm a <label> with a matching for exists, or that an aria-label/aria-labelledby is present in the markup.

How to fix it

Reach for a native <label for> first, since it names the control and enlarges the click target at the same time. If the design has no visible label, use aria-label with clear, purpose-first text. When the name already exists in another element, such as a section heading, reference it with aria-labelledby. Do not lean on a placeholder <option>, on title, or on nearby text that is not programmatically linked. The same accessible-name rule applies to text inputs in form input elements must have labels and to ARIA-role fields in ARIA input fields must have an accessible name.

Watch out for the custom-dropdown trap. A lot of design systems hide the native <select> and paint a styled widget on top of it out of <div> and <ul> elements. If you go that route, the ARIA combobox pattern is now your responsibility, roles, states, keyboard handling, and a name on the trigger, and it is far easier to get wrong than a native control. Unless you have a strong reason, keep the real <select> and style it; you inherit correct keyboard support and naming for free, and this check becomes a one-line fix. Whichever path you take, always verify the outcome with a screen reader rather than trusting the visual, because a dropdown can look perfectly labeled on screen while announcing as an anonymous combo box.

Frequently asked questions

Does the first <option> count as a label?

No. A placeholder option like "Select a country" is content inside the list, not an accessible name for the control. Screen readers do not treat it as the field's name, so the check still fails.

Is a visible label always required?

A visible label is best for everyone, but the check passes with any accessible name, including aria-label. That said, a name that no sighted user can see is a usability trade-off, so prefer visible text where the layout allows.

Can I name a multi-select the same way?

Yes. A <select multiple> follows the exact same rules; associate it with a <label> or an ARIA attribute and it will be announced correctly.

Which WCAG criterion is this?

It supports 4.1.2 Name, Role, Value and 3.3.2 Labels or Instructions, both Level A. Together they require the control to expose a programmatic name that describes its purpose.