Buttons must have discernible text
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.
Fixing the problem
Correct markup solutions
The button-name
rule has five markup patterns that pass test criteria:
<button id="text">Name</button> <button id="al" aria-label="Name"></button> <button id="alb" aria-labelledby="labeldiv"></button>
<div id="labeldiv">Button label</div> <button id="combo" aria-label="Aria Name">Name</button> <button id="buttonTitle" title="Title"></button>
-
Ensure that each
button
element and elements withrole="button"
have one of the following characteristics:- Inner text that is discernible to screen reader users.
-
Non-empty
aria-label
attribute. -
aria-labelledby
pointing to element with text which is discernible to screen reader users. -
role="presentation"
orrole="none"
(ARIA 1.1) and is not in tab order (tabindex="-1"
).
Incorrect markup solutions
The button-name
rule has six markup patterns that fail testing criteria:
<button id="empty"></button> <button id="val" value="Button Name"></button> <button id="alempty" aria-label=""></button> <button id="albmissing" aria-labelledby="nonexistent"></button> <button id="albempty" aria-labelledby="emptydiv"></button>
<div id="emptydiv"></div> <button id="buttonvalue" value="foo" tabindex="-1"></button>