accessible-name

Ensure that interactive elements have an accessible name.

All user interface elements must have an accessible name.

Accessible names ensure that assistive technologies, like screen readers, can accurately identify and communicate interactive elements to users. Users of assistive technologies can navigate and interact with your website effectively if all interactive elements have accessible names.

You can use the aria-label attribute to describe the purpose of interactive elements. Also, you can use the aria-labelledby attribute to name visible text elements.

Example

In the following example code, the custom element doesn’t have an accessible name although it has an inner text ‘Click Me’. This code breaks the accessible-name rule as assistive technologies like screen readers cannot identify the element accurately.

The following sample code corrects the issue in the earlier example by adding an aria-label:

You can also solve the issue by using the aria-labelledby attribute as follows:

How to fix?

Follow these steps to fix any violations in the accessible-name rule:

• Use the aria-label attribute on interactive elements to describe its purpose.
• If a visible label exists, use the aria-labelledby attribute with the element’s id containing the visible text, to describe its purpose.
• Add a title attribute that describes the element’s purpose.
• Add inner text to interactive elements whenever possible. If not feasible, like for input elements, label it with a <label> tag and reference it appropriately.
• Set the role of non-interactive elements as “none” or “presentation”.

Reference

• Using aria-labelledby to provide a name for user interface controls
• Technique G108