ARIA items do not have accessible names
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.
- title attribute
- aria-label attribute
- aria-labelledby attribute
- Inner text that’s available to assistive technologies (not marked with display: none or aria-hidden="true")