Skip to content
IndexDesign corpus

Showing input error

Forms & Interaction Flows · 11 checks · 38 resources

The validation timing model for a single field, so the user is corrected but never interrupted.

Before you ship11 checks
  1. 01Keep the input in default state — check for errors only after the information has been entered
  2. 02Allow user to enter information — let the user type without interruption; do not assess as changes are made
  3. 03Signal error after loss of focus — assess the field once the user has clicked or tabbed to another element
  4. 04Return to default state upon reattempt — once the user focuses the field again, the error message disappears
  5. 05Tie the message to the field programmatically — aria-describedby and aria-invalid, so it is identified for everyone, not only sighted users (WCAG 3.3.1 Error Identification)
  6. 06Say how to fix it, not only what is wrong — "use at least 8 characters" beats "invalid password" (WCAG 3.3.3 Error Suggestion)
  7. 07Never signal by colour alone — pair colour with text and an icon
  8. 08Move focus to the first error on submit, and summarise the errors above long forms so the user is not hunting
  9. 09Announce errors that arrive asynchronously in a live region (WCAG 4.1.3 Status Messages)
  10. 10Preserve what the user typed — never clear a field because it failed validation
  11. 11Do not re-ask for information already given in the same flow (WCAG 3.3.7 Redundant Entry)
Resources that help you build this38