---
title: ARIA Input Field Name | Accessibility Rule
description: ARIA input fields must have an accessible name
source_url:
  html: https://testingbot.com/support/accessibility/web/rules/aria-input-field-name
  md: https://testingbot.com/support/accessibility/web/rules/aria-input-field-name/index.md
---
# Ensure every ARIA input field has an accessible name

Rule ID: aria-input-field-nameUser Impact: seriousGuidelines: WCAG 2.0

ARIA input fields must have accessible names.

## About This Rule

This rule passes if any of the following are true:

- The element has an `aria-labelledby` attribute that references elements visible to screen readers.
- The element has a non-empty `aria-label` attribute.
- The element has a non-empty `title` attribute.

There should be no mismatch between the element's `<label>` and its accessible name.

## Why It Matters

An ARIA input field is a custom control that allows users to provide text input. These fields are identified by roles such as `combobox`, `listbox`, `searchbox`, `slider`, `spinbutton`, and `textbox`. An accessible name is a word or phrase coded in a way that assistive technologies can associate with a specific user interface object. This enables assistive technologies to refer to the object by name, not just by type. Unlike standard HTML controls, ARIA input fields require additional markup to ensure they have accessible names that convey their purpose to users of assistive technologies.

## How to Fix

Provide an accessible name for each ARIA input field using one of the following methods:

- Best: `aria-labelledby` attribute
- Better: `aria-label` attribute
- Good: `title` attribute

### Example

#### Fail

Although visible text precedes this listbox, the text is not programmatically associated with the listbox. Because of this, the listbox does not have an accessible name. Users who use assistive technologies do not know the purpose of the listbox.

    <span>Select a service level:</span>
    <ul id="option_list" tabindex="0" role="listbox">
      <li id="service1" role="option">Level 1</li>
      <li id="service2" role="option">Level 2</li>
      <li id="service3" role="option">Level 3</li>
    </ul>

#### Pass

An `aria-labelledby` attribute is used to make the visible text into an accessible name. Everyone knows its purpose.

    <span id="select_level">Select a service level:</span>
    <ul id="option_list" tabindex="0" role="listbox" aria-labelledby="select_level">
      <li id="service1" role="option">Level 1</li>
      <li id="service2" role="option">Level 2</li>
      <li id="service3" role="option">Level 3</li>
    </ul>

## Other Rules

Interested in other web accessibility rules? Please see these other rules:

- [aria-meter-name](https://testingbot.com/support/accessibility/web/rules/aria-meter-name)
- [aria-progressbar-name](https://testingbot.com/support/accessibility/web/rules/aria-progressbar-name)
- [aria-prohibited-attr](https://testingbot.com/support/accessibility/web/rules/aria-prohibited-attr)
- [aria-required-attr](https://testingbot.com/support/accessibility/web/rules/aria-required-attr)
- [aria-required-children](https://testingbot.com/support/accessibility/web/rules/aria-required-children)