Label every form field (WCAG 1.3.1 / 4.1.2)

Every input, select, and textarea needs a programmatically associated label.

Why it matters

Without a real label, screen-reader users don't know what to type, and clicking the label text won't focus the field. A placeholder is not a label — it disappears on input.

How to fix it

Associate a <label> via for/id, wrap the input in a label, or use aria-label / aria-labelledby when a visible label isn't possible.

<!-- Fails: placeholder only -->
<input type="email" placeholder="Email">

<!-- Passes -->
<label for="email">Email</label>
<input type="email" id="email">

Related guides

• Fix low colour contrast (WCAG 1.4.3) 1.4.3 Contrast (Minimum)
• Add text alternatives to images (WCAG 1.1.1) 1.1.1 Non-text Content
• Give links a discernible name (WCAG 2.4.4) 2.4.4 Link Purpose / 4.1.2 Name, Role, Value
• Give buttons a discernible name (WCAG 4.1.2) 4.1.2 Name, Role, Value

These guides cover automated checks (~30–40% of WCAG criteria). A full audit also needs manual review.