In this Article
What are HTML Select Elements?
An HTML <select> element creates a dropdown list, allowing users to select one or more options from a predefined list. It is commonly used in forms for user input.
Sample HTML for a simple dropdown:
<form>
<label for="color">Choose a color:</label>
<select id="color" name="color">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</select>
</form>
Why Select Element Labels Matter
Labels for <select> elements are crucial for usability, accessibility, and clarity. They help users understand the purpose of the dropdown, making forms easier to navigate and interact with.
They ensure that assistive technologies, such as screen readers, can correctly announce the purpose of the dropdown to users with visual or cognitive impairments.
Best Practices
Each
selectelement should have only one label.All
idelements on a page should be unique to minimize user confusion.Ensure label text is concise, descriptive, and makes sense when read aloud to a screen reader user.
Test your forms with screen readers to confirm proper label functionality.
Preferred: Using the <label> Element (Explicitly)
The <label> tag associates descriptive text with a form field, using the for attribute to link the label to the field's id.
Example:
<label for="color">Choose a color:</label>
<select id="color" name="color">
<option value="black">Black</option>
<option value="white">White</option>
</select>
How it works: The for="color" attribute connects the label to the <input> field with the matching id="color".
Using the <label> Element (Implicitly)
You can also wrap the <select> element directly inside the <label> tag, creating an implicit association without needing the for attribute. The label is automatically associated with the select field it contains.
Example:
<label for="color">Choose a color:
<select id="color" name="color">
<option value="black">Black</option>
<option value="white">White</option>
</select>
</label>
Using the aria-label Attribute
If the select field has somehow been labeled visually, you may be able to use an aria-label to programmatically add an invisible, accessible name that the screen reader can read.
Example:
<select aria-label="Color" id="color" name="color">
<option value="black">Black</option>
<option value="white">White</option>
</select>
Using the aria-labelledby Attribute
The attribute aria-labelledby could be used if, for some reason, using a <label> tag would not function correctly due to styling or functionality.
The aria-labelledby attribute links the input to the element with id="search-label," using its content as the label. Example below.
<div id="hue">Color</div>
<select aria-labelledby="hue" id="color" name="color">
<option value="black">Black</option>
<option value="white">White</option>
</select>
Resources
The HTML Select element from mdn web docs
Labeling Controls - part of W3C Forms Tutorial
Learn More with WCAG
DubBot Flag: Select element must have an accessible name, Ensures select element has an accessible name
If you have questions, please contact our DubBot Support team via email at help@dubbot.com or via the blue chat bubble in the lower right corner of your screen. We are here to help!