WCAG 3.3.2 — Labels or Instructions

What this requires

When content requires user input, the form must provide labels or instructions. "Labels" identify what each field is for; "instructions" cover constraints — required vs optional, expected format, character limits, allowed characters. Both must be visible and persistent — they have to remain on screen while the user is filling the field, not vanish on focus.

How AI coding tools fail this

The dominant failure: placeholder-as-label. AI assistants asked for "a clean login form" generate inputs with placeholder="Email" and no visible label. Once the user types a character, the placeholder disappears. Anyone returning to verify their input, or anyone using a screen magnifier zoomed past the field, loses the only context.

The second pattern: format requirements hidden in placeholder text or in an error message that only appears after submission. "Date format: DD/MM/YYYY" surfacing only when the user types 2026-05-19 and gets rejected.

The third: required-field markers that exist only as a colour change (red asterisk, red border). Without a visible "(required)" or a programmatic aria-required, screen-reader users have no way to know which fields are mandatory before submitting.

Passing examples

A visible label and a placeholder that hints at format:

<label htmlFor="email">Email</label>
<input
  id="email"
  type="email"
  placeholder="you@example.com"
  autoComplete="email"
  required
/>

Persistent format instructions outside the field:

<label htmlFor="dob">Date of birth</label>
<p id="dob-hint" className="text-sm text-muted-foreground">
  Format: DD/MM/YYYY
</p>
<input id="dob" type="text" aria-describedby="dob-hint" />

Edge cases

Required vs optional should be marked visibly and programmatically. Use required on the input and a visible "(required)" or asterisk + legend that says what the asterisk means.
Search inputs are the canonical exception people cite for placeholder-as-label. Even then, give the input an aria-label so the accessible name exists.
Field-level instructions (a hint about format or constraints) go in a sibling element referenced via aria-describedby. The description is announced after the label.
Inline validation is helpful but not a substitute for pre-input instructions. Tell the user the rules before they break them.
Compound fields (date picker with separate day/month/year inputs) need a <fieldset> with a <legend> to give the group a single accessible label, plus individual labels per part.

How Jeikin handles this

Jeikin's CLI scanner flags <input> elements with no associated <label>, aria-label, or aria-labelledby and maps each finding to WCAG 3.3.2 and 1.3.1. The MCP server reminds the connected AI tool that placeholders are not labels and returns the project's preferred label component when one exists.