Select element must have and accessible name

Effective form labels are required to make forms accessible. The purpose of form elements such as checkboxes, radio buttons, input fields, etcetera, is often apparent to sighted users, even if the form element is not programmatically labeled. Screen readers users require useful form labels to identify form fields. Adding a label to all form elements eliminates ambiguity and contributes to a more accessible product.

When labels for form elements are absent, screen reader users do not know the input data expectations. Screen readers cannot programmatically determine information about input objects without an established label relationship (or redundant text serving as a label).

Fixing the problem

Programmatically associate labels with select elements. The recommended method for most circumstances is to use the label element and an explicit association using the for and id attributes. The examples here are ordered from the most common acceptable solution to the least common acceptable solution.

<label for="state">State:</label>
<select id="state"></select>

The label can also be implicit by wrapping the <label> element around the select:

<label>State:
<select></select></label>

If the select is already labeled visually some other way, it may be acceptable to use aria-label to create an invisible text label for screen readers to read.

<select aria-label="State"></select>

An alternative method (sometimes used when adding a <label> tag would break functionality or styles, or when multiple labels apply to the same select), is to use aria-labelledby instead:

<div id="state">State:</div>
<select aria-labelledby="state"></select>

Also ensure that all id elements are unique on each page, and that the label text makes sense to someone listening to them with a screen reader.

When adding labels, be sure to avoid the following:

State:
<select></select>

This markup renders to produce a textbox with the words "State:" next to it. Sighted users have no problem associating the text with the select field. Nevertheless, this connection is not as clear for non-sighted users, especially as forms grow longer and more complex. This ambiguity can make errors more likely, especially when the information required is more complex than a State.

For detailed instructions on how to implement these various labelling methods, see the Automated Checks that run as a part of this rule.

Finally, ensure that each select element has only one label.