Ensure every ARIA input field has an accessible name

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>