Free scanFree scan

Glossary · Code

Form label

By Published

Definition: A form label tells people what belongs in a field – "Email address", for example. It is accessible when it is visible and tied to the field in the code, so screen readers read it out with the field. Placeholder text inside the field does not replace it [1][2].

German: Formularbeschriftung · Also: label · Last reviewed: 27 September 2026

Why it matters

Forms are often where people want to get something done: order, book, sign up. Without a label, a blind person hears only "edit text, blank" and has to guess. A visible label also helps people with cognitive disabilities, partially sighted people who zoom in a long way, and anyone coming back to a half-completed form.

The link in the code has a second benefit: clicking the label moves focus into the field. For small checkboxes, that makes the target much larger.

Which WCAG criteria are involved

  • 1.3.1 Info and Relationships: the relationship between label and field must be in the code, not only visible side by side.
  • 3.3.2 Labels or Instructions: where input is required, there are labels or instructions – for a date format, say.
  • 4.1.2 Name, Role, Value: the field has an accessible name.
  • 2.5.3 Label in Name: the visible text is part of the accessible name, so voice control works.

Common mistakes

  • Placeholder only: it disappears as you type, often has too little contrast, and is not reliably announced as the name by every screen reader.
  • A label that is not linked: a <span> above the field looks like a label but isn't one.
  • Groups without a heading: "Yes" and "No" radio buttons without <fieldset> and <legend> – yes to what?
  • Required fields marked only with a red asterisk and no explanation.

In code

<!-- No label: a placeholder only -->
<input type="email" placeholder="Email">
<!-- Visible and linked -->
<label for="email">Email address</label>
<input id="email" type="email"
       autocomplete="email" required>

For groups, wrap the options in <fieldset> and put the shared question in <legend>.

How Reviseberg handles it

Reviseberg uses axe-core to find fields without an accessible name (rule label) and select menus with no label (select-name). Whether a label is understandable, or whether a format hint is missing, is not something any rule can decide, so Reviseberg treats 3.3.2 as only partly testable by automation.

Accessible name · Semantic HTML · Screen reader · Voice control · Live region

Further reading

Frequently asked questions

Is a placeholder enough as a label?

No. It disappears as you type and often has poor contrast. Use a visible <label>; a placeholder can add an example.

Can a label be hidden?

Only in exceptions, such as a search field with an unmistakable magnifier button. The field still needs an accessible name, for example from a visually hidden label.

Which is better: aria-label or <label>?

<label>. It is visible, enlarges the target and works without ARIA. aria-label is a fallback for cases with no visible text.

Sources

  1. W3C, WCAG 2.2, Success Criterion 3.3.2 Labels or Instructions – https://www.w3.org/TR/WCAG22/#labels-or-instructions
  2. W3C WAI, Forms Tutorial: Labeling Controls – https://www.w3.org/WAI/tutorials/forms/labels/
  3. W3C, WCAG 2.2, Success Criterion 1.3.1 Info and Relationships – https://www.w3.org/TR/WCAG22/#info-and-relationships
  4. MDN, <label> – https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

See what a scan finds on your site

One page in about thirty seconds, no email needed. The full report covers up to 100 pages and a keyboard journey.

Run a free scan See pricing