Select element must have an accessible name

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.