Ensure Buttons Have Discernible Text
Blind
Hearing
WCAG 2.1 Level A
WCAG states that buttons must have discernible text that clearly describes the destination, purpose, function, or action to users who rely on screen readers.
The input-button-name rule separates functionality from the button-name rule, ensuring that input buttons have clear text.
Screen reader users are not able to understand the purpose of elements with role=”link”, role=”button”, or role=”menuitem” if they don’t have an accessible name.
Ensure that all buttons have a clear accessible name.
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>
Copy
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>
Copy
For more examples, visit the following pages in the W3C’s GitHub’s ATC Rules library: