Accessibility Insights

Back to Info and Examples for Accessibility Insights for Web

aria-input-field-name

ARIA input fields must have accessible names.

Why it matters

An ARIA input field is a custom control that allows users to provide text input. ARIA input fields are identified by the following ARIA roles:

  • combobox
  • listbox
  • searchbox
  • slider
  • spinbutton
  • textbox

An accessible name is a word or phrase coded in a way that assistive technologies can associate it with a specific user interface object. Assistive technologies can then refer to the object by name, not just by type. Unlike a standard HTML control, an ARIA input field requires additional markup to ensure it has an accessible name that conveys its purpose to users of assistive technologies.

How to fix

Provide an accessible name for each ARIA input field using ONE of the following methods.

Good

  • title

Better

  • aria-label

Best

  • aria-labelledby

Example

 

Fail

Although visible text precedes this listbox, the text is not programmatically associated with the listbox. As a consequence, the listbox does not have an accessible name. People who use assistive technologies don’t 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>

About this rule

This rule passes if:

  • ANY of the following are true:
    • Element has an aria-labelledby attribute that references elements that are visible to screen readers
    • Element has a non-empty aria-label attribute
    • Element has a non-empty title attribute
  • AND the following is true:
    • There is no mismatch between the element’s <label> and its accessible name

More examples

Understanding Success Criterion 4.1.2: Name, Role, Value