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 the for attribute.
  • Using aria-label attribute or title 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 of aria-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.
• 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

• WCAG 4.1.2: Name, Role and Value
• Using generic phrases as accessible name