Buttons must have discernible text
How to Fix 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>
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
Buttons must have discernible text that clearly describes the destination, purpose, function, or action for screen reader users.
The input-button-name
rule separates functionality from the
button-name
rule to ensure that input buttons have discernible
text; advise relevant to input button names was incorrect for button elements.
The Algorithm (in simple terms)
Checks all buttons to ensure that they have a discernable, accessible name.