Select elements must have a label

Rule select-name · Forms · impact critical · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

A <select> with no label leaves the user guessing what the choice controls.

How to fix#

Associate a visible <label> with the select through for/id, or wrap the select inside the <label>. When no visible label is possible, aria-label or aria-labelledby pointing at existing visible text also names it. A title attribute supplies a name only as a last resort and is flagged separately as a weak label. A first <option> such as "Choose a country" is not a label, and neither is text placed next to the select without an association.

Example#

<select><option>UTC</option></select>

<label for="tz">Timezone</label><select id="tz"><option>UTC</option></select>

WCAG success criteria#

4.1.2 Name, Role, Value — Level A#

Every UI component must expose a correct name, role, and (where relevant) state/value to assistive technology.

Understanding 4.1.2

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Section 508 Trusted Tester ACT

References#

• W3C — Forms Tutorial