Provide accessible names for buttons and input elements
Content available in English only.
Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
If a user can press it, they must know what it does.
Why this matters and how to fix it
Why this matters
Screen reader users rely on accessible names to understand what a control does. If a button or input has no name, the screen reader announces only its type (e.g., 'button' or 'edit text'), forcing users to guess its purpose. This leads to confusion, errors, and broken task flows.
How to fix this issue
Ensure each button or input has a meaningful accessible name. Use visible text whenever possible. If the control is icon-only or visually styled, provide a descriptive name using `aria-label`, `aria-labelledby`, or `alt` (for `type='image'`).
Developer guidance
This issue frequently occurs in icon-only buttons, custom UI components, and when default placeholders are mistaken for labels. Never rely on placeholder text for labeling — placeholders are not accessible names. In design systems, require a `label` or `aria-label` prop for buttons and inputs.
Code examples
Incorrect Implementation
<button></button>Correct Implementation
<button aria-label="Search">🔍</button>Real-World Examples
Before
<button><svg aria-hidden="true" focusable="false"><use href="#icon-download"></use></svg></button>
<!-- Screen reader announces: 'button' → unclear purpose -->After
<button aria-label="Download file"><svg aria-hidden="true" focusable="false"><use href="#icon-download"></use></svg></button>
<!-- Screen reader announces: 'Download file, button' → clear purpose -->Manual testing
- 1. Turn on a screen reader (NVDA, VoiceOver, TalkBack).
- 2. Use Tab or Arrow keys to navigate through buttons and inputs.
- 3. Listen to the announcement for each control:
- • Expected: A clear description of the action (e.g., 'Search, button').
- • Failure: Control is announced only as 'button', 'edit text', or generic role with no meaning.
- 4. Inspect the element in DevTools → Accessibility pane to confirm the 'Accessible Name' field is present and correct.
- 5. If the control is icon-only, verify the label comes from `aria-label` or `aria-labelledby` — not placeholder text.
- 6. Repeat test in high zoom or reduced-motion modes to verify the label is not visually lost or hidden.
Trusted by organizations across Europe working toward WCAG and EAA conformance