Form elements should have a visible label

WCAG 3.3.2
Labels or Instructions

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

Placeholders disappear — labels do not. Every form field needs a real label.

Why this matters and how to fix it

Why this matters

Screen reader and keyboard-only users rely on labels to understand the purpose of form controls. If a form field has no visible label, the user may hear only 'edit text' or 'input' with no context, making it unclear what information is required.

How to fix this issue

Provide a visible text label using `<label for="...">` that describes the input’s purpose. If visual label placement is constrained by design, keep the label but style it; do not remove it. If necessary, supplement or replace with `aria-label` or `aria-labelledby` to ensure a programmatic accessible name.

Automated detection · Manual review recommended

Developer guidance

Placeholders are not labels — placeholders disappear during typing, are not reliably read aloud, and offer insufficient context. In design systems, require a `label` prop for every form component. For icon-only form elements, enforce `aria-label` or `aria-labelledby`.

Code examples

Incorrect Implementation

<input id="email">

Correct Implementation

<label for="email">Email</label>
<input id="email">

Real-World Examples

Before

<input type="password" placeholder="••••••"> <!-- Screen reader: 'edit text' → no context -->

After

<label for="password">Password</label>
<input id="password" type="password"> <!-- Screen reader: 'Password, edit text' -->

CSS Example (Guidance)

/* If the label should be visually minimal, style it — do not remove it */
label {
  font-size: 0.875rem;
  opacity: 0.85;
  display: block;
  margin-bottom: 0.25rem;
}
/* For visually-hidden labels (only when necessary): */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

Manual testing

  1. 1. Turn on a screen reader (NVDA, VoiceOver, JAWS, or TalkBack).
  2. 2. Navigate through the form using Tab.
  3. • Expected: Each field is announced with its label (e.g., 'Email, edit text').
  4. • Failure: Field is announced only as 'edit text', 'textbox', or generic control type.
  5. 3. Inspect the input in DevTools → Accessibility → 'Name'.
  6. • Confirm the accessible name matches the visible label.
  7. 4. If a label is visually hidden, verify it uses a proper visually-hidden utility class (not `display:none` or `visibility:hidden`).
  8. 5. For icon-only input controls, ensure `aria-label` or `aria-labelledby` is present and meaningful.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance