Ensure Select Element Has An Accessible Name

Web accessibility standards state that each select element must have a programmatically associated label element.

Why It Matters

Screen readers require useful form labels to convey form field details to users. Adding a label to all form elements eliminates any confusion during the form completion process.

Fixing the Issue

Developers should programmatically associate labels with select elements. The recommended method is to use the label element and an explicit association using the for and id attributes.

Good Code Example

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 aria-labelledby instead:

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.

Bad Code Example

Test Cases

For more examples, visit the W3C’s GitHub’s ATC Rules library.