Select elements must have accessible names

WCAG 4.1.2
Name, Role, Value

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.

Why this matters and how to fix it

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`.

Automated detection · Manual review recommended

Developer guidance

Never rely on `placeholder` for labeling — placeholders disappear and are not consistently announced. In design systems, expose `label`, `aria-label`, or `aria-labelledby` as required props. For select-within custom dropdowns, ensure the trigger button itself has the accessible name.

Code examples

Incorrect Implementation

<select id="country"></select>

Correct Implementation

<label for="country">Country</label><select id="country"></select>

Real-World Examples

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. 1. Locate every <select> on the page.
  2. 2. Check if each select has one of the following:
  3. • A <label> with matching for/id
  4. • aria-label
  5. • aria-labelledby pointing to visible text
  6. 3. Turn on a screen reader and focus the select.
  7. • Expected announcement: '[Label], combo box'
  8. 4. If the label is only visible visually but not programmatically linked, fix by adding for/id.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance