When data must be entered in a specific format or in a particular way, clear instructions must be associated with the form field. This ensures that everyone understands any requirements for entering data, and does so in a way that ensures that people unable to see the information are made aware of it by their screen readers.
Accessibility Requirements for 3.3.2 Labels or instructions (A)
- Instructions are provided for fields that require data to be entered in a specific format;
- Instructions are properly associated with the relevant form field.
Common mistakes for 3.3.2 Labels or instructions (A)
- Data is expected in a specific format, but no instructions have been provided;
- Instructions have been provided, but they are not associated with the relevant field.
Techniques for 3.3.2 Labels or instructions (A)
Each numbered item in this section represents a technique or combination of techniques that the WCAG Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see Understanding Techniques for WCAG Success Criteria, particularly the “Other Techniques” section.
Common Failures for 3.3.2 Labels or instructions (A)
The following are common mistakes that are considered failures of Success Criterion 3.3.2 by the WCAG Working Group.
- F82: Failure of Success Criterion 3.3.2 by visually formatting a set of phone number fields but not including a text label
FAQs for Labels and Instructions (A)
How to label elements and give instructions?
Label all input fields clearly and helpfully.
Where a field needs a specific format, give an example (For example, for a ‘date’ field in a form you might use ‘Enter the date as dd/mm/yyyy’)
Mark required fields with an icon and explain what the icon means before the form.
Keep your labels simple – too much explanation can be counter-productive. Things like ‘First name’, ‘Email’ and ‘Your message’ are fine.
The same goes for instructions, ‘Required fields are in red and have a * symbol’ works great. So does ‘Fill in this form and click ‘Submit’ to get in touch’.
Best practices for labels and instructions.
Instructions need to take into account how they use sensory characteristics.
Think about how your use of colour affects things like required fields if you want to highlight them by colour. Don’t highlight by colour alone, pick a symbol too.
Consider error identification as well, and make sure that you give helpful instructions when your users make mistakes on forms.
Who is benefited?
People who benefit out of clear, persistent, visible labels and/or instructions are:
Users with cognitive disabilities
All users in common.