Error Summary

Use the error summary component at the top of a page to summarise any errors a user has made. Always link each error to the relevant form field.

When to Use

• When a user submits a form with validation errors
• Always place it at the top of the main content area
• Move keyboard focus to the error summary when the page loads

Default Error Summary

<div class="error-summary" role="alert" aria-labelledby="error-summary-title" tabindex="-1">
  <h3 class="error-summary-title" id="error-summary-title">There is a problem</h3>
  <div class="error-summary-body">
    <ul class="error-summary-list">
      <li>
        <a href="#full-name">Enter your full name</a>
      </li>
      <li>
        <a href="#email">Enter a valid email address</a>
      </li>
      <li>
        <a href="#dob-day">Date of birth must include a day</a>
      </li>
    </ul>
  </div>
</div>

With Form Example

When displaying errors, also show inline error messages on each field and add the error state styling to the inputs.

Accessibility

• Use role="alert" to announce the error summary to screen readers
• Add tabindex="-1" so the summary can receive focus programmatically
• Move focus to the error summary when the page loads after a failed submission
• Each error must link to the corresponding form field using the field's id
• Use aria-labelledby to associate the summary with its heading

JavaScript Behaviour

// Focus the error summary when the page loads with errors
document.addEventListener('DOMContentLoaded', function() {
  const errorSummary = document.querySelector('.error-summary');
  if (errorSummary) {
    errorSummary.focus();
  }
});

Writing Error Messages

• Be specific about what went wrong
• Tell the user how to fix the problem
• Use the same wording in the summary and the inline error
• Keep messages short and clear

Examples