Input Accessible Name

Why It Matters

• Unlabeled fields are guessing games. A screen reader user encounters an empty text box with no context. Is it for a name? An email? A search query? They have no way to know without a proper label.
• Labels improve usability for everyone. Clicking a <label> element focuses its associated input. This gives all users — not just screen reader users — a larger click target, especially helpful on mobile.
• It reduces form errors. When users know exactly what each field expects, they fill out forms faster and make fewer mistakes. Clear labels save time on both sides.
• Voice control depends on it. Users who navigate by voice say the label name to focus a field. No label means no voice access to that input.

How to Fix It

1. Use a <label> element with a for attribute. This is the gold standard: <label for="email">Email Address</label><input id="email">. It creates a clear, programmatic connection between the label and the input.
2. Wrap the input inside the label. An alternative approach: <label>Email Address <input type="email"></label>. The association is implicit and no for/id pairing is needed.
3. Use aria-label when a visible label is not possible. For search fields or icon-only inputs where a visible label would clutter the design, add aria-label="Search this site" directly to the input.
4. Use aria-labelledby to reference existing text. If descriptive text already exists on the page (like a heading above a form section), point the input to it with aria-labelledby instead of duplicating the label.
5. Make sure every input type is covered. Check text inputs, selects, textareas, checkboxes, and radio buttons. It is easy to label the obvious fields and miss the less prominent ones.

Common Mistakes

• Using placeholder text as a label. Placeholder text disappears the moment a user starts typing and is not consistently announced by screen readers. It is a hint, not a label.
• Mismatched for and id values. The for attribute on the label and the id on the input must match exactly. A typo breaks the connection silently.
• Labeling with adjacent text only. Text sitting visually near an input is not programmatically associated with it. Screen readers do not infer relationships from visual proximity.
• Hiding labels with display: none. This removes the label from the accessibility tree entirely. If you need to visually hide a label, use a visually-hidden CSS class that keeps it available to screen readers.