aria-input-field-name

ARIA input fields must have accessible names.

Description

<div> and <span> elements are sometimes used for inputs instead of the regular semantic inputs such as <button>. To provide the intended semantics, the ARIA role attribute is employed. ARIA input fields have the following ARIA roles - combobox, searchbox, textbox, listbox, slider and spinbutton. To ensure that Screen readers interpret these elements as inputs and effectively communicate their purpose, it is crucial to assign an accessible name to these elements.

Why is it important?

Assistive technologies rely on accessible names to label, announce, and enable interactions with interactive user interface elements such as buttons, links, and input fields. When these elements do not possess a valid accessible name, assistive technologies are unable to properly parse and accurately read the content, leading to a loss of functionality. The accessible name serves as a vital component for ensuring accurate accessibility support and usability for individuals using assistive technologies.

Examples

• Success:

  • <div> element with role="combobox" and aria-label="goodLabel". Assistive technology users can understand the purpose of this element.

• Failure:

  • <div> element with role="combobox" and aria-label="". This does not have an accessible name.

How to fix?

Ensure that the element has any one of the following:

• An aria-labelledby attribute that references elements that are visible to screen readers.
• A non-empty title attribute
• A non-empty aria-label attribute

Tags

cat.aria, wcag2a, wcag412, ACT

References

• WCAG 4.1.2: Name, Role, Value
• Deque University: aria-input-field-name
• Accessibility Insights: aria-input-field-name
• Evinced Digital Accessibility Knowledge Base: aria-input-field-name