DEV 7.4 Prevent errors and assist recovery from errors by providing supportive information

  • Provide required information indicators:
    • Use images with alt text (see DEV 6.1):
      • e.g. alt="required";
    • Or, use characters such as '*' ;
    • Do not indicate by colour only (see DEV 1.3;)
    • NB: avoid using database-type jargon such as 'field' as in 'required field':
      • to most people a field is where cows graze.
  • Provide brief and clear instructions at the start of the form: e.g.
    • The purpose of form;
    • The number of pages;
    • Warn about information that might be needed for successful completion:
      • e.g. account numbers etc;
    • Warn about any time limitations or time-outs.
  • Be careful with timeouts:
    • Ideally avoid timeouts and time limitations completely;
    • Where there are time limitations and timeouts, ensure that there is the possibility to request more time;
    • If a timeout occurs try to ensure that users can restart the process without losing the data they have entered.
  • Provide required format instructions/examples:
    • Before the input;
    • Within the <label> tab;
    • If not possible, use the title attribute as well as a visible format example.
  • Provide meaningful and useful error messages:
    • Position the message at the top of the page itself - not in a popup, dialogue box or separate page;
    • Distinguish the message from the rest of the page;
    • In the message:
      • Explain the problem and how to fix it,
      • Do not use technical jargon.
  • Indicate the location of errors on the form itself:
    • Highlight in a non-colour dependent way;
    • If possible provide more information about the error at the site of the error:
      • e.g. the number of the problem - 'error 2 of 4'.

Warning: Do not rely on JavaScript alone for form validation, ensure server side validation too (see DEV 2.3).

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

Illustration 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