aria-name-missing-incorrect
The element’s name is missing or incorrect
Description
The accessible name of the element is either not present or does not suit the element’s intended purpose.
Why is it important?
Assistive technologies such as screen readers provide users with information about a user interface control, including its accessible name, when it receives focus.
For instance, a button with the text “Cancel” should be announced as “Cancel button” by a screen reader. For non sighted users, the “Cancel” text is critical to comprehend the purpose of the control.
Examples
-
Success:
- Using the
<label>
element with thefor
attribute. - Using
aria-label
attribute ortitle
attribute on the<input>
to provide a label when there is no visible label. - Using
aria-labelledby
attribute on the<input>
to reference a visible label. The value ofaria-labelledby
attribute is the id attribute value of the visible text label. - Wrapping the
form
element within the<label>
element. - The
<button>
element contains text content that is visible. - Using the
aria-label
attribute to provide an accessible name for the button. - The
<a>
element contains text content like visible text, offscreen text or alternative text on an<img>
element.
- Using the
-
Failure: Using generic accessible names like:
- Read more
- Click here
How to fix?
Provide an appropriate accessible name to the UI component using a method that suits the control’s type and conveys the purpose or function of the control for screen readers and other assistive technology users.
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
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!