3.3.2 Labels or Instructions

What does it mean?

Users must know what to enter before they start typing. Each field needs a visible label, and where needed a short instruction, for example which fields are required or which date format is expected.

A placeholder text inside the field is not a reliable label, because it disappears while typing. Labels should be placed close to the field and connected in code, for example with <label for>.

Who does it help?

• People with cognitive disabilities or memory problems
• Screen reader users, who hear the label when the field gets focus
• People with low vision, who need labels close to the field
• Everyone filling in a form on a small mobile screen

Common failures

• Fields that only have a placeholder and no visible label
• Required fields marked only with a coloured asterisk and no explanation
• A date field with no hint about the expected format
• A group of radio buttons without a visible question

How we test it

• axe-core Automatic: axe-core finds typical violations. A violation is pre-filled as “fails”.
• evidence Evidence: our scanner collects material such as screenshots, lists and measurements.

Test question: Every input has a visible label or instruction, including required-field and format hints.

A person decides every criterion. No criterion ever passes automatically.

How to fix it

<input type="text" placeholder="Date of birth">

<label for="dob">Date of birth (required)</label>
<p id="dob-hint">Format: DD.MM.YYYY</p>
<input id="dob" name="dob" required aria-describedby="dob-hint"
  inputmode="numeric" autocomplete="bday">

The visible label and hint stay on screen and are announced with the field.

Practical tips

• Use <fieldset> and <legend> to label groups of radio buttons or checkboxes.

Guides and patterns on this

• Forms that everyone can completeForms are where people buy, book or give up. This guide shows how labels, required fields and error messages need to work for keyboard, screen reader and magnifier users.
• The EAA for small businesses: where the exemption endsMicroenterprises that provide services are exempt from the European Accessibility Act. The exemption is narrower than many think, and growing businesses can grow out of it.
• Error messages that help instead of confuseErrors as text, linked, with a fix and an error summary.

Official source

Understanding WCAG 2.2 at the W3C: 3.3.2 Labels or Instructions