Buttons must have discernible text
Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).
Why this matters and how to fix it
Why this matters
Assistive technologies require correct names, roles, and states to announce and operate controls reliably.
How to fix this issue
Use native controls where possible. For custom widgets, ensure accessible names, valid ARIA values, and no nested interactives.
Developer guidance
Document required props for names/roles/states. Ban nested interactive elements via lint rules.
Code examples
Incorrect Implementation
<button><svg aria-hidden="true"></svg></button>Correct Implementation
<button aria-label="Search"><svg aria-hidden="true"></svg></button>
Trusted by organizations across Europe working toward WCAG and EAA conformance