Provide accessible names for select elements

Without an accessible name, screen reader users will not know what information the dropdown is asking for, making forms impossible to complete.

Quick Reference

• Use the <label> element with a matching for attribute for every <select>
• Alternatively, use aria-label or aria-labelledby if a visible label is not possible
• Avoid using the first option as a replacement for a proper label

Check

Check that every <select> element in your forms has a valid accessible name or linked label.

Fix

Add a <label> element with a for attribute that matches the id of the <select> tag.

Explain