form-inputs-require-labels

Summary

Every form control (<input>, <textarea>, <select>) must have an accessible name. The best way is an explicit <label>.

Rationale

• Click Target: Clicking the label focuses the input, improving usability for mouse/touch users.
• Screen Readers: Screen readers announce the label when the input is focused. Without it, users don't know what to enter.

Guidance

1. Explicit Label: Use <label for="id"> and <input id="id">.
2. Implicit Label: Nest the input inside the label: <label>Name: <input></label>.
3. Hidden Label: If a visual label isn't desired (e.g., search bar), use aria-label="Search" or <label class="sr-only">.

Examples