Back to Learn
Pulseaccessibility

Select Elements Have Associated Labels

What This Audit Checks

This audit verifies that every <select> element has an associated label via <label>, aria-label, or aria-labelledby. Without a label, screen reader users cannot determine what the dropdown is for.

Why It Matters

Select dropdowns often contain options that only make sense in context. A dropdown with options "Small", "Medium", "Large" is meaningless without a label indicating it controls "Shirt size" or "Font size."

How to Fix It

  • Use a <label> element with a for attribute matching the select's id.
  • Use aria-label for selects where a visible label is not part of the design.
  • Use aria-labelledby to reference existing visible text.
  • Don't use the first <option> as a label substitute. A disabled placeholder option like "Select a country" is helpful but not a replacement for a proper label.
<!-- Bad: no label -->
<select id="country">
  <option>United States</option>
  <option>Netherlands</option>
</select>

<!-- Good: explicit label -->
<label for="country">Country</label>
<select id="country">
  <option>United States</option>
  <option>Netherlands</option>
</select>

How Pulse Tracks This

Pulse flags this audit in your Lighthouse accessibility score. When the audit fails, Pulse shows which elements triggered it so you can fix them directly.

Resources