Design Principle
Users need to know how many errors exist, where they are, and how to fix them without hunting for red text.
Principle
Users need to know how many errors exist, where they are, and how to fix them without hunting for red text.
Design action
On failed submit, show an error summary at the top; each error includes field name, fix hint, and anchor to the field.
Examples
Positive example: Multi-section forms, signup, checkout, applications, and admin configuration can produce multiple validation errors. Counterexample: Errors appear only under fields while scroll position stays unchanged.
Apply when
Multi-section forms, signup, checkout, applications, and admin configuration can produce multiple validation errors. Users need to judge state, scope, risk, or next action quickly.
Source notes
Source note: Synthesized from W3C WCAG 2.2, Apple Accessibility, IBM Carbon Accessibility, and accessibility practices in major design systems. WCAG 2.2: https://www.w3.org/TR/WCAG22/ WCAG Contrast Minimum: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html WCAG Non-text Contrast: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html Apple HIG Accessibility: https://developer.apple.com/design/human-interface-guidelines/accessibility Carbon Accessibility Overview: https://carbondesignsystem.com/guidelines/accessibility/overview/
Agent Directive
On failed submit, show an error summary at the top; each error includes field name, fix hint, and anchor to the field.