# Select element must have an accessible name

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/axe/4.11/select-name
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

When a `<select>` element lacks an accessible name, screen readers announce it as something generic like "combobox" or "listbox" with no context about what it represents. A sighted user might see nearby text like "Country" and understand the purpose, but that visual proximity means nothing to assistive technology unless a programmatic relationship exists between the text and the form control.

This issue critically affects users who are blind, have low vision, or have mobility impairments and rely on assistive technologies to interact with forms. Without a proper label, these users cannot determine what data a dropdown expects, making form completion error-prone or impossible.

## Related WCAG Success Criteria

This rule maps to **WCAG 2.0, 2.1, and 2.2 Success Criterion 4.1.2: Name, Role, Value (Level A)**, which requires that all user interface components have a name that can be programmatically determined. It also falls under **Section 508 §1194.22(n)**, which mandates that online forms allow people using assistive technology to access all field elements, directions, and cues needed for completion.

## How to Fix It

There are several ways to give a `<select>` element an accessible name, listed here from most preferred to least preferred:

1. **Explicit `<label>` with `for`/`id`** — The most common and recommended approach. Use the `for` attribute on the `<label>` to match the `id` of the `<select>`. This also gives sighted users a larger click target.

2. **Implicit `<label>` wrapping** — Wrap the `<select>` inside a `<label>` element. No `for`/`id` pairing is needed.

3. **`aria-labelledby`** — Point to the `id` of an existing visible text element that serves as the label. Useful when a traditional `<label>` would break layout or when multiple elements combine to form the label.

4. **`aria-label`** — Provide an invisible text label directly on the `<select>`. Use this only when no visible label text exists or is appropriate.

Whichever method you choose, make sure:

- The label text clearly describes what the user should select.
- Each `id` attribute is unique on the page.
- Each `<select>` has only **one** labeling method to avoid conflicts or confusion.

## Examples

### Incorrect: No Label Association

This places text near the `<select>` but creates no programmatic link between them. Screen readers will not announce "State" when the user focuses the dropdown.

```html
State:
<select>
  <option value="ny">New York</option>
  <option value="ca">California</option>
</select>
```

### Correct: Explicit `<label>` with `for` and `id`

The `for` attribute on the `<label>` matches the `id` on the `<select>`, creating a clear programmatic association.

```html
<label for="state">State:</label>
<select id="state">
  <option value="ny">New York</option>
  <option value="ca">California</option>
</select>
```

### Correct: Implicit `<label>` Wrapping

Wrapping the `<select>` inside the `<label>` element implicitly associates them.

```html
<label>
  State:
  <select>
    <option value="ny">New York</option>
    <option value="ca">California</option>
  </select>
</label>
```

### Correct: Using `aria-labelledby`

When visible text already exists elsewhere (e.g., in a heading or table cell), use `aria-labelledby` to reference it by `id`.

```html
<span id="state-label">State:</span>
<select aria-labelledby="state-label">
  <option value="ny">New York</option>
  <option value="ca">California</option>
</select>
```

### Correct: Using `aria-label`

When no visible label is present or appropriate, `aria-label` provides an accessible name directly. Note that this label is invisible to sighted users, so only use it when context is already visually clear.

```html
<select aria-label="State">
  <option value="ny">New York</option>
  <option value="ca">California</option>
</select>
```