Provide accessible names for buttons and input elements
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
Buttons and inputs without accessible names are invisible to screen reader users. They can tab to them but will hear 'button' or 'input' with no description of what it does.
How to fix this issue
Give all buttons text content or use `aria-label` or `aria-labelledby` to describe their purpose.
Developer guidance
Avoid empty `<button>` or `<input type='image'>` without alt text. Always provide a meaningful label describing the action, not the visual style.
Code examples
Incorrect Implementation
<button></button>Correct Implementation
<button aria-label='Search'>🔍</button>
Trusted by organizations across Europe working toward WCAG and EAA conformance