select element must have an accessible name
How to Fix 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
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:
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.
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
<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:
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.
Why it Matters
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).
Each select element must have a programmatically associated label element.
The Algorithm (in simple terms)
Ensures that every select element has a programmatically associated label.