Skip to main content
Understandable WCAG 3.3.2

3.3.2 Labels or Instructions

Labels or instructions are provided when content requires user input.

Level A Serious WCAG 2.0 (new) WCAG 2.1 WCAG 2.2

What this rule means

WCAG 3.3.2 requires that form fields and interactive controls have labels or instructions that help users understand what input is expected. This goes beyond programmatic labeling (covered by 1.3.1) to include helpful, descriptive text.

Labels should clearly indicate what is expected. For fields with specific format requirements (dates, phone numbers), instructions about the expected format should be provided.

Why it matters

Without clear labels, users may not know what to enter in a field. This affects screen reader users who rely on labels to understand form fields, and users with cognitive disabilities who need clear guidance.

Good labels and instructions reduce errors and form abandonment. They help all users, not just those with disabilities.

Related axe-core rules

While label and select-name rules verify programmatic association, this criterion focuses on the quality and helpfulness of label content itself.

How to test

  • Verify every form field has a visible label.
  • Check that labels clearly describe the expected input.
  • Verify format requirements are indicated (e.g., "Date (DD/MM/YYYY)").
  • Check required fields are identified before the form, not just with an asterisk.
  • Test with a screen reader to confirm labels are announced.

How to fix

Bad practice

<!-- No label -->
<input type="text" name="name" />

<!-- Placeholder used as label (disappears on focus) -->
<input type="email" placeholder="Email" />

<!-- Unclear label with no format hint -->
<label for="dob">Date</label>
<input type="text" id="dob" />

Good practice

<!-- Clear label -->
<label for="name">Full name</label>
<input type="text" id="name" autocomplete="name" />

<!-- Label with format instruction -->
<label for="dob">Date of birth (DD/MM/YYYY)</label>
<input type="text" id="dob" autocomplete="bday"
       pattern="\d{2}/\d{2}/\d{4}" />

<!-- Required field with clear indication -->
<p>Fields marked with <span aria-hidden="true">*</span>
   <span class="sr-only">asterisk</span> are required.</p>
<label for="email">Email <span aria-hidden="true">*</span>
  <span class="sr-only">(required)</span></label>
<input type="email" id="email" required
       autocomplete="email" />

Common mistakes

  • Using placeholder text as the only label — it disappears when the user starts typing.
  • Labels that don't describe the expected input (e.g., "Field 1", "Input").
  • No indication of required fields until the user submits and gets errors.
  • Format requirements not mentioned until an error occurs.
  • Using icon-only buttons without accessible names.

Resources