3.3.2 – Labels or Instructions (Level A)

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’.

Tips

  • 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.

See also

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.

Powered by ConvertKit

Over 250 people just like you have learned more about WCAG 2.0 with my guidebook.

Learn more >

  • When forms are made that only use text holders instead of labels, (so the context of the field is written inside itself) is that enough to say it has been labelled correctly?

    Or does the form need the label separate to the field before hand, much like you have on this form?

    Thanks.