Ensure Select Element Has An Accessible Name

Yotam Flohr
Researcher
Blind Hearing Mobility
WCAG 2.1 Level A

Written and researched for humans by humans

Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments: 0
Your entire domain
Get detailed instructions on how to resolve every accessibility issue on your website

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

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

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

Code example
<label>State: <select></select></label> Copy

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.

Code example
<select aria-label="State"></select> Copy

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:

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

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

Code example
State: <select></select> Copy

Test Cases

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