2 minute read

WCAG 3.3.2: Labels or Instructions (Level A)

Have you ever started filling out a form and stopped, thinking, What are they asking me for? Is “name” asking for my first name, or my full name?

Ambiguous labels or missing instructions can leave users guessing—and guessing leads to mistakes.

Labels or Instructions makes sure that every input field has clear guidance so users know exactly what’s expected of them.

Who this impacts

People with cognitive impairments: Clear labels and instructions reduce confusion and make forms easier to complete.
Screen reader users: Descriptive labels ensure assistive technologies can communicate the purpose of each input field effectively.
Everyone: we all benefit from clear, straightforward labels, especially on forms with complex or unique fields.

Add labels to every field: Clearly identify what users should enter, like “Phone number (including area code).”
Provide instructions for complex inputs: Offer guidance for tricky fields, like specifying password requirements – “At least 8 characters, including one number and one special character.”
Link labels programmatically: Ensure that labels are tied to input fields using <label> elements or ARIA attributes.

Catbook’s profile creation section has, ‘upload your profile photo as a gif or png, max size 2 MB’ to reduce user error.

Be clear and specific: Avoid vague labels—tell users exactly what information to provide.
Don’t use placeholder text: Placeholders can supplement labels but shouldn’t replace them, remember they disappear when you put the focus into the box.
Supplement with tooltips or hints: Provide additional context for complex fields without cluttering the form.
Test forms with assistive tech: Verify that labels and instructions are read clearly by screen readers and work across all devices.