Skip to main content

Curbcut WCAG AAA

Error summary

A focusable digest of everything wrong with a submitted form.

Show the markup
<div class="cc-error-summary" role="alert" tabindex="-1">
  <h2>There's a problem with your application</h2>
  <ul>
    <li><a href="#ex-tf-err">Enter the business name</a></li>
    <li><a href="#ex-val">Enter the rabies certificate number</a></li>
  </ul>
</div>

Accessibility

  • On failed submit, render this above the form and move focus to it (tabindex="-1" + .focus()).
  • Each item links to the failing field; each field repeats its own validation message.
  • This is the GOV.UK-proven pattern — the single biggest usability win on long civic forms.