# ARIA input fields must have an accessible name.

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/accesslint/0.16/labels-and-names/aria-input-field-name
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

Elements with ARIA input roles like `combobox`, `listbox`, `searchbox`, `slider`, `spinbutton`, and `textbox` need accessible names so that assistive technology can announce what each field is for. When an ARIA input field lacks an accessible name, screen reader users hear something generic like "edit text" or "slider" with no indication of what information the field expects. This makes forms and interactive controls difficult or impossible to use without sight.

Native HTML form elements such as `<input>`, `<select>`, and `<textarea>` are commonly paired with `<label>` elements, but when ARIA roles override or replace native semantics, the standard `<label>` element may not create a programmatic association. In these cases, `aria-labelledby` or `aria-label` must be used to supply the accessible name.

This rule relates to WCAG 2.1 Success Criterion 4.1.2 (Name, Role, Value), a Level A requirement. SC 4.1.2 requires that all user interface components have a name that can be programmatically determined. Without a name, assistive technologies cannot convey the purpose of the control to the user.

## How to fix this

The best approach is to associate a visible text label with the ARIA input field using `aria-labelledby`. This keeps the visual label and the accessible name in sync, so all users receive the same information.

If a visible label is not present in the design, use `aria-label` to provide a text string directly on the element. This string is not displayed on screen but is read by screen readers.

Steps:

1. Identify the element that has an ARIA input role (`combobox`, `listbox`, `searchbox`, `slider`, `spinbutton`, or `textbox`).
2. Check whether a visible label exists nearby in the page.
3. If a visible label exists, give it an `id` attribute and point to it with `aria-labelledby` on the input element.
4. If no visible label exists, add an `aria-label` attribute with a clear, concise description of what the field expects.

## Examples

### Missing accessible name on a textbox

This custom textbox has no accessible name. A screen reader will announce it as "edit text" with no context.

```html
<div role="textbox" contenteditable="true"></div>
```

### Fixed with `aria-labelledby`

A visible label is associated with the textbox through `aria-labelledby`. Screen readers will announce "Username, edit text" or similar.

```html
<span id="username-label">Username</span>
<div role="textbox" contenteditable="true" aria-labelledby="username-label"></div>
```

### Fixed with `aria-label`

When no visible label is available, `aria-label` provides the accessible name directly.

```html
<div role="textbox" contenteditable="true" aria-label="Username"></div>
```

### Missing accessible name on a slider

This slider has no name. Screen readers announce it as "slider" without indicating what value it controls.

```html
<div role="slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
```

### Fixed slider with `aria-labelledby`

```html
<label id="volume-label">Volume</label>
<div role="slider"
  aria-labelledby="volume-label"
  aria-valuenow="50"
  aria-valuemin="0"
  aria-valuemax="100"
  tabindex="0">
</div>
```

### Missing accessible name on a searchbox

```html
<div role="searchbox" contenteditable="true"></div>
```

### Fixed searchbox with `aria-label`

```html
<div role="searchbox" contenteditable="true" aria-label="Search products"></div>
```

### Missing accessible name on a listbox

```html
<ul role="listbox">
  <li role="option">Red</li>
  <li role="option">Blue</li>
</ul>
```

### Fixed listbox with `aria-labelledby`

```html
<span id="color-label">Favorite color</span>
<ul role="listbox" aria-labelledby="color-label">
  <li role="option">Red</li>
  <li role="option">Blue</li>
</ul>
```

## Choosing between `aria-labelledby` and `aria-label`

Use `aria-labelledby` whenever a visible label exists on the page. It keeps the accessible name tied to visible text, which helps sighted screen reader users and avoids the maintenance problem of keeping two separate strings in sync. Use `aria-label` only when a visible label is not part of the design, such as a search field identified by an icon alone. Avoid using both on the same element; if both are present, `aria-labelledby` takes precedence and `aria-label` is ignored.