Check your answers
Sample HTML for Check answers example
<div class="ds_wrapper">
<a class="ds_back-link" href="#">Back to 'Apply for a licence'</a>
<main id="main-content" class="ds_layout ds_layout--question">
<div class="ds_layout__header">
<header class="ds_page-header">
<h1 class="ds_page-header__title">Check your answers before sending your application</h1>
</header>
</div>
<div class="ds_layout__content">
<h2>Personal details</h2>
<ul class="ds_summary-list">
<li class="ds_summary-list__item">
<span class="ds_summary-list__key" id="item-personal1-key">Name</span>
<span class="ds_summary-list__value">
<q class="ds_summary-list__answer">Jane Smith</q>
</span>
<div class="ds_summary-list__actions">
<button type="button" class="ds_link" aria-describedby="item-personal1-key">
Change
</button>
</div>
</li>
<li class="ds_summary-list__item">
<span class="ds_summary-list__key" id="item-personal2-key">Date of birth</span>
<span class="ds_summary-list__value">
<q class="ds_summary-list__answer">19 March 1983</q>
</span>
<div class="ds_summary-list__actions">
<button type="button" class="ds_link" aria-describedby="item-personal2-key">
Change
</button>
</div>
</li>
<li class="ds_summary-list__item">
<span class="ds_summary-list__key" id="item-personal3-key">Customer reference</span>
<span class="ds_summary-list__value">
<q class="ds_summary-list__answer">Not provided</q>
</span>
<div class="ds_summary-list__actions">
<button type="button" class="ds_link" aria-describedby="item-personal3-key">
Change
</button>
</div>
</li>
<li class="ds_summary-list__item">
<span class="ds_summary-list__key" id="item-personal4-key">Address</span>
<span class="ds_summary-list__value">
<q class="ds_summary-list__answer">Victoria Quay<br>Edinburgh<br>EH6 6QQ</q>
</span>
<div class="ds_summary-list__actions">
<button type="button" class="ds_link" aria-describedby="item-personal4-key">
Change
</button>
</div>
</li>
<li class="ds_summary-list__item">
<span class="ds_summary-list__key" id="item-personal5-key">Contact details</span>
<span class="ds_summary-list__value">
<q class="ds_summary-list__answer">
<ul class="ds_no-bullets">
<li><q class="ds_summary-list__answer">07890 135468</q></li>
<li><q class="ds_summary-list__answer">jane.smith@example.com</q></li>
</ul>
</q>
</span>
<div class="ds_summary-list__actions">
<button type="button" class="ds_link" aria-describedby="item-personal5-key">
Change
</button>
</div>
</li>
</ul>
<h2>Application details</h2>
<ul class="ds_summary-list">
<li class="ds_summary-list__item">
<span class="ds_summary-list__key" id="item-application1-key">Previous application number</span>
<span class="ds_summary-list__value">
<q class="ds_summary-list__answer">12345678</q>
</span>
<div class="ds_summary-list__actions">
<button type="button" class="ds_link" aria-describedby="item-application1-key">
Change
</button>
</div>
</li>
<li class="ds_summary-list__item">
<span class="ds_summary-list__key" id="item-application2-key">Licence type</span>
<span class="ds_summary-list__value">
<q class="ds_summary-list__answer">For personal use</q>
</span>
<div class="ds_summary-list__actions">
<button type="button" class="ds_link" aria-describedby="item-application2-key">
Change
</button>
</div>
</li>
<li class="ds_summary-list__item">
<span class="ds_summary-list__key" id="item-application3-key">Home address</span>
<span class="ds_summary-list__value">
<q class="ds_summary-list__answer">Victoria Quay<br>Edinburgh<br>EH6 6QQ</q>
</span>
<div class="ds_summary-list__actions">
<button type="button" class="ds_link" aria-describedby="item-application3-key">
Change
</button>
</div>
</li>
<li class="ds_summary-list__item">
<span class="ds_summary-list__key" id="item-application4-key">Licence period</span>
<span class="ds_summary-list__value">
<q class="ds_summary-list__answer">Valid for 6 months</q>
</span>
<div class="ds_summary-list__actions">
<button type="button" class="ds_link" aria-describedby="item-application4-key">
Change
</button>
</div>
</li>
</ul>
<h2>Now send your application</h2>
<p>By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.</p>
<div class="ds_button-group">
<button class="ds_button ds_button--secondary">Back</button>
<button class="ds_button">Accept and send</button>
</div>
</div>
</main>
</div>About this pattern
The check your answers pattern uses a summary list to allow users to check and change their answers in a form.
A check your answers page can be multiple summary lists separated by relevant headings. For example, each summary list can summarise the questions and answers in a section of the form.
Check your answers pages help to:
- give users confidence that their data is captured correctly
- reduce errors on submitted forms
You can download this pattern in the Design System prototyping kits.
When to use this pattern
Use the check your answers pattern in forms such as application forms and eligibility checkers.
Show users a check your answers page when users reach the end of:
- a form, before they submit it
- each section of a form – if the form is long or different users are completing different sections
Sample HTML for Check section answers example
<div class="ds_wrapper">
<a class="ds_back-link" href="#">Back to 'Apply for a licence'</a>
<main id="main-content" class="ds_layout ds_layout--question">
<div class="ds_layout__header">
<header class="ds_page-header">
<span class="ds_page-header__label ds_content-label">Personal details</span>
<h1 class="ds_page-header__title">Check your details</h1>
</header>
</div>
<div class="ds_layout__content">
<ul class="ds_summary-list">
<li class="ds_summary-list__item">
<span class="ds_summary-list__key" id="item-personal1-key">Name</span>
<span class="ds_summary-list__value">
<q class="ds_summary-list__answer">Jane Smith</q>
</span>
<div class="ds_summary-list__actions">
<button type="button" class="ds_link" aria-describedby="item-personal1-key">
Change
</button>
</div>
</li>
<li class="ds_summary-list__item">
<span class="ds_summary-list__key" id="item-personal2-key">Date of birth</span>
<span class="ds_summary-list__value">
<q class="ds_summary-list__answer">19 March 1983</q>
</span>
<div class="ds_summary-list__actions">
<button type="button" class="ds_link" aria-describedby="item-personal2-key">
Change
</button>
</div>
</li>
<li class="ds_summary-list__item">
<span class="ds_summary-list__key" id="item-personal3-key">Customer reference</span>
<span class="ds_summary-list__value">
<q class="ds_summary-list__answer">Not provided</q>
</span>
<div class="ds_summary-list__actions">
<button type="button" class="ds_link" aria-describedby="item-personal3-key">
Change
</button>
</div>
</li>
<li class="ds_summary-list__item">
<span class="ds_summary-list__key" id="item-personal4-key">Address</span>
<span class="ds_summary-list__value">
<q class="ds_summary-list__answer">Victoria Quay<br>Edinburgh<br>EH6 6QQ</q>
</span>
<div class="ds_summary-list__actions">
<button type="button" class="ds_link" aria-describedby="item-personal4-key">
Change
</button>
</div>
</li>
<li class="ds_summary-list__item">
<span class="ds_summary-list__key" id="item-personal5-key">Contact details</span>
<span class="ds_summary-list__value">
<q class="ds_summary-list__answer">
<ul class="ds_no-bullets">
<li><q class="ds_summary-list__answer">07890 135468</q></li>
<li><q class="ds_summary-list__answer">jane.smith@example.com</q></li>
</ul>
</q>
</span>
<div class="ds_summary-list__actions">
<button type="button" class="ds_link" aria-describedby="item-personal5-key">
Change
</button>
</div>
</li>
</ul>
<div class="ds_button-group">
<button class="ds_button ds_button--secondary">Back</button>
<button class="ds_button">Continue application</button>
</div>
</div>
</main>
</div>How to use this pattern
Check your answers pages must:
- be clear so users understand what they need to do and how to change answers
- allow users to return to specific questions and then return to the check your answers page
Test your form with users to check it works.
Give the page a clear title
Make it clear what users need to do by using a clear title. It should be active and tailored to the content, such as 'Check your contact details'.
Find out more about writing in the active voice on GOV.UK.
Show all questions you asked the user
Show all questions and answers, including skipped or unanswered optional questions. Users may need to change any answer.
Show answers to optional questions the user did not complete as ‘Not answered’ or ‘Not provided’.
Do not show questions that the user was not asked due to form logic.
Make the page easy to understand
To make the page easier to understand you should:
- show summary lists in the order the user was asked the questions in the form
- break up the page with a heading before each summary list – this should mirror the theme of the questions in the form section, such as ‘Contact details’
- show long form questions as shorter summary list statements – for example, ‘Address’
Allow users to change their answers
Give each answer a change link, usually a button styled as a link.
If a user selects to change an answer, return them to the relevant question page in the form.
Pre-populate form fields with information they’ve already given. Do not automatically clear form fields as this will be frustrating to users, particularly if they wrote long answers.
After the user has changed an answer, the primary button on the question page should either:
- return them to the check your answers page
- divert them to further questions due to their changed answer, following the form logic
Update the check your answers page with their new answers and any further questions they were asked.
Whenever possible, return users to the check your answers page rather than having them click through the form to return to the page.
Make it clear what happens next
Make it clear what happens when users select the primary button at the bottom of a check your answers page. Tailor the button text to what your form does, such as:
- Send application form
- Send claim form
- Check your eligibility
- Continue application – if the user needs to complete further sections of the form
You may also need to add a declaration that the information the user has entered is correct. This may be either:
- text on the check your answers page, before the primary button to submit the form
- a separate declaration and submission page after a check your answers page (for example, if the declaration is long)
Make it clear when a form has been submitted
Use a form submission results page to:
- confirm the form has been submitted
- tell the user the outcome of their answers, if instantly available
- tell the user what happens next
Evidence
The check your answers pattern has been tested in Social Security Scotland’s low-income benefit forms.
Users found the page helpful. They felt it was important to be able to correct errors, to ensure their application was accepted and benefit decisions were not delayed.
Website analytics
To understand user behaviour, you can track the individual elements of the page, such as:
- buttons
- summary list
- change links
You can track a combination of elements to understand how users are interacting with the page as a whole.
Use the Design System’s tracking script to add the data attributes automatically.
Accessibility
Give change links in summary lists an aria-describedby attribute to help screen reader users understand the context. The attribute uses the ID of the question that the button is related to.