Forms Rule

Select menus must have an accessible name select-name

A select element is a drop-down list of choices. Like a text field, it needs a name that says what the choice is about: Delivery day, Shop, Size. Without a connected label, a screen reader announces the control type and whichever option is currently showing, and the person has to work out from the options alone what they are picking.

WCAG 2.2 A 4.1.2 Name, Role, Value

Websight reports this as Select element must have an accessible name

Who it affects

Someone donating to a charity shop online and using a screen reader reaches a drop-down and hears Choose, pop-up button. Choose what? The shop, the item type, the collection slot? The options do not say.

Someone with a cognitive disability sees several unlabelled drop-downs in a row and cannot tell which one sets what, so they pick wrong and have to start over.

Someone using voice control cannot say click shop to open the menu, because the menu has no name.

Broken versus fixed

Both examples are live and rendered in a sandboxed frame. The broken one is deliberately broken.

Broken

Announced: Choose, pop-up button. The visible heading is nearby but not connected, so the screen reader does not read it as the name.

Fixed

Announced: Which shop will you bring it to?, Choose, pop-up button.

Show the markup behind both examples
Broken
<style>body{font-family:system-ui;padding:16px;margin:0}select{padding:8px;font-size:15px;border:1px solid #888;border-radius:6px;min-width:220px}</style>
<h2 style="font-size:17px;margin:0 0 10px">Arrange a donation drop-off</h2>
<select>
  <option>Choose</option>
  <option>Kendal, Highgate</option>
  <option>Penrith, Middlegate</option>
  <option>Carlisle, English Street</option>
</select>
Fixed
<style>body{font-family:system-ui;padding:16px;margin:0}label{display:block;font-size:14px;margin-bottom:4px}select{padding:8px;font-size:15px;border:1px solid #888;border-radius:6px;min-width:220px}</style>
<h2 style="font-size:17px;margin:0 0 10px">Arrange a donation drop-off</h2>
<label for="shop">Which shop will you bring it to?</label>
<select id="shop">
  <option>Choose</option>
  <option>Kendal, Highgate</option>
  <option>Penrith, Middlegate</option>
  <option>Carlisle, English Street</option>
</select>

Test it by hand in two minutes

  1. Click the text you think is the label for the drop-down. If the drop-down gains focus or opens, it is connected.
  2. Right click the select and choose Inspect. Look for an id on it and a label element with a matching for, or an aria-label or aria-labelledby on the select.
  3. Turn on VoiceOver (Cmd+F5) or NVDA and Tab to the select. You should hear the purpose before the current option, for example Which shop, Choose, pop-up button.
  4. Cover the options with your hand and read just the label. If you could not say what the menu chooses, the name is not good enough.

The fix

Before
<select name="shop">
  <option>Choose</option>
  <option>Kendal, Highgate</option>
</select>
After
<label for="shop">Which shop will you bring it to?</label>
<select id="shop" name="shop">
  <option>Choose</option>
  <option>Kendal, Highgate</option>
</select>

A visible label is best. If the first option says Choose a shop, that still does not count as the name; the label is what is announced before the option.

Select inside a sentence

Before
Show <select><option>10</option><option>25</option></select> results per page
After
Show <select aria-label="Results per page"><option>10</option><option>25</option></select> results per page

When the select sits mid-sentence, a visible label would break the flow. aria-label gives it a name without changing the layout.

Select named by a nearby heading

Before
<h3 id="slot">Collection slot</h3>
<select>...</select>
After
<h3 id="slot">Collection slot</h3>
<select aria-labelledby="slot">...</select>

If the heading is the natural name, point at it rather than duplicating it. A label element is still the better choice when you can add one.

Common mistakes

  • Treating the first option (Choose, Select one, Please select) as the label.
  • Putting the label text in a div above the select with nothing connecting them.
  • Using title on the select as the name; it is not shown on touch and not reliably spoken.
  • Giving two selects (day and month, say) the same id so only one gets a label.
  • Hiding the label with display:none to tidy the layout, which hides it from screen readers too.

WCAG criteria this rule maps to

axe-core tags this rule as WCAG 2.2 level A. It is one of the checks for:

The scanner can see a select with no connected label, aria-label, aria-labelledby or title. It cannot tell whether the name describes the choice, or whether the options make sense under it. Automated tools find only part of the accessibility problems on a page; a pass on this rule is not a pass on the criterion.

A Form fields must have labels label Every input and textarea needs a label that is programmatically tied to it, not just sitting nearby. A A form field should have one label, not several form-field-multiple-labels When two or more label elements have a for attribute pointing at the same field, screen readers have to pick. A ARIA input fields must have an accessible name aria-input-field-name When a div or span is given a form role such as textbox, combobox, listbox, slider or spinbutton, assistive technology treats it as a field. AA The autocomplete attribute must use a valid value autocomplete-valid The autocomplete attribute tells the browser what kind of information a field collects: a given name, a postcode, an email address.

Scan your own page for this and 63 other checks

Open any page in Chrome, click Websight, and get a score out of 100 with every issue explained and a draft fix snippet per element.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.