Telling people what went wrong.
WHAT AN ERROR MESSAGE MUST DO
Identify which field Say what is wrong Say how to fix it
"Invalid input" fails all three.
WHERE TO PUT IT
Next to the field it concerns, not only in a summary at the top.
A summary as well is helpful on long forms.
ANNOUNCING IT
Screen reader users must be told an error occurred. A message appearing visually with no announcement is invisible to them.
Proper markup handles this. Any developer can implement it.
NOT COLOUR ALONE
A field turning red conveys nothing to someone who cannot distinguish it.
Text is required.
PRESERVING INPUT
Do not clear what the user typed. Retyping a long form because of one error is a common and infuriating failure.
FOCUS
Moving focus to the first error helps keyboard users find it.
TIMING
Validating as the user types, before they have finished, produces errors on incomplete input.
Validate on leaving the field or on submission.
TESTING
Submit the form wrongly and see what happens.
