Optional elements on a question page
After you’ve created a question page using the mandatory question page elements, you can choose to add the following optional elements:
- back link
- back button
- summary list
- guidance to help users answer a question – hint text, details or explanatory text
Do user research to understand which elements your users need.
Back link
You can include a back link to allow users to go back to the page where the form was launched. It gives users a way to quickly exit the form.
The link text must refer to the page the form was launched from. For example, ‘Back to ‘Who can apply for Adult Disability Payment’.
When to use a back link
Consider using a back link if, for example:
- there's information on the form launch page that users may need to answer the questions
- you want to give users a way to exit the form – for example, if they're in the wrong form
Do not use the back link component together with the breadcrumbs component. If necessary, you should do research with your users to learn which they find more helpful in your service.
Placement of back link
Place the back link below the site header and above the page header.
You must also place the back link before the <main> element at the top of the page. This allows keyboard-only users using the skip to main content link to skip the back link, along with other navigation links.
Ensure users can always exit a form
If you do not use the back link, make sure users can exit the form through other navigational components. For example, breadcrumbs or site navigation.
Back button
Some users do not trust browser back buttons. They think it may break and they'll lose their progress on a form.
You can include a back button to give users the option to go back to the previous question page. This reassures users it’s possible to go back and change previous answers.
Use the button text ‘Back’.
Placement of back button
Group the back button with the ‘Continue’ button underneath the form fields. Place it before the ‘Continue’ button. Read more about grouping buttons in the button guidance.
Do not use a back button on the first question page as there’s no previous step in the form.
Previous page state
Make the back button takes users to the previous page they were on, in the state they last saw it.
If the user goes back to a previous page, make sure information they’ve already entered is pre-populated, unless:
- the information is no longer valid
- pre-populating would be a safety or security concern
This is to meet WCAG 2.2 success criterion 3.3.7 Redundant Entry.
Browser back button
Do not disable the browser back button. Make sure it returns users to the previous page, in the state they last saw it.
An exception to this is when the user has performed an action they should only do once, like make a payment or complete an application. The browser back button should still work, but show the user an explanatory message rather than let them perform the action again.
Summary list
You can include a summary list to allow users to check their previous answers and change them if they need to.
If it’s a short form with only a few questions, put the summary list in the question pages. Place the summary list beneath the other elements on the page but above the site footer.
If it’s a long form with many questions, put the summary list on its own page at the end of the form. Users can check their responses before they submit the form.
Giving users guidance about answering the question
Depending on how much guidance is needed, consider using:
- hint text – for a single, short sentence
- details – for information only some users need
- explanatory text – for longer instructions that all users need
Give users just enough information to help them answer the question.
Hint text
Hint text is a short sentence that sits beneath the question and above the form field and any error message.
You can use hint text to help users answer the question. For example, to:
- show how to format dates
- give the user extra information that clarifies the question
Keep hint text to a single short sentence.
Do not use hint text to give long explanations. All hint text is read out by screen readers when users interact with the form element.
Do not use links in hint text. Screen readers do not call out links in hint text if the hint text is used as an aria-describedby target.
Follow the question component guidance to find out how to:
- place hint text within the question component
- give the hint text an ID attribute to associate it with its related field using ARIA
Sample HTML for Hint text example
<div class="ds_wrapper">
<main id="main-content" class="ds_layout ds_layout--question-page">
<div class="ds_layout__content">
<form class="ds_form">
<div class="ds_form__content">
<div class="ds_question">
<div class="ds_page-header">
<span class="ds_page-header__label ds_content-label">Your details</span>
<h1 class="ds_page-header__title">
<label for="ni-number">What is your National Insurance number?</label>
</h1>
</div>
<p class="ds_hint-text" id="unique-hint-id">For example, QQ123456A</p>
<input class="ds_input ds_input--fixed-10" type="text" id="ni-number" name="ni-number" aria-describedby="unique-hint-id">
</div>
</div>
<div class="ds_form__actions">
<div class="ds_button-group">
<button class="ds_button ds_button--secondary" type="button">Back</button>
<button class="ds_button" type="button">Continue</button>
</div>
</div>
</form>
</div>
</main>
</div>Details
The details component is a short link that reveals more text when users click it.
Use the details component if it’s for information that only some users will need.
If it’s guidance that all users need to read, use hint text or explanatory text.
Place the details link below the heading and above the related form fields.
We need more research to understand how effective this element is. Contact the Design System team if you have evidence showing how it performs.
Sample HTML for Details example
<div class="ds_wrapper">
<main id="main-content" class="ds_layout ds_layout--question-page">
<div class="ds_layout__content">
<form class="ds_form">
<div class="ds_form__content">
<div class="ds_question">
<fieldset>
<legend class="ds_page-header">
<span class="ds_page-header__label ds_content-label">Step 2 of 6</span>
<h1 class="ds_page-header__title">
Where do you live?
</h1>
</legend>
<details class="ds_details ds_!_margin-top--0">
<summary class="ds_details__summary">
If you have more than one address
</summary>
<div class="ds_details__text">
<p>If you have more than one address, choose the place where you spend the most time.</p>
</div>
</details>
<div class="ds_field-group">
<div class="ds_radio">
<input class="ds_radio__input" id="answer-1" type="radio" name="answer" value="scotland">
<label class="ds_radio__label" for="answer-1">Scotland</label>
</div>
<div class="ds_radio">
<input class="ds_radio__input" id="answer-2" type="radio" name="answer" value="england-wales-ni">
<label class="ds_radio__label" for="answer-2">England, Wales or Northern Ireland</label>
</div>
<div class="ds_radio">
<input class="ds_radio__input" id="answer-3" type="radio" name="answer" value="outside-uk">
<label class="ds_radio__label" for="answer-3">A country outside of the UK</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="ds_form__actions">
<button class="ds_button ds_button--secondary" type="button">Back</button>
<button class="ds_button" type="button">Continue</button>
</div>
</form>
</div>
</main>
</div>Explanatory text
If you need to give users longer instructions about answering the question, use explanatory text before you ask the question.
To ensure that it’s not confusing for screen reader users, you must use the following elements in order:
- an H1 heading that’s a statement rather than a question – for example, 'House in Multiple Occupation (HMO) licence'
- explanatory text that contains whatever mix of text, paragraphs, lists and examples best explains your question to users
- a label or legend above the form fields, that asks users a specific question – for example, 'Is the home for rent a House in Multiple Occupation?'
Sample HTML for Explanatory text example
<div class="ds_wrapper">
<a class="ds_back-link" href="#">Back to 'Create a tenancy agreement'</a>
<main id="main-content" class="ds_layout ds_layout--question-page">
<div class="ds_layout__header">
<header class="ds_page-header">
<span class="ds_page-header__label ds_content-label">Section 1: About the property</span>
<h1 class="ds_page-header__title">
House in Multiple Occupation (HMO) licence
</h1>
</header>
</div>
<div class="ds_layout__content">
<p>You need a HMO licence if:</p>
<ul>
<li>you rent your property to 3 or more tenants over the age of 16</li>
<li>3 or more of these tenants are not related or part of the same family</li>
<li>your property is the only place they live</li>
</ul>
<form class="ds_form">
<div class="ds_form__content">
<div class="ds_question">
<fieldset>
<legend class="ds_label">Is the home for rent a House in Multiple Occupation (HMO)?</legend>
<div class="ds_field-group">
<div class="ds_radio">
<input class="ds_radio__input" id="hmo-yes" type="radio" name="hmo" value="yes">
<label class="ds_radio__label" for="hmo-yes">Yes</label>
</div>
<div class="ds_radio">
<input class="ds_radio__input" id="hmo-no" type="radio" name="hmo" value="no">
<label class="ds_radio__label" for="hmo-no">No</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="ds_form__actions">
<button class="ds_button ds_button--secondary" type="button">Back</button>
<button class="ds_button" type="button">Continue</button>
</div>
</form>
</div>
</main>
</div>