Error summary
A focusable digest of everything wrong with a submitted form.
There's a problem with your application
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.