Accessibility Insights

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

  • title attribute

Better

  • aria-label attribute
  • aria-labelledby attribute referencing visible text

Best

  • Explicit <label> element
  • Implicit (wrapped) <label> element

Example

 

Fail

This <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>
 

Pass

The <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>

About this rule

This rule passes if ANY of the following are true:

  • Element has an aria-labelledby attribute referencing an element that is visible to screen readers
  • Element has a non-empty aria-label attribute
  • Element has a non-empty title attribute
  • Element has an explicit <label> element
  • Element has an implicit (wrapped) <label> element

More examples