Label elements and give instructions
Chances are your website will have a feature that requires your users to fill in some information. This might be on a checkout page to buy a product, a contact form to get in touch or a newsletter sign-up to opt in to your mailing list. You need to ensure your users know what’s required of them when they reach one of these elements on your website.
Without clear labels and instructions, your users won’t know what to do.
What to do
- 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’.
- 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.
- Guideline 1.3.3. – Sensory Characteristics
- Guideline 1.4.1 – Use of Colour
- Guideline 3.3.1 – Error Identification
- Understanding Success Criterion 3.3.2 (W3C)
Free Developer Resources
Join over 3,500 accessibility fans and get free developer resources like WCAG 2.0 Checklists and a sample from my book.
Over 250 people just like you have learned more about WCAG 2.0 with my guidebook.