Buttons must have discernible text

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 with role="button" have one of the following characteristics:

Inner text that is discernible to screen reader users.

1. Non-empty aria-label attribute.
2. aria-labelledby pointing to element with text which is discernible to screen reader users.
3. role="presentation" or role="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>