BETA This is a new service — your feedback will help us to improve it.

Back to components

Error summary

Summarise errors at the top of the page

  • show an error summary at the top of the page
  • include a heading to alert the user to the error
  • link to each of the problematic questions

Additionally, you should reflect that there's been an error in the <title> by prefixing the existing title with "Error: ". That will make sure screen readers are alerted to there being an error as soon as possible.

Error message and summary box

Example

Where do you live?

Where do you live? Error: Choose an answer

HTML Snippet for error summary

<div class="error-summary" role="alert" aria-labelledby="error-summary-heading-example-1" tabindex="-1">
    <h2 class="heading-medium error-summary-heading" id="error-summary-heading-example-1">
        Message to alert the user to a problem goes here
    </h2>
    <p>
        Optional description of the errors and how to correct them
    </p>
    <ul class="error-summary-list">
        <li><a href="#where-do-you-live">Descriptive link to the question with an error</a></li>
    </ul>
</div>
<h1 class="heading-large">Where do you live?</h1>
<form>
    <div class="form-group form-group-error">
        <fieldset aria-describedby="where-do-you-live-error">
            <legend id="where-do-you-live" class="sr-only">Where do you live?</legend>
            <span id="where-do-you-live-error" class="error-message"><span class="sr-only">Error: </span>Choose an answer</span>
            <label class="block-label" for="radio-1-error" data-target="radio-1-error">
                <input type="radio" id="radio-1-error" name="radio-group" value="Northern Ireland" aria-controls="radio-1-error" aria-expanded="false">
                Northern Ireland
            </label>
            <label class="block-label" for="radio-2-error" data-target="radio-2-error">
                <input type="radio" id="radio-2-error" name="radio-group" value="Isle of Man or the Channel Islands" aria-controls="radio-2-error" aria-expanded="false">
                Isle of Man or the Channel Islands
            </label>
            <label class="block-label" for="radio-3-error" data-target="radio-3-error">
                <input type="radio" id="radio-3-error" name="radio-group" value="I am a British citizen living abroad" aria-controls="radio-3-error" aria-expanded="false">
                I am a British citizen living abroad
            </label>
        </fieldset>
    </div>
    <div class="form-group">
        <button class="btn btn-primary btn-arrow">Continue</button>
    </div>
</form>
Back to top