Skip to main content

aria-input-field-name

ARIA custom controls for input must possess accessible names.

Severity: Serious

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

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback!

Talk to an Expert
Download Copy