• July 1, 2025

Ensuring ARIA Input Fields Have Accessible Names

Rule ID: aria-input-field-name
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Trusted Tester, EN 301 549

How to Fix the Problem

ARIA input fields such as those using role="combobox", listbox, searchbox", slider", spinbutton", and textbox" must include an accessible name that can be identified by assistive technologies like screen readers.

Use One of the Following Markup Patterns That Pass Testing:

1. Combobox with aria-label:

   html

   KopierenBearbeiten

   <div id="pass1" aria-label="country" role="combobox">England</div>


2. Listbox with aria-labelledby:

   html

   KopierenBearbeiten

   <p id="pass2Label">Select a color:</p>
<div id="pass2" role="listbox" aria-labelledby="pass2Label">
<div role="option">Orange</div>
</div>


3. Searchbox with aria-labelledby:

   html

   KopierenBearbeiten

   <p id="pass3Label">Search currency pairs:</p>
<div id="pass3"
role="searchbox"
contenteditable="true"
aria-labelledby="pass3Label"></div>


4. Slider with aria-label and value attributes:

   html

   KopierenBearbeiten

   <div id="pass4"
role="slider"
aria-label="Choose a value"
aria-valuemin="1"
aria-valuemax="7"
aria-valuenow="2"></div>


5. Spinbutton with aria-label and value attributes:

   html

   KopierenBearbeiten

   <div id="pass5"
role="spinbutton"
aria-valuemin="0"
aria-valuemax="10"
aria-valuenow="8"
aria-label="Enter quantity:"></div>


6. Textbox with aria-labelledby:

   html

   KopierenBearbeiten

   <label id="foo">
foo
<div id="pass6" role="textbox" aria-labelledby="foo"></div>
</label>


Avoid These Incorrect Markup Patterns:

• Using empty aria-label values:

  html

  KopierenBearbeiten

  <div id="fail1" aria-label=" " role="combobox">England</div>


• Referencing non-existent labels:

  html

  KopierenBearbeiten

  <div id="fail2" aria-labelledby="non-existing" role="combobox">England</div>


• Relying on implicit labels with unsupported elements:

  html

  KopierenBearbeiten

  <label>
first name
<div id="fail3" role="textbox"></div>
</label>


• Using label for with div-based roles:

  html

  KopierenBearbeiten

  <label for="fail4">first name</label>
<div role="textbox" id="fail4"></div>


• Missing accessible name entirely:

  html

  KopierenBearbeiten

  <div id="fail5" role="combobox">England</div>
<div id="fail6" role="listbox" aria-labelledby="label-does-not-exist">
<div role="option">Orange</div>
</div>


Key Point: ARIA roles on elements that are not native form controls (e.g., div) must have explicitly defined accessible names via aria-label or aria-labelledby.

Why it Matters

Screen reader users rely on accessible names to understand the purpose and context of form controls. Without clear and descriptive naming:

• Users may be confused about the role or function of the element.

• Navigation becomes inefficient or impossible.

• The form field may be skipped altogether, leading to incomplete submissions or data entry errors.

By ensuring every ARIA input field has a programmatically determinable name, you improve the experience for assistive technology users and meet fundamental accessibility requirements.

Rule Description

This rule checks that all input fields defined with ARIA roles (combobox, listbox, searchbox, slider, spinbutton, and textbox) have an accessible name, making them understandable and usable by screen reader users.

The Algorithm (in Simple Terms)

• If an element has a supported ARIA input field role…

• Then check for the presence of a non-empty accessible name.

• This can be provided via aria-label or aria-labelledby.

If no name is present, the element fails the rule.