Accessibility

ARIA commands must have an accessible name

The behavior and purpose of controls on your web page are important to screen readers and other assistive technologies. In HTML controls such as buttons and radio groups, that information is built in. However, you will need to provide ARIA roles and attributes for custom controls you create.

A user interface object with an accessible name is one whose words or phrases are coded in a way that assistive technologies can associate with the object.

Objects can then be referred to by name instead of by type in assistive technologies.

To be announced properly by assistive technologies, both built-in HTML controls and custom ARIA controls must have accessible names that convey their purpose.

Fixing the problem

The aria-command-name rule has four markup patterns that pass test criteria:

<div role="link" id="al" aria-label="Name"></div>
<div role="button" id="alb" aria-labelledby="labeldiv"></div>
<div role="menuitem" id="combo" aria-label="Aria Name">Name</div>
<div role="link" id="title" title="Title">
</div>

For each element with "role="button", role="link", or role="menuitem", provide an accessible name using one of the following methods.

Good
- title attribute
Better
- aria-label attribute
- aria-labelledby attribute
Best
- Inner text that’s available to assistive technologies (not marked with display: none or aria-hidden="true")