Pattern
2Accessible error summary for Webform
Move focus to a linked list of errors at the top of the form, as the GOV.UK Design System recommends.
HP
Hannah Price
NHS England · 14 Sept 2026
{% if errors %}
<div class="error-summary" role="alert" tabindex="-1" data-autofocus>
<h2>There is a problem</h2>
<ul>
{% for id, message in errors %}
<li><a href="#{{ id }}">{{ message }}</a></li>
{% endfor %}
</ul>
</div>
{% endif %}
Join GDDN to upvote and share your own resources.