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.
Agent Directive
On failed submit, show an error summary at the top; each error includes field name, fix hint, and anchor to the field.