Error summary

Usage

Show an error summary at the top of a form when the user submits and anything is invalid. It lists every problem as a link to the field, receives focus so screen-reader and keyboard users land on it, and the page title gets an "Error: " prefix. Use it together with inline field errors, never instead of them.

Don't use it for a single-field form where the inline error is right next to the button, or for system errors (use an alert).

Copy: the title says how many problems there are ("There are 2 problems with this service log"); each item uses the same words as the inline error.

Anatomy

Container (danger alert surface, focusable with tabindex="-1")
Icon
Title with the number of problems
List of links, one per invalid field, in field order

Examples

With errors

There are 2 problems with this service log

Choose the vehicle you serviced
Enter a reading higher than the last one (79,950 km)

Fields: Vehicle · Odometer reading

<div class="alert alert--danger error-summary" tabindex="-1" aria-labelledby="sum-t">
  <div class="alert__content">
    <h2 class="alert__title" id="sum-t">There are 2 problems with this service log</h2>
    <ul class="list error-summary__list">
      <li><a class="link" href="#vehicle">Choose the vehicle you serviced</a></li>
    </ul>
  </div>
</div>

API

Hook	Values	Purpose
`.error-summary`	on `.alert.alert--danger`	Focus ring and list spacing
`tabindex="-1"`	attribute	Lets `js/error-summary.js` move focus to it
`init(root)`	js/error-summary.js	Focuses the first summary on load and prefixes the title with "Error: "; links move focus to their field

Do and don't

Link each problem to its field, using the same words as the inline error.

Do keep the summary and inline errors in sync.

"Please correct the errors below."

Don't show a generic message without the list of problems.

Focus moves to the summary after a failed submit, so its title and list are read first; it isn't a live region (focus already announces it).
The page <title> gets an "Error: " prefix (WCAG 3.3.1).
Each link targets the field's id; following it moves focus to the field, whose aria-describedby includes the inline error.
Color is not the only signal: icon, title text and the list itself.

Tokens

Uses the alert's danger tokens (--color-feedback-danger-*) and --focus-ring-*.