Summary list
A compact summary of a user's responses to questions in a form.
Sample HTML
<ol class="ds_summary-list">
<li class="ds_summary-list__item">
<span class="ds_summary-list__key">Have you had the grant 3 times or more since 1 May 2022?</span>
<span class="ds_summary-list__value" id="q1">
<span class="visually-hidden">Your answer is:</span>
<q class="ds_summary-list__answer">No</q>
</span>
<div class="ds_summary-list__actions">
<button aria-describedby="q1" class="ds_link js-change-answer">
Change <span class="visually-hidden">your answer for: <q>Have you had the grant 3 times or more since 1 May 2022?</q></span>
</button>
</div>
</li>
<li class="ds_summary-list__item">
<span class="ds_summary-list__key">Which council area do you live in?</span>
<span class="ds_summary-list__value" id="q2">
<span class="visually-hidden">Your answer is:</span>
<q class="ds_summary-list__answer">City of Edinburgh</q>
</span>
<div class="ds_summary-list__actions">
<button aria-describedby="q2" class="ds_link js-change-answer">
Change <span class="visually-hidden">your answer for: <q>Which council area do you live in?</q></span>
</button>
</div>
</li>
<li class="ds_summary-list__item">
<span class="ds_summary-list__key">Do you work?</span>
<span class="ds_summary-list__value" id="q3">
<span class="visually-hidden">Your answer is:</span>
<q class="ds_summary-list__answer">Yes</q>
</span>
<div class="ds_summary-list__actions">
<button aria-describedby="q3" class="ds_link js-change-answer" data-questionid="do-you-work">
Change <span class="visually-hidden">your answer for: <q>Do you work?</q></span>
</button>
</div>
</li>
<li class="ds_summary-list__item">
<span class="ds_summary-list__key">Will you lose earnings because you need to self-isolate?</span>
<span class="ds_summary-list__value" id="q4">
<span class="visually-hidden">Your answer is:</span>
<q class="ds_summary-list__answer">Yes</q>
</span>
<div class="ds_summary-list__actions">
<button aria-describedby="q4" class="ds_link js-change-answer">
Change <span class="visually-hidden">your answer for: <q>Will you lose earnings because you need to self-isolate?</q></span>
</button>
</div>
</li>
<li class="ds_summary-list__item">
<span class="ds_summary-list__key">Have you tested positive for Covid?</span>
<span class="ds_summary-list__value" id="q5">
<span class="visually-hidden">Your answer is:</span>
<q class="ds_summary-list__answer">No - I need a PCR test or to rebook a PCR test</q>
</span>
<div class="ds_summary-list__actions">
<button aria-describedby="q5" class="ds_link js-change-answer">
Change <span class="visually-hidden">your answer for: <q>Have you tested positive for Covid?</q></span>
</button>
</div>
</li>
</ol>About this component
Items in a summary list have:
- a question
- a response
- an optional ‘change answer’ action button
There is an item in the summary list for every question the user has been asked. If a user has been able to skip past a question without answering it, for example if the question is optional, the question should still be included along with an ‘empty’ response, such as the words ‘not applicable’ or ‘not answered’.
Each ‘change answer’ button should take the user back to where they were asked the question it relates to, so that the user can enter a different response if they want to.
When to use this component
A summary list should be used in forms to give the user an opportunity to review their responses. This could be a page allowing the user to check their responses before submitting a form or a block on every page of a form allowing users to track their answers throughout.
When not to use this component
Do not use a summary list for:
- tabular data, instead try using a table
- simple lists, instead try using an ordered or unordered list
- a list of tasks, instead try using a task list
Other versions of this component
Summary list without borders
If a summary list has no action buttons, you can also choose to remove the borders separating items in the list.
You can remove the borders by adding the ds_summary-list--no-border modifier class to the summary list.
Sample HTML
<ol class="ds_summary-list ds_summary-list--no-border">
<li class="ds_summary-list__item">
<span class="ds_summary-list__key">Have you had the grant 3 times or more since 1 May 2022?</span>
<span class="ds_summary-list__value">
<span class="visually-hidden">Your answer is:</span>
<q class="ds_summary-list__answer">No</q>
</span>
</li>
<li class="ds_summary-list__item">
<span class="ds_summary-list__key">Which council area do you live in?</span>
<span class="ds_summary-list__value">
<span class="visually-hidden">Your answer is:</span>
<q class="ds_summary-list__answer">City of Edinburgh</q>
</span>
</li>
<li class="ds_summary-list__item">
<span class="ds_summary-list__key">Do you work?</span>
<span class="ds_summary-list__value">
<span class="visually-hidden">Your answer is:</span>
<q class="ds_summary-list__answer">Yes</q>
</span>
</li>
<li class="ds_summary-list__item">
<span class="ds_summary-list__key">Will you lose earnings because you need to self-isolate?</span>
<span class="ds_summary-list__value">
<span class="visually-hidden">Your answer is:</span>
<q class="ds_summary-list__answer">Yes</q>
</span>
</li>
<li class="ds_summary-list__item">
<span class="ds_summary-list__key">Have you tested positive for Covid?</span>
<span class="ds_summary-list__value">
<span class="visually-hidden">Your answer is:</span>
<q class="ds_summary-list__answer">No - I need a PCR test or to rebook a PCR test</q>
</span>
</li>
</ol>Website analytics
To track interactions with the action buttons in Google Analytics using Google Tag Manager, each button has a data attribute that describes the action.
The data attribute is added automatically by the Design System’s ‘tracking’ script.
Accessibility
While the ‘change answer’ buttons are clearly related to information in the summary list for sighted users, additional text is added to help screen reader users know the context for the button actions. For example, instead of just hearing the word ‘Change’ they might hear ‘Change your answer for “Which council area do you live in?”’. This additional text is also used by the Design System’s tracking script when it adds a tracking data attribute to the action button.
Additional text can also be added to the user’s responses. In the examples on this page the user’s responses have the text ‘your answer is’ inserted before the response. The full content that a screen reader would read out for the council area example would therefore be: ‘Which council area do you live in? Your answer is “Aberdeen City Council”. Change your answer for “Which council area do you live in?”’
The buttons are also associated with the user’s answer using aria-describedby. If a screen reader user is skipping through a page link by link they will hear the answer as well as being given the option to change it. In VoiceOver this is read out as, ‘Change your answer for “Which council area do you live in?”, button. Your answer is “Aberdeen City Council”’. The user is told both the question and their response.
Feedback, help or support
If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot