ARIA commands must have an accessible name
How to Fix the Problem
Correct markup solutions
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>
-
Ensure that each element with
role="link",role="button", orrole="menuitem"has one of the following characteristics:- Inner text that is discernible to screen reader users.
- Non-empty
aria-labelattribute. -
aria-labelledbypointing to element with text which is discernible to screen reader users.
Incorrect markup solutions
The aria-command-name rule has four markup patterns that fail
testing criteria:
<div role="link" id="empty"></div>
<div role="button" id="alempty" aria-label=""></div>
<div role="menuitem" id="albmissing" aria-labelledby="nonexistent"></div>
<div role="link" id="albempty" aria-labelledby="emptydiv"></div>
<div id="emptydiv"></div>
Why it Matters
Screen reader users are not able to discern the purpose of elements with
role="link", role="button", or
role="menuitem" that do not have an accessible name.
Rule Description
ARIA command elements must have discernible text that clearly describes the destination, purpose, function, or action for screen reader users.
Note: When testing with RGAA, an issue reported by this rule may need to be mapped to a different RGAA test such as 6.2.1 for links.
The Algorithm (in simple terms)
Checks all elements with role="link", role="button",
or role="menuitem" to ensure that they have a discernable,
accessible name.
