ARIA inputs need accessible names

ARIA input fields must include an accessible name without being empty or broken

Every element that uses an ARIA input role must expose a non-empty accessible name.

This issue appears in custom widgets built with divs/spans using roles like combobox, listbox, searchbox, slider, spinbutton, and textbox.

It affects screen reader users and people who rely on voice control or other assistive tech to identify and operate controls.

Why It Matters

Without a name, assistive technology announces a control’s role but not its purpose. Users hear “textbox” or “slider” with no context and cannot proceed.

Users who operate interfaces with speech need a visible label that matches the accessible name to target the right control by voice.

Clear names also help users with cognitive disabilities by reducing ambiguity and confusion.

Common Causes

• Adding an ARIA role to a div/span with no aria-label or aria-labelledby.
• Using aria-labelledby that references an ID that does not exist or resolves to empty text.
• Setting aria-label to an empty or whitespace-only string.
• Assuming the HTML label element will name generic ARIA widgets (it does not label div-based roles).
• Relying only on placeholder text or icons for meaning.
• Letting visible labels drift from the accessible name, hurting voice input accuracy.

How to Fix

1. Prefer native form controls when possible.
   • Inputs, selects, and buttons support label elements and usually expose names correctly out of the box.
2. If using ARIA widgets, always provide an accessible name.
   • Use aria-labelledby to reference visible text near the control. This is preferred when a visible label exists.
   • Use aria-label only when there is no suitable visible label. Keep it short and clear.
3. Ensure IDs are valid and unique.
   • Every aria-labelledby reference must point to an existing node that contains meaningful text (not empty or whitespace).
4. Keep the visible label and accessible name consistent.
   • Recommendation: Match the accessible name to the on-screen label (WCAG 2.5.3 Label in Name) so voice commands work reliably.
5. Apply to ARIA input roles specifically.
   • combobox, listbox, searchbox, slider, spinbutton, textbox must all have an accessible name.
6. For sliders and spinbuttons, also define value attributes (recommended for completeness).
   • Include aria-valuemin, aria-valuemax, and aria-valuenow to communicate state, in addition to the name.

How to Test

Keyboard

• Tab to each ARIA input widget. Confirm a visible focus indicator appears.
• While focused, you should be able to identify the control’s purpose from the visible label.

Screen reader

• With NVDA or JAWS (Windows): Tab or navigate to each control. Confirm it announces role and a clear label (e.g., “Size, slider”).
• With VoiceOver (macOS/iOS): Move to each control. Verify the rotor announcement includes both role and the label.

Mobile/touch

• With TalkBack or VoiceOver on a phone, swipe to each control and listen for the role and label.
• Try a voice command or dictation to activate/edit a control by its visible label. It should work if the label matches the accessible name.

DevTools check

• In browser DevTools, open the Accessibility panel and inspect the element. Confirm the Name property is present and correct.

Good Example

A few ARIA input roles with accessible names. Structure is simplified to demonstrate labeling only.

<!-- combobox named via aria-labelledby -->
<p id="region-label">Select a region</p>
<div id="region-combobox" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="region-label">Midwest</div>

<!-- listbox named via aria-label -->
<div role="listbox" aria-label="Choose a shade">
  <div role="option" aria-selected="true">Teal</div>
  <div role="option">Olive</div>
</div>

<!-- searchbox named via aria-labelledby -->
<h3 id="ticker-search">Search tickers</h3>
<div role="searchbox" aria-labelledby="ticker-search" contenteditable="true"></div>

<!-- slider named via aria-labelledby -->
<label id="volume-label">Volume</label>
<div role="slider" aria-labelledby="volume-label" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"></div>

<!-- spinbutton named via aria-label -->
<div role="spinbutton" aria-label="Quantity" aria-valuemin="1" aria-valuemax="12" aria-valuenow="4"></div>

<!-- textbox named via aria-labelledby -->
<p id="nickname-label">Nickname</p>
<div role="textbox" aria-labelledby="nickname-label" contenteditable="true"></div>

Bad Example

Missing, empty, or broken names, and misuse of label with ARIA widgets.

<!-- empty aria-label (whitespace) -->
<div role="combobox" aria-label=" ">Option A</div>

<!-- aria-labelledby points to a non-existent element -->
<div role="listbox" aria-labelledby="nope-id"></div>

<!-- wrapping in a label does not name a div with ARIA role -->
<label>Phone
  <div role="textbox"></div>
</label>

<!-- label for on a div does not create an accessible name -->
<label for="txt1">City</label>
<div id="txt1" role="textbox"></div>

<!-- slider without any name -->
<div role="slider" aria-valuemin="0" aria-valuemax="10" aria-valuenow="5"></div>

<!-- searchbox with broken reference -->
<div role="searchbox" aria-labelledby="missing-title" contenteditable="true"></div>

Quick Checklist

• Every ARIA input role (combobox, listbox, searchbox, slider, spinbutton, textbox) has a non-empty accessible name.
• Prefer aria-labelledby with visible text; use aria-label only when no visible label exists.
• All aria-labelledby IDs exist, are unique, and resolve to meaningful text.
• The accessible name matches the visible label wording when possible (supports voice input).
• Do not rely on label elements to name generic ARIA widgets.
• Avoid placeholder-only or icon-only labels; provide text.
• Validate in DevTools: Name property is present and correct.
• Verify with a screen reader: role + label are both announced.