Back to Info and Examples for Accessibility Insights for Web
select-name
All <select> elements must have accessible names.
Why it matters
A <select> element is an HTML control for selecting among a set of options.
An accessible name is a word or phrase coded in a way that assistive technologies can associate it with a specific user interface object. Assistive technologies can then refer to the object by name, not just by type.
When a <select> element doesn't an accessible name, people who use assistive technologies have no way of knowing its purpose.
How to fix
For each <select> element, provide an accessible name using one of the following methods.
Good
titleattribute
Better
aria-labelattributearia-labelledbyattribute referencing visible text
Best
- Explicit
<label>element - Implicit (wrapped)
<label>element
Example
Fail
<select> element doesn't have an accessible name. Instead, the first option—configured as a placeholder—is used to communicate the control's purpose. Although some people might correctly infer the purpose of the control, the implementation is potentially confusing to any user.<select name="flavorchoices">
<option value="0">Flavor:</option>
<option value="1">Apple</option>
<option value="2">Cherry</option>
<option value="3">Grape</option>
<option value="4">Lemon</option>
<option value="5">Watermelon</option>
</select>
<option value="0">Flavor:</option>
<option value="1">Apple</option>
<option value="2">Cherry</option>
<option value="3">Grape</option>
<option value="4">Lemon</option>
<option value="5">Watermelon</option>
</select>
Pass
<select> element is provided an accessible name using a <label> element. All users can tell that the control allows them to select a flavor.<label for="flavor">Flavor:</label>
<select id="flavor" name="flavorchoices">
<option value="0">Apple</option>
<option value="1">Cherry</option>
<option value="2">Grape</option>
<option value="3">Lemon</option>
<option value="4">Watermelon</option>
</select>
<select id="flavor" name="flavorchoices">
<option value="0">Apple</option>
<option value="1">Cherry</option>
<option value="2">Grape</option>
<option value="3">Lemon</option>
<option value="4">Watermelon</option>
</select>
About this rule
This rule passes if ANY of the following are true:
- Element has an
aria-labelledbyattribute referencing an element that is visible to screen readers - Element has a non-empty
aria-labelattribute - Element has a non-empty
titleattribute - Element has an explicit
<label>element - Element has an implicit (wrapped)
<label>element