3.3.2 Labels or Instructions

Who it helps

People with cognitive or memory disabilities need visible guidance that stays on screen while they type. Screen magnifier users, older users and anyone filling a long form benefit from clear labels and format hints.

How to meet it

• Give every field a visible label, placed close to the field, and connect it with label for and id.
• State the expected format in text, such as "Date of birth (MM/DD/YYYY)".
• Mark required fields in text, such as "(required)", and explain any symbol you use.
• Group related inputs, such as radio buttons, in a fieldset with a legend.
• Do not rely on placeholder text as the only label, because it disappears when the user types.

Examples

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

<input type="radio" id="s" name="plan"> <label for="s">Standard</label>
<input type="radio" id="p" name="plan"> <label for="p">Priority</label>

<label for="dob">Date of birth (MM/DD/YYYY)</label>
<input type="text" id="dob" name="dob" autocomplete="bday">

<fieldset>
  <legend>Shipping speed (required)</legend>
  <input type="radio" id="s" name="plan" required> <label for="s">Standard</label>
  <input type="radio" id="p" name="plan"> <label for="p">Priority</label>
</fieldset>

Common mistakes

• Using placeholder text instead of a label that stays visible.
• Marking required fields with a red asterisk that is never explained.
• Hiding format rules, such as password requirements, until after the user submits.
• Giving a field an aria-label for screen readers but no visible label for everyone else.

Related criteria

• 2.4.6 Headings and Labels
• 1.3.1 Info and Relationships
• 3.3.1 Error Identification
• 2.5.3 Label in Name

Official W3C explanation of 3.3.2