Select elements must have accessible names
Content available in English only.
Accessibility isn't just about avoiding violations — it's about ensuring that everyone can use your product with confidence. This guide explains each rule's intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
If it asks the user to choose, it must tell them **what** they are choosing.
Overview
Why this matters
Without an accessible name, screen reader users only hear “combo box” or “menu” with no indication of what information is expected. This makes it impossible to complete forms reliably, especially when multiple selects appear together (e.g., country, state, timezone, role).
How to fix this issue
Associate the <select> with a visible <label> using the `for` and `id` attributes. If a visible label is not appropriate, provide an accessible name using `aria-label` or `aria-labelledby`.
Developer Guidance
Native `<select>` does not support placeholder text as a naming strategy. In design systems, require explicit label wiring and for custom combobox/select widgets ensure the trigger control receives the same accessible name and state announcements.
Code Examples
Incorrect Implementation
<select id="country"></select>Correct Implementation
<label for="country">Country</label><select id="country"></select>Real-World Implementation
Before
<label>Country</label>
<select></select>
<!-- Screen reader can't connect label to select → 'Menu, collapsed' -->After
<label for="country">Country</label>
<select id="country"></select>
<!-- Screen reader: 'Country, combo box, collapsed' -->CSS Example (Guidance)
/* Style labels, do not remove them. */
label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
}Manual Testing
- 1. Locate every native select and custom select/combobox trigger.
- 2. Verify each has a programmatic name via `<label for>`, `aria-label`, or `aria-labelledby`.
- 3. Focus each control with a screen reader and confirm announcement includes meaningful label + role/state.
- 4. Ensure visible label and computed name are consistent.
- 5. Fix unlabeled controls by wiring explicit label association.
Related Robust Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance