ARIA input fields must have an accessible name
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.
Every input must have an accessible name; 'edit text' alone is insufficient.
Why this matters and how to fix it
Why this matters
Screen readers rely on an accessible name to convey the purpose of form fields. Without it, users hear only a generic role such as 'edit text', making form completion confusing or impossible for non-visual users.
How to fix this issue
Ensure every input has an accessible name. Prefer a visible `<label>` linked via `for` or `aria-labelledby`. Use `aria-label` only when a visible label is not feasible. The name should clearly describe the field’s purpose, e.g., 'Email address' or 'Search'.
Developer guidance
Missing names often occur in custom components that replace native inputs with `role='textbox'`. Always require a `label` or `name` prop for every input component to ensure accessibility. Use the GetWCAG automated scanner to detect and prevent inputs without accessible names.
Code examples
Incorrect Implementation
<div role="textbox"></div>Correct Implementation
<div role="textbox" aria-label="Search"></div>
<!-- Prefer visible label when possible -->Real-World Examples
Before
<div role="textbox"></div> <!-- Screen reader announces only 'edit text', no context -->After
<div role="textbox" aria-label="Username"></div> <!-- Screen reader announces 'Username, edit text' -->Manual testing
- 1. Identify all input elements and ARIA textboxes.
- 2. Verify each has a visible label, `aria-label`, or `aria-labelledby`.
- 3. Check that the label clearly describes the field’s purpose.
- 4. Test with a screen reader to confirm the accessible name is announced.
- 5. Add automated tests to catch missing accessible names in development.
Trusted by organizations across Europe working toward WCAG and EAA conformance