select-name
Web validation
A <select> control needs a programmatic name so assistive technology can announce its purpose and let people with disabilities choose an option confidently. The name usually comes from an associated <label>, but you can use aria-label or aria-labelledby if a visible label is impractical.
Pass Patterns
Explicit <label>
The visible label is correctly bound to the <select> through matching for / id attributes.
<label for="country">Country</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>Using aria-label
The aria-label attribute provides the accessible name. Note that this method is not recommended because the field will lack a visible label.
<select aria-label="Country" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>Fail Patterns
Missing name
With no associated <label> or ARIA attribute, assistive technology announces only “combobox,” leaving users without context.
<select name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>Unbound name
A visual caption exists, but it is not programmatically associated with the control.
<p>Country</p>
<select id="country" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>WCAG techniques
Sufficient techniques
- H44: Using label elements to associate text labels with form controls
- ARIA16: Using aria-labelledby to provide a name for user interface controls
- ARIA14: Using aria-label to provide an accessible name where a visible label cannot be used
Advisory techniques
Failure techniques
ACT Rules
Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page, open a screen reader, and move focus to the select element.
- Listen to what the reader announces.
Expected result: The reader says the control’s name (for example, “Country, combobox”) before listing options.
Actual result: Without a name, many readers announce only “combobox.”
Inspecting the browser dev-tools
- Open the Accessibility Tree panel.
- Select the
<select>element.
Expected result: The Name field shows the label text or ARIA value.
Actual result: If unnamed, Name is empty.
FAQ
How does this issue relate to 4.1.2 Name, role, value?
SC 4.1.2 requires every user-interface component to expose a name, role, and value through the accessibility API. An unnamed <select> fails this criterion because assistive technology cannot identify what the control represents.
Why is this issue marked as Critical?
Without an accessible name, people who rely on screen readers, voice control, or other assistive technologies cannot understand or operate the select field, preventing them from completing forms and tasks. Because it blocks basic interaction, the severity is critical.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 4.1.2 Name, Role, Value (A) | For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to assistive technologies. |
| EN 301 549 | 9.4.1.2 Name, Role, Value | Same as the WCAG text. |
| Section 508 | 1194.22(n) | When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. |
| 508 Trusted Tester | 1.3.1-programmatic-label, 5.C | The combination of the accessible name, accessible description, and other programmatic associations (e.g., table column and/or row associations) describes each input field and includes all relevant instructions and cues (textual and graphical). |