<?xml version="1.0" encoding="utf-8"?>

Add an error summary

A comprehensive error summary helps users identify all issues preventing successful form submission. This overview plays a crucial role in guiding users through error correction, especially for longer forms.

Place this error summary at the top of the form when validation fails, listing each problem detected.[1]For maximum accessibility, format this summary as a list with descriptive text for each error. Each item should function as a clickable link that jumps users' focus directly to the corresponding field needing correction.

This approach particularly benefits screen reader users and people with cognitive disabilities who might otherwise struggle to locate all errors throughout a lengthy form. When combined with inline error messages, a summary creates a complete system that ensures nobody gets stuck trying to submit information. The summary also helps users understand the scope of corrections needed before they begin making changes.

Pro Tip: In the error summary, use natural language that matches the exact wording of the inline error messages to avoid confusion when users navigate to the specific field.

References

Top contributors

Caz Brett
Emily Flynn

Topics

Share

Improve your UX & Product skills with interactive courses that actually work