Ensure buttons have discernible text

Buttons should have clear and descriptive text to ensure they are accessible to all users, including those using assistive technologies.

About This Rule

This rule checks that all buttons have discernible text that clearly describes their purpose, function, or action for screen reader users.

Why It Matters

Screen reader users rely on button labels to understand their purpose. Without discernible text, users may be unable to interact with buttons effectively, leading to a poor user experience.

How to Fix

Ensure that each <button> element or element with role="button" has one of the following:

• Inner text that is discernible to screen reader users.
• A non-empty aria-label attribute.
• An aria-labelledby attribute pointing to an element with discernible text.
• role="presentation" or role="none" (ARIA 1.1) and is not in the tab order (tabindex="-1").

Correct Examples

<!-- Button with inner text -->
<button>Submit</button>

<!-- Button with aria-label -->
<button aria-label="Close"></button>

<!-- Button with aria-labelledby -->
<button aria-labelledby="saveLabel"></button>
<div id="saveLabel">Save</div>

<!-- Button with title attribute -->
<button title="Help"></button>

Incorrect Examples

<!-- Button without discernible text -->
<button></button>

<!-- Button with empty aria-label -->
<button aria-label=""></button>

<!-- Button with non-existent aria-labelledby reference -->
<button aria-labelledby="nonexistent"></button>

<!-- Button with aria-labelledby pointing to empty element -->
<button aria-labelledby="emptydiv"></button>
<div id="emptydiv"></div>