Ensure all input fields have accessible names
Screen readers announce the accessible name of a focused input before the user types. Without a name, VoiceOver reads 'text field' and NVDA reads 'edit' with no context, making it impossible for blind users to fill out forms correctly. Voice control users (Dragon NaturallySpeaking) also need the visible label text to match the accessible name so they can say 'click Email Address' to move focus to the field.
Quick Reference
- Every
<input>,<textarea>, and<select>must have a programmatically associated accessible name - Preferred: associate a
<label>via matchingfor/idattributes - Alternatives:
aria-label(inline string) oraria-labelledby(references another element'sid) - Placeholder text is not an accessible name — it disappears on input and is not reliably announced
- Applies to WCAG 2.1 SC 1.3.1 (Info and Relationships) and SC 4.1.2 (Name, Role, Value)
Check
Find all <input> (excluding type='hidden'), <textarea>, and <select> elements. For each, check that one of these is true: (1) a <label> element with a for attribute matching the input's id exists, (2) the input has a non-empty `ari…