aria-input-field-name

ARIA custom controls for input must possess 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.

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

References

• WCAG 4.1.2: Name, Role, Value
• Accessibility Insights: aria-input-field-name