Navigation - Back link

Use back links to help users go back to the previous page in a multi-page transaction.

WCAG 2.2

WCAG 2.2 affects this component

To meet new success criteria introduced in the Web Content Accessibility Guidelines (WCAG) 2.2, make sure that users can successfully:

See the full list of design system changes to meet WCAG 2.2.

Open this default back link example in new window
Copy default back link code 
<div class="nhsuk-back-link">

  <a class="nhsuk-back-link__link" href="#">
    <svg class="nhsuk-icon nhsuk-icon__chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="24" width="24">
      <path d="M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z"></path>
    </svg>
    Go back</a>
</div>
Close default back link code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for default back link
Name Type Required Description
Name text Type string Required false Description Text to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to "Back".
Name html Type string Required false Description HTML to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to "Back".
Name href Type string Required false Description The value of the link href attribute.
Name classes Type string Required false Description Classes to add to the container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the tag.
Name element Type string Required false Description Which html element to use to render the back link - `button` or `a`. If not provided, defaults to `a`.
Copy default back link code 
{% from 'back-link/macro.njk' import backLink %}

{{ backLink({
  "href": "#",
  "text": "Go back"
}) }}
Close default back link code

When to use a back link

We only use back links on transactional services or multi-page forms.

The GOV.UK design system recommends including a back link on question pages. Read more about question pages on GOV.UK.

You can include a back link on other pages in a multi-page transaction, if it makes sense to do so.

When not to use a back link

Do not use a back link on a content page, like a health information page.

Do not use a back link with breadcrumbs.

How to use back links

Make sure the text used in the link describes the action, for example "Go back". Carry out research with users to find the words that help them the most.

The link should take users back to the page they were on in the state they last saw it.

Information: WCAG 2.2

If a user goes back to a previous page, make sure information they have already entered is pre-populated.

Do not pre-populate if the information is no longer valid, or when pre-populating would be a major safety or security concern. This is to comply with WCAG 2.2 success criterion 3.3.7 Redundant Entry (W3C).

Consider where you put the back link. Do not put it close to other links or buttons where it might distract users from what they need to do. Also think about people who use a screen reader.

Information: WCAG 2.2

Make sure no other interactive elements are too close to the back link so users can easily interact with it. This is to comply with WCAG 2.2 success criterion 2.5.8 Target Size (W3C).

The GOV.UK design system says that you should put back links at the top of a page, but a couple of NHS services (NHS 111 online and Find out why your NHS data matters) found that it works better at the bottom of the page below the primary action. That's because we don't want to suggest to people who use a screen reader that they leave the page prematurely.

You can render the back link as a button element if necessary in order to post form data back to the previous page.

Open this button back link example in new window
Copy button back link code 
<div class="nhsuk-back-link">

  <button class="nhsuk-back-link__link">
    <svg class="nhsuk-icon nhsuk-icon__chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="24" width="24">
      <path d="M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z"></path>
    </svg>
    Go back</button>
</div>
Close button back link code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for button back link
Name Type Required Description
Name text Type string Required false Description Text to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to "Back".
Name html Type string Required false Description HTML to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to "Back".
Name href Type string Required false Description The value of the link href attribute.
Name classes Type string Required false Description Classes to add to the container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the tag.
Name element Type string Required false Description Which html element to use to render the back link - `button` or `a`. If not provided, defaults to `a`.
Copy button back link code 
{% from 'back-link/macro.njk' import backLink %}

{{ backLink({
  "text": "Go back",
  "element": "button"
}) }}
Close button back link code

Research

During testing, NHS 111 online found that some users wanted to change their answers, so they introduced a back link and labelled it to "Change my previous answer".

An accessibility audit recommended that Find out why your NHS data matters place their back link below the primary action, because screen reader users were confused when they landed on a page and were immediately told to go back.

Help us improve this guidance

Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.

Feedback or share insights on GitHub

Read more about how to feedback or share insights.

If you have any questions, get in touch with the service manual team.

Updated: April 2024