Accessibility Insights

Back to Info and Examples for Accessibility Insights for Web

aria-input-field-name

Custom ARIA input fields must communicate their complete names to assistive technologies.

Why it matters

Every custom input field must have an accessible name that communicates its specific purpose.

A custom ARIA input field might be based on an element (such as <div>) that isn't supported by <label> elements. Browsers will not associate a <label> element with any element that is not a labelable element in HTML. This is true even if the element's role were to be changed to match the implicit ARIA role of a labelable element. For instance, while an <input type="text"> is a labelable element, a <div role="textbox"> is not. As a result, if a <label> element references an unsupported element, its text will not be used to name the referenced custom input field, and thus will not be exposed available to assistive technologies. If such a <label> contains a meaningful part of the custom input field's name, people who use assistive technologies won't know its complete name. They might find it difficult to distinguish among elements with similar names.

How to check

Inspect the element using the Accessibility pane in the browser Developer Tools to verify that the field's accessible name is complete without the associated <label>.

If the element's accessible name is complete without the associated <label> text, then no changes are needed.

How to fix

Provide the complete accessible name using ONE of the following methods:

Good

  • title attribute

Better

  • aria-label attribute

Best

  • aria-labelledby attribute

Example

 

Fail

A <div> functions as a slider. Part of its name is contained only in a <label> element. Because <div> elements aren't supported by <label> elements, assistive technologies won't have access to, and thus won't announce the <label> text. Assistive technology users won't know they're being asked for a shirt size.
<label for="field1">Shirt size</label>
<div id="field1" role="slider" aria-label="women's">...</div>
 

Pass

The element's complete name is provided using an aria-labelledby attribute. Everyone will understand what they are selecting.
<p id="field1label">Women's shirt size</p>
<div id="field1" role="slider" aria-labelledby=
"field1label">...</div>

About this rule

Instances need review if ALL of the following are true:

  • Element has one of the following role attribute values:
    • combobox
    • listbox
    • searchbox
    • slider
    • spinbutton
    • textbox
  • Element has an accessible name provided by an aria-label, aria-labelledby, or title attribute
  • Element's id is referenced by a <label> element
  • Element's type is not labelable
  • <label> contains text that isn't included in the element's accessible name

More examples

Understanding Success Criterion 4.1.2 Name, Role, Value