ARIA input fields must have an accessible name.

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.

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

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

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

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

Fixed slider with aria-labelledby

<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

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

Fixed searchbox with aria-label

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

Missing accessible name on a listbox

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

Fixed listbox with aria-labelledby

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

Learn more:

W3C Reference

Understanding Success Criterion 4.1.2: Name, Role, Value

→

W3C Reference

WAI-ARIA Roles, States, and Properties

→

W3C Reference

Using aria-label to provide labels for objects

→