Rule ID: ace-aria-input-name

Confirm ARIA-based input fields like textbox and combobox have accessible names

WCAG 2.0 (A) - WCAG 2.2 (A) 4.1.2: Name, Role, Value Blind Deafblind Mobility Legal Risk

What This Rule Checks

ARIA input fields such as combobox, searchbox, slider, and others must have accessible names or labels to provide information to assistive technology users. Without proper labeling, screen readers and other technologies won’t be able to convey the purpose of the input field to users, leading to confusion and an inaccessible experience.

Who Is Affected

This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.

Why This Matters

ARIA input widgets without names are announced as “textbox” or “combobox” with no context. Screen reader users cannot distinguish between multiple unlabeled inputs on a form. This is a WCAG 4.1.2 Level A failure.

How to Fix

To ensure input fields are accessible, follow these guidelines:

Provide Descriptive Labels: Use aria-label, aria-labelledby, or ensure the input field is associated with a label element to give it an accessible name.

Ensure Labels Are Not Empty: Make sure that aria-label is not set to an empty string and aria-labelledby points to an existing, discernible element.

Use Supported Elements: Ensure that the role of the input field is supported by the associated ARIA attributes.

Code Examples

Incorrect Markup Solutions:

Code example

<!-- ARIA textbox with no accessible name -->
<div role="textbox" contenteditable="true"></div>

<!-- ARIA combobox with no label -->
<div role="combobox" aria-expanded="false">
  <input type="text">
</div>

Copy

Correct Markup Solutions:

Code example

<!-- ARIA textbox with accessible name -->
<label id="search-label">Search</label>
<div
  role="textbox"
  contenteditable="true"
  aria-labelledby="search-label">
</div>

<!-- ARIA combobox with label -->
<label for="city-input">City</label>
<div
  role="combobox"
  aria-expanded="false"
  aria-label="City selector">
  <input type="text" id="city-input">
</div>

Copy

Common Mistakes to Avoid

Relying on placeholder text as the only accessible name for custom inputs.
Using aria-describedby instead of aria-labelledby (describedby is supplemental, not the name).
Forgetting to label custom ARIA widgets when switching from native inputs.

AI Auto-Fix Available

This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.

Tip: Remember the first rule of ARIA: don’t use ARIA if a native HTML element can provide the same semantics. Native elements come with built-in keyboard handling and screen reader support that ARIA cannot replicate.

Related WCAG Criteria

4.1.2: Name, Role, Value