Web design and digital-business ideas grounded in real tasks.

An Error Summary Should Take the Visitor Back to the Field

A designer testing a form error summary on a laptop and mobile phone.
AI-generated photographic illustration; not documentary photography.

A form reports three errors at the top of the page, but the visitor must search the entire form to find them. The summary has identified a problem without providing an efficient route to repair it.

An error summary is most useful when each item names the problem and links to the relevant answer. A message beside the field can then explain the same issue in the place where the correction happens.

Connect the message to the control

The GOV.UK Design System error-summary guidance describes linking summary items to their associated fields and handling focus. Use the documented behaviour of the component you actually implement; a visually similar box does not automatically provide the same accessibility features.

For a single email field, the summary link should take the visitor to that field. For a grouped answer, such as a date split into several inputs, follow the appropriate pattern for the group rather than linking to an unrelated heading.

Keep the summary and inline wording consistent. A summary saying “Enter a date” and an inline message saying “Date is too early” describe different problems. The companion error-message guidance emphasises specific, clear wording that helps someone recover.

Test the correction journey

Submit an intentionally incomplete form using the keyboard. Check where focus moves, what is announced by a screen reader and what happens when each summary link is activated. Then correct one error and submit again.

Preserve valid answers during that process. Requiring someone to re-enter unrelated information makes a small error more expensive to fix. Check the behaviour on a narrow screen and at increased text size as well.

Finally, distinguish user-input errors from a service failure. A server outage cannot be repaired by asking the visitor to change a correctly entered postcode. The design should explain the actual problem and offer the next action that can genuinely help.