8.4 Prevent errors and assist recovery from errors by providing supportive information

Provide required field indicators:
- Images with alt text - e.g. 'required'
- Do not indicate by colour only!
Provide brief and clear instructions at the start of the form, e.g.
- Purpose of form
- Number of pages
- Info that might be needed for successful completion
- Warn about time limitations (for secure forms, etc.)
Where there are time limitations ensure that there is the possibility to request more time
Provide required format examples:
- Before the input
- Within the <label> tab
Provide meaningful and useful error messages:
- At the top of the page itself - not in a popup, dialogue box or separate page:
  - Distinguish from the rest of the page
- Explain the problem and how to fix it
- Do not use technical jargon
Indicate the location of errors on the form itself:
- Indicate the number of the problem, e.g. 'error 2 of 4'

Warning: Do not rely on JavaScript alone for form validation, ensure server side validation too.

Tip: Include default form entries only where it makes absolute sense to do so. Avoid placeholder text just for the sake of it (this was an accessibility recommendation that is now outdated and causes more difficulties than it solves).

Iillustration of clear error message: provide a valid email address. Also an icon with error 1 of 1 is shown next to the label

Good: Password requirement (6 chars, no spaces) is before the input box

8.4 Prevent errors and assist recovery from errors by providing supportive information

Recommendations

Examples