From bffa52c1bc52c15772d12ad2ac046955a593597c Mon Sep 17 00:00:00 2001
From: Calvin Lau <77630796+calvin-lau-sig7@users.noreply.github.com>
Date: Tue, 5 Dec 2023 11:27:26 +0000
Subject: [PATCH] Adding WCAG 2.2 content to website

Co-Authored-By: Anika Henke <108893+selfthinker@users.noreply.github.com>
Co-Authored-By: Charlotte Downs <56260216+CharlotteDowns@users.noreply.github.com>
Co-Authored-By: David Cox <98318778+dav-idc@users.noreply.github.com>
---
 config/navigation.js                          |   5 +
 ...sibility.md => accessibility-statement.md} |   6 +-
 src/accessibility/WCAG-2.2/index.md           | 393 ++++++++++++++++++
 .../accessibility-strategy/index.md           |   5 +-
 src/accessibility/index.md                    |  18 +
 src/components/back-link/index.md             |  11 +-
 src/components/breadcrumbs/index.md           |   5 +-
 src/components/button/index.md                |   3 +
 src/components/cookie-banner/index.md         |   3 +
 src/components/error-message/index.md         |   9 +
 src/components/file-upload/index.md           |  14 +
 src/components/footer/index.md                |   4 +
 src/components/header/index.md                |  13 +-
 src/components/panel/index.md                 |  11 +
 src/components/phase-banner/index.md          |   3 +
 src/components/select/index.md                |   7 +
 src/components/summary-list/index.md          |  48 +++
 src/components/tag/index.md                   |  10 +-
 src/index.njk                                 |   2 +-
 src/patterns/addresses/index.md               |  14 +
 src/patterns/bank-details/index.md            |  14 +
 .../check-a-service-is-suitable/index.md      |  13 +
 src/patterns/check-answers/index.md           |   7 +-
 src/patterns/complete-multiple-tasks/index.md |  11 +-
 src/patterns/confirm-a-phone-number/index.md  |   7 +-
 .../confirm-an-email-address/index.md         |   4 +
 src/patterns/confirmation-pages/index.md      |  13 +-
 .../index.md                                  |   9 +
 src/patterns/cookies-page/index.md            |   3 +
 src/patterns/create-accounts/index.md         |  14 +
 src/patterns/email-addresses/index.md         |  15 +
 src/patterns/equality-information/index.md    |  17 +
 src/patterns/names/index.md                   |  12 +
 .../national-insurance-numbers/index.md       |  14 +
 src/patterns/page-not-found-pages/index.md    |   3 +
 src/patterns/passwords/index.md               |  18 +-
 src/patterns/payment-card-details/index.md    |   4 +
 .../problem-with-the-service-pages/index.md   |  16 +
 src/patterns/question-pages/index.md          |  12 +
 .../service-unavailable-pages/index.md        |   3 +
 src/patterns/start-using-a-service/index.md   |   6 +-
 src/patterns/validation/index.md              |  10 +
 src/styles/images/index.md                    |   4 +-
 src/stylesheets/main.scss                     |   8 +
 44 files changed, 798 insertions(+), 23 deletions(-)
 rename src/{accessibility.md => accessibility-statement.md} (98%)
 create mode 100644 src/accessibility/WCAG-2.2/index.md
 rename src/{community => accessibility}/accessibility-strategy/index.md (99%)
 create mode 100644 src/accessibility/index.md

diff --git a/config/navigation.js b/config/navigation.js
index 16d217f96f..5fd49f8bc4 100644
--- a/config/navigation.js
+++ b/config/navigation.js
@@ -23,6 +23,11 @@ module.exports = [
   {
     label: 'Community',
     url: 'community'
+  },
+  {
+    label: 'Accessibility',
+    url: 'accessibility',
+    includeInSearch: true
   }
 ]
 
diff --git a/src/accessibility.md b/src/accessibility-statement.md
similarity index 98%
rename from src/accessibility.md
rename to src/accessibility-statement.md
index 20cfe5e840..f12a3f39ec 100644
--- a/src/accessibility.md
+++ b/src/accessibility-statement.md
@@ -1,10 +1,10 @@
 ---
-title: Accessibility
+title: Accessibility statement
 description: accessibility in the GOV.UK Design System
 layout: layout-single-page-prose.njk
 ---
 
-# Accessibility
+# Accessibility statement
 
 The GOV.UK Design System team at the Government Digital Service (<abbr>GDS</abbr>) maintains the following products:
 
@@ -16,7 +16,7 @@ This page explains how the team works to ensure these products are accessible.
 
 The GOV.UK Prototype Kit website has a separate accessibility statement. [Read the GOV.UK Prototype Kit website accessibility statement](https://prototype-kit.service.gov.uk/docs/accessibility).
 
-[Read our accessibility strategy](https://design-system.service.gov.uk/community/accessibility-strategy/) for more information on our current principles and work needed to improve the accessibility of the GOV.UK Design System.
+[Read our accessibility strategy](https://design-system.service.gov.uk/accessibility/accessibility-strategy/) for more information on our current principles and work needed to improve the accessibility of the GOV.UK Design System.
 
 [Read about how we test components using accessibility acceptance criteria](https://github.com/alphagov/govuk-frontend/blob/main/docs/contributing/test-components-using-accessibility-acceptance-criteria.md).
 
diff --git a/src/accessibility/WCAG-2.2/index.md b/src/accessibility/WCAG-2.2/index.md
new file mode 100644
index 0000000000..1977eefeb0
--- /dev/null
+++ b/src/accessibility/WCAG-2.2/index.md
@@ -0,0 +1,393 @@
+---
+title: Changes to the Design System to meet WCAG 2.2
+description: Outlines the current principles and work needed to improve the accessibility of the GOV.UK Design System
+section: Accessibility
+layout: layout-pane.njk
+showPageNav: true
+order: 2
+---
+
+{% from "govuk/components/table/macro.njk" import govukTable %}
+
+W3C owns and manages the [Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/).
+
+In 2023, the Design System team assessed and updated the GOV.UK Design System to comply with the new criteria and recommendations given in WCAG 2.2.
+
+Any guidance we provide is to make sure teams using the Design System are aware of the changes and can make the necessary adjustments to their services.
+
+### Make sure your service meets the new WCAG 2.2 criteria
+
+WCAG 2.2 was published in October 2023. You’ll need to comply with the new criteria no later than October 2024. See more about [Meeting government accessibility requirements](https://www.gov.uk/service-manual/helping-people-to-use-your-service/understanding-wcag) in the GOV.UK Service Manual.
+
+### What you need to do
+
+1. Revisit the [Government Digital Service (GDS) guidance](https://www.gov.uk/guidance/accessibility-requirements-for-public-sector-websites-and-apps) on accessibility is and why your service needs to invest in it
+2. Read [What’s new in WCAG 2.2](https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/) to understand the new criteria your service will need to comply with
+3. Ask your wider organisation for support to prepare for work needed to meet WCAG 2.2
+4. Review the lists on this page of affected components and patterns in the Design System
+5. Assess your service to see how many affected components and patterns are in use
+6. Plan and implement the changes needed to your service
+
+Make sure there's expertise within your organisation by advocating for people to receive training in accessibility. To provide some help with this, the Design System team is [organising community events](/community/) to help service teams share information with each other.
+
+### Components and patterns affected in the Design System
+
+We've made changes to these components and patterns to comply with WCAG 2.2 level AA. You must check if your service needs amending to align with these changes.
+
+[Images](/styles/images/) also includes guidance to help ensure icons and images in your service meet Target Size (minimum).
+
+{{ govukTable({
+  caption: "Components",
+  captionClasses: "govuk-table__caption--m",
+  head: [
+    {
+      text: "Component",
+      classes: "govuk-!-width-one-half"
+    },
+    {
+      text: "Relevant WCAG 2.2 criteria",
+      classes: "govuk-!-width-one-half"
+    }
+  ],
+  rows: [
+    [
+      {
+        html: '<a href="/components/back-link/">Back link</a>'
+      },
+      {
+        html: 'Redundant entry<br>Target size (minimum)'
+      }
+    ],
+    [
+      {
+        html: '<a href="/components/breadcrumbs/">Breadcrumbs</a>'
+      },
+      {
+        html: 'Target size (minimum)'
+      }
+    ],
+    [
+      {
+        html: '<a href="/components/button/">Button</a>'
+      },
+      {
+        html: 'Target size (minimum)'
+      }
+    ],
+    [
+      {
+        html: '<a href="/components/cookie-banner/">Cookie banner</a>'
+      },
+      {
+        html: 'Focus not obscured (minimum)<br>Target size (minimum)'
+      }
+    ],
+    [
+      {
+        html: '<a href="/components/error-message/">Error message</a>'
+      },
+      {
+        html: 'Redundant entry'
+      }
+    ],
+    [
+      {
+        html: '<a href="/components/file-upload/">File upload</a>'
+      },
+      {
+        html: 'Dragging movements<br>Redundant entry'
+      }
+    ],
+    [
+      {
+        html: '<a href="/components/footer/">Footer</a>'
+      },
+      {
+        html: 'Consistent help'
+      }
+    ],
+    [
+      {
+        html: '<a href="/components/header/">Header</a>'
+      },
+      {
+        html: 'Focus not obscured (Minimum)<br>Focus appearance'
+      }
+    ],
+    [
+      {
+        html: '<a href="/components/panel/">Panel</a>'
+      },
+      {
+        html: 'Redundant entry'
+      }
+    ],
+    [
+      {
+        html: '<a href="/components/phase-banner/">Phase banner</a>'
+      },
+      {
+        html: 'Focus not obscured (minimum)'
+      }
+    ],
+    [
+      {
+        html: '<a href="/components/select/">Select</a>'
+      },
+      {
+        html: 'Dragging movements'
+      }
+    ],
+    [
+      {
+        html: '<a href="/components/summary-list/">Summary list</a>'
+      },
+      {
+        html: 'Redundant entry<br>Target size (minimum)'
+      }
+    ],
+    [
+      {
+        html: '<a href="/components/tag/">Tag</a>'
+      },
+      {
+        html: 'Dragging movements<br>Focus appearance'
+      }
+    ]
+  ]
+}) }}
+
+{{ govukTable({
+  caption: "Patterns to ask users for information",
+  captionClasses: "govuk-table__caption--m",
+  head: [
+    {
+      text: "Ask users for...",
+      classes: "govuk-!-width-one-half"
+    },
+    {
+      text: "Relevant WCAG 2.2 criteria",
+      classes: "govuk-!-width-one-half"
+    }
+  ],
+  rows: [
+    [
+      {
+        html: '<a href="/patterns/addresses/">Addresses</a>'
+      },
+      {
+        html: 'Redundant entry'
+      }
+    ],
+    [
+      {
+        html: '<a href="/patterns/bank-details/">Bank details</a>'
+      },
+      {
+        html: 'Redundant entry'
+      }
+    ],
+    [
+      {
+        html: '<a href="/patterns/email-addresses/">Email addresses</a>'
+      },
+      {
+        html: 'Redundant entry'
+      }
+    ],
+    [
+      {
+        html: '<a href="/patterns/equality-information/">Equality information</a>'
+      },
+      {
+        html: 'Redundant entry'
+      }
+    ],
+    [
+      {
+        html: '<a href="/patterns/names/">Names</a>'
+      },
+      {
+        html: 'Redundant entry'
+      }
+    ],
+    [
+      {
+        html: '<a href="/patterns/national-insurance-numbers/">National Insurance Numbers</a>'
+      },
+      {
+        html: 'Redundant entry'
+      }
+    ],
+    [
+      {
+        html: '<a href="/patterns/passwords/">Passwords</a>'
+      },
+      {
+        html: 'Accessible authentication<br>Consistent help<br>Target size (minimum)'
+      }
+    ],
+    [
+      {
+        html: '<a href="/patterns/payment-card-details/">Payment card details</a>'
+      },
+      {
+        html: 'Redundant entry'
+      }
+    ]
+  ]
+}) }}
+
+{{ govukTable({
+  caption: "Patterns to help users do things",
+  captionClasses: "govuk-table__caption--m",
+  head: [
+    {
+      text: "Help users to...",
+      classes: "govuk-!-width-one-half"
+    },
+    {
+      text: "Relevant WCAG 2.2 criteria",
+      classes: "govuk-!-width-one-half"
+    }
+  ],
+  rows: [
+    [
+      {
+        html: '<a href="/patterns/check-a-service-is-suitable/">Check a service is suitable</a>'
+      },
+      {
+        html: 'Redundant entry'
+      }
+    ],
+    [
+      {
+        html: '<a href="/patterns/check-answers/">Check answers</a>'
+      },
+      {
+        html: 'Redundant entry'
+      }
+    ],
+    [
+      {
+        html: '<a href="/patterns/complete-multiple-tasks/">Complete multiple tasks</a>'
+      },
+      {
+        html: 'Dragging movements<br>Redundant entry'
+      }
+    ],
+    [
+      {
+        html: '<a href="/patterns/confirm-a-phone-number/">Confirm a phone number</a>'
+      },
+      {
+        html: 'Consistent help'
+      }
+    ],
+    [
+      {
+        html: '<a href="/patterns/confirm-an-email-address/">Confirm an email address</a>'
+      },
+      {
+        html: 'Accessible authentication'
+      }
+    ],
+    [
+      {
+        html: '<a href="/patterns/contact-a-department-or-service-team/">Contact a department or service team</a>'
+      },
+      {
+        html: 'Consistent help'
+      }
+    ],
+    [
+      {
+        html: '<a href="/patterns/create-accounts/">Create accounts</a>'
+      },
+      {
+        html: 'Accessible authentication<br>Redundant entry'
+      }
+    ],
+    [
+      {
+        html: '<a href="/patterns/start-using-a-service/">Start using a service</a>'
+      },
+      {
+        html: 'Focus appearance'
+      }
+    ],
+    [
+      {
+        html: '<a href="/patterns/validation/">Recover from validation errors</a>'
+      },
+      {
+        html: 'Redundant entry'
+      }
+    ]
+  ]
+}) }}
+
+{{ govukTable({
+  caption: "Page patterns",
+  captionClasses: "govuk-table__caption--m",
+  head: [
+    {
+      text: "Page",
+      classes: "govuk-!-width-one-half"
+    },
+    {
+      text: "Relevant WCAG 2.2 criteria",
+      classes: "govuk-!-width-one-half"
+    }
+  ],
+  rows: [
+    [
+      {
+        html: '<a href="/patterns/confirmation-pages/">Confirmation pages</a>'
+      },
+      {
+        html: 'Dragging movements<br>Focus appearance<br>Redundant entry'
+      }
+    ],
+    [
+      {
+        html: '<a href="/patterns/cookies-page/">Cookies page </a>'
+      },
+      {
+        html: 'Redundant entry'
+      }
+    ],
+    [
+      {
+        html: '<a href="/patterns/page-not-found-pages/">Page not found pages</a>'
+      },
+      {
+        html: 'Consistent help'
+      }
+    ],
+    [
+      {
+        html: '<a href="/patterns/question-pages/">Question pages</a>'
+      },
+      {
+        html: 'Dragging movements<br>Redundant entry'
+      }
+    ],
+    [
+      {
+        html: '<a href="/patterns/service-unavailable-pages/">Service unavailable pages</a>'
+      },
+      {
+        html: 'Consistent help'
+      }
+    ],
+    [
+      {
+        html: '<a href="/patterns/problem-with-the-service-pages/">There is a problem with the service pages</a>'
+      },
+      {
+        html: 'Consistent help'
+      }
+    ]
+  ]
+}) }}
diff --git a/src/community/accessibility-strategy/index.md b/src/accessibility/accessibility-strategy/index.md
similarity index 99%
rename from src/community/accessibility-strategy/index.md
rename to src/accessibility/accessibility-strategy/index.md
index 15223e6b1d..daa6443e0e 100644
--- a/src/community/accessibility-strategy/index.md
+++ b/src/accessibility/accessibility-strategy/index.md
@@ -1,11 +1,10 @@
 ---
 title: Accessibility strategy
 description: Outlines the current principles and work needed to improve the accessibility of the GOV.UK Design System
-section: Community
-theme: How we work
+section: Accessibility
 layout: layout-pane.njk
 showPageNav: true
-order: 9
+order: 3
 ---
 
 This accessibility strategy outlines the current principles and work needed to improve the accessibility of the GOV.UK Design System.
diff --git a/src/accessibility/index.md b/src/accessibility/index.md
new file mode 100644
index 0000000000..6b564b32b4
--- /dev/null
+++ b/src/accessibility/index.md
@@ -0,0 +1,18 @@
+---
+layout: layout-pane.njk
+title: Accessibility
+description:  tbd
+showSubNav: true
+---
+
+Our work to make the GOV.UK Design System meet public sector accessibility regulations is a continuous and iterative process. You must [make sure your service is accessible](https://www.gov.uk/guidance/accessibility-requirements-for-public-sector-websites-and-apps). We outline our approach on our [accessibility strategy](/accessibility/accessibility-strategy/).
+
+Using the GOV.UK Design System in a service does not immediately make that service accessible. You’ll need additional research, design, development and testing work to make sure your service is accessible, even when using accessible styles, components and patterns.
+
+### Accessibility changes to the Design System to meet WCAG 2.2
+
+[Read our guidance on the Web Content Accessibility Guidelines (WCAG) 2.2](/accessibility/WCAG-2.2) to make sure teams using the Design System are aware of the changes and can make the necessary adjustments to their services.
+
+### Accessibility strategy
+
+[Read our accessibility strategy](/accessibility/accessibility-strategy/) for more information on our current principles and work needed to improve the accessibility of the GOV.UK Design System.
diff --git a/src/components/back-link/index.md b/src/components/back-link/index.md
index 8fe5000ddf..6afcb1284a 100644
--- a/src/components/back-link/index.md
+++ b/src/components/back-link/index.md
@@ -8,6 +8,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 Use the back link component to help users go back to the previous page in a multi-page transaction.
 
@@ -29,9 +30,15 @@ Never use the back link component together with [breadcrumbs](/components/breadc
 
 Always place back links at the top of a page, before the `<main>` element. Placing them here means that the 'Skip to main content' link allows the user to skip all navigation links, including the back link.
 
-Make sure the link takes users to the previous page they were on, in the state they last saw it. Where possible, ensure it works even when JavaScript is not available.
+Make sure the link takes users to the previous page they were on, in the state they last saw it.
 
-If this is not possible, you should hide the back link when JavaScript is not available.
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> If a user decides to go 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](https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html).
+
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Make sure no other interactive elements are too close to the back link. This is to make sure users can easily interact with the back link. This relates to WCAG 2.2 success criterion [2.5.8 Target Size (minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html).
+
+Where possible, ensure the back link works even when JavaScript is not available. If this is not possible, you should hide the back link when JavaScript is not available.
 
 There are 2 ways to use the back link component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://prototype-kit.service.gov.uk), you can use the Nunjucks macro.
 
diff --git a/src/components/breadcrumbs/index.md b/src/components/breadcrumbs/index.md
index fb93aa4579..81883b7fcc 100644
--- a/src/components/breadcrumbs/index.md
+++ b/src/components/breadcrumbs/index.md
@@ -8,6 +8,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 The breadcrumbs component helps users to understand where they are within a website’s structure and move between levels.
 
@@ -27,7 +28,9 @@ If you’re using other navigational elements on the page, such as a sidebar, co
 
 Always place breadcrumbs at the top of a page, before the `<main>` element. Placing them here means that the 'Skip to main content' link allows the user to skip all navigation links, including breadcrumbs.
 
-The breadcrumb should start with your 'home' page and end with the parent section of the current page.
+The breadcrumbs should start with your 'home' page and end with the parent section of the current page.
+
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Make sure no other interactive elements are too close to the breadcrumbs. This is to make sure users can easily interact with the breadcrumbs. This relates to WCAG 2.2 success criterion [2.5.8 Target Size (minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html).
 
 There are 2 ways to use the breadcrumbs component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://prototype-kit.service.gov.uk), you can use the Nunjucks macro.
 
diff --git a/src/components/button/index.md b/src/components/button/index.md
index 226d094f85..155d4e1431 100644
--- a/src/components/button/index.md
+++ b/src/components/button/index.md
@@ -8,6 +8,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 {{ example({ group: "components", item: "button", example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }}
 
@@ -34,6 +35,8 @@ You may need to include more or different words to better describe the action. F
 
 Align the primary action button to the left edge of your form.
 
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Do not decrease the height or target area of buttons. This is to make sure users can easily interact with buttons. This is to comply with WCAG 2.2 success criterion [2.5.8 Target Size (minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html).
+
 There are 2 ways to use the button component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://prototype-kit.service.gov.uk), you can use the Nunjucks macro.
 
 ### Default buttons
diff --git a/src/components/cookie-banner/index.md b/src/components/cookie-banner/index.md
index b0cbfb71a7..7b19d12017 100644
--- a/src/components/cookie-banner/index.md
+++ b/src/components/cookie-banner/index.md
@@ -8,6 +8,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 Allow users to accept or reject cookies which are not essential to making your service work.
 
@@ -63,6 +64,8 @@ Make sure the cookie banner does not:
 
 Position the cookie banner after the opening `<body>` tag and before the ’skip to main content‘ link. If you're using the Nunjucks page template, use the `bodyStart` block.
 
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Do not make the cookie banner ‘sticky’ to the top of the page by using `position: fixed` or any other method. This is to make sure it does not cover or obscure any content which has a focus applied. This is to comply with WCAG 2.2 success criterion [2.4.11 Focus not Obscured (minimum)](https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html).
+
 ### Option 1: If you’re only using essential cookies
 
 You can choose not to have a cookie banner if the service only sets essential or 'strictly necessary' cookies, as these do not need user consent.
diff --git a/src/components/error-message/index.md b/src/components/error-message/index.md
index f94edd2480..f622bbcaf0 100644
--- a/src/components/error-message/index.md
+++ b/src/components/error-message/index.md
@@ -8,6 +8,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 This guidance is for government teams that build online services. [To find information and services for the public, go to GOV.UK](https://www.gov.uk/).
 
@@ -41,6 +42,14 @@ For each error:
 - use a red border to visually connect the message and the question it belongs to
 - if the error relates to a specific field within the question, give it a red border and refer to that field in the error message - for example: "you must enter a year"
 
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Do not clear any form fields when adding error messages. This is to comply with WCAG 2.2 success criterion [3.3.7 Redundant Entry](https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html).
+
+Keeping information that caused errors helps users to:
+
+- see what went wrong
+- edit their previous answer
+- avoid re-entering information
+
 To help screen reader users, the error message component includes a hidden 'Error:' before the error message. These users will hear, for example, "Error: The date your passport was issued must be in the past".
 
 If your error message is written in another language, you can change the prefix as needed, as shown in this example.
diff --git a/src/components/file-upload/index.md b/src/components/file-upload/index.md
index 4f74d9124f..dd917493d7 100644
--- a/src/components/file-upload/index.md
+++ b/src/components/file-upload/index.md
@@ -8,6 +8,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 This guidance is for government teams that build online services. [To find information and services for the public, go to GOV.UK](https://www.gov.uk/).
 
@@ -21,6 +22,19 @@ You should only ask users to upload something if it’s critical to the delivery
 
 ## How it works
 
+To upload a file, the user can either:
+
+- use the ‘Choose file’ button
+- ‘drag and drop’ a file into the file upload input area
+
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Do not use ‘drag and drop’ as the only way to upload files. You must provide another method, such as the ‘Choose file’ button. This is to comply with WCAG 2.2 success criterion [2.5.7 Dragging Movements](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html).
+
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Make sure users can easily reuse a previously uploaded file within a single journey, unless doing so would be a major security concern.
+
+For example, a user might need to upload a photo of their driving licence to prove their identity, and again to prove their address.
+
+You can make it easier for the user to reuse a file by showing it as an option for the user to select instead of the file upload. Consider users on public devices before choosing to make the file available to preview or download. This is to comply with WCAG 2.2 success criterion [3.3.7 Redundant Entry](https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html).
+
 There are 2 ways to use the file upload component. You can use HTML or, if you’re using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://prototype-kit.service.gov.uk), you can use the Nunjucks macro.
 
 {{ example({ group: "components", item: "file-upload", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second" }) }}
diff --git a/src/components/footer/index.md b/src/components/footer/index.md
index 1e8a851036..4d0f8ee206 100644
--- a/src/components/footer/index.md
+++ b/src/components/footer/index.md
@@ -8,6 +8,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 The footer provides copyright, licensing and other information about your service.
 
@@ -42,9 +43,12 @@ You can add links to:
 - [cookies page](/patterns/cookies-page/)
 - terms and conditions
 - other language options
+- help content
 
 Use ‘Privacy’, ‘Accessibility’, ‘Cookies’ and ‘Terms and conditions’ for the link text.
 
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> If you include links to ‘help’ pages within a footer, make sure to place those links consistently within the footer content. Also make sure that ‘help’ links always function in a similar way across each page. This is to comply with WCAG 2.2 success criterion [3.2.6 Consistent Help](https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html).
+
 ## Adding secondary navigation
 
 Only add secondary GOV.UK navigation if you’re creating a GOV.UK service, and you want users to be able to navigate away from the service to somewhere else on the GOV.UK website. For example, you probably don’t want to encourage a user to navigate away from a linear, form-type service.
diff --git a/src/components/header/index.md b/src/components/header/index.md
index 532b26b7b3..4254d8d27d 100644
--- a/src/components/header/index.md
+++ b/src/components/header/index.md
@@ -7,6 +7,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 The GOV.UK header shows users that they are on GOV.UK and which service they are using.
 
@@ -44,4 +45,14 @@ Use the header with a service name if your service is more than 5 pages long - t
 
 Use the header with navigation if you need to include basic navigation, contact or account management links.
 
-{{ example({ group: "components", item: "header", example: "with-service-name-and-navigation", html: true, nunjucks: true, open: false, size: "s" }) }}
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Do not make header elements, like dropdown menus, ‘sticky’ to the top of the page by using `position: fixed` or any other method. In other words, avoid any implementations that cause menus to sit on top of page content.
+
+This is to make sure it does not hide or obscure any content which has a focus applied and comply with WCAG 2.2 success criterion [2.4.11 Focus not Obscured (minimum)](https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html).
+
+In November 2021, [the GOV.UK homepage introduced a menu bar](https://insidegovuk.blog.gov.uk/2021/11/11/launching-gov-uks-new-menu-bar/) that avoids obscuring content by shifting the page down.
+
+{{ example({group: "components", item: "header", example: "with-service-name-and-navigation", html: true, nunjucks: true, open: false, size: "s"}) }}
+
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> You can add a link to a ‘help’ page in your service’s header. If you do, the link must be positioned consistently within the header, and must always link to the same place.
+
+For example, a header link to “Get help with this service” must go to the same place as similar header links elsewhere in your service. This is to comply with WCAG 2.2 success criterion [3.2.6 Consistent Help](https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html).
diff --git a/src/components/panel/index.md b/src/components/panel/index.md
index 81a7cbb6eb..9a6c85ea1f 100644
--- a/src/components/panel/index.md
+++ b/src/components/panel/index.md
@@ -8,6 +8,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 The panel component is a visible container used on confirmation or results pages to highlight important content.
 
@@ -36,3 +37,13 @@ Keep your panel text brief, as it's only meant for a high-level explanation of w
 Aim to use short words and phrases to make sure highlighted information is easy to read at different screen sizes. For example, shorter amounts of information is less likely to wrap around the panel, which can happen when using the zoom function on mobiles.
 
 If you need to give detailed information, or more context, use the description text under the heading text.
+
+### Selecting and copying information
+
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Allow users to select and copy text within a [confirmation page](patterns/confirmation-page/) as well as its panel component. For example, users should be able to select and copy a booking number. This relates to WCAG 2.2 success criterion [3.3.7 Redundant Entry](https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html).
+
+Consider offering an option for the user to copy information in the panel component area into their device’s clipboard if there’s information that the user is expected:
+
+- save
+- remember
+- copy
diff --git a/src/components/phase-banner/index.md b/src/components/phase-banner/index.md
index a997a44c77..1cb1c18c55 100644
--- a/src/components/phase-banner/index.md
+++ b/src/components/phase-banner/index.md
@@ -8,6 +8,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 Use the phase banner component to show users your service is still being worked on.
 
@@ -23,6 +24,8 @@ Use an alpha banner when your service is in alpha, and a beta banner if your ser
 
 Your banner must be directly under the black GOV.UK header and colour bar.
 
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Do not make the phase banner ‘sticky’ to the top of the page by using `position: fixed` or any other method. This is to make sure it does not cover or obscure any content which has a focus applied. This is to comply with WCAG 2.2 success criterion [2.4.11 Focus not Obscured (minimum)](https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html).
+
 There are 2 ways to use the phase banner component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://prototype-kit.service.gov.uk), you can use the Nunjucks macro.
 
 {{ example({ group: "components", item: "phase-banner", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second" }) }}
diff --git a/src/components/select/index.md b/src/components/select/index.md
index 68a95c52e9..bc261053b8 100644
--- a/src/components/select/index.md
+++ b/src/components/select/index.md
@@ -8,6 +8,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 {{ example({ group: "components", item: "select", example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }}
 
@@ -45,6 +46,12 @@ Style error messages as shown in the example:
 
 {{ example({ group: "components", item: "select", example: "error", html: true, nunjucks: true, open: false }) }}
 
+### Avoid adding functionality to allow selecting multiple options
+
+The select component does not support selecting multiple options, [as there’s a history of poor usability and assistive technology support for `<select multiple>`](https://www.24a11y.com/2019/select-your-poison/). If you need to ask the user to pick more than one item from a list, it’s almost always better to use another method, such as a list of checkboxes.
+
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Any input that’s designed to let a user select multiple options must offer a way to do so without relying on ‘click and drag’ movements or keyboard and mouse combination actions. This is to comply with WCAG 2.2 success criterion [2.5.7 Dragging Movements](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html).
+
 ## Research on this component
 
 User research has shown that some users struggle with selects.
diff --git a/src/components/summary-list/index.md b/src/components/summary-list/index.md
index 9a380a4711..5cc7fa036c 100644
--- a/src/components/summary-list/index.md
+++ b/src/components/summary-list/index.md
@@ -8,9 +8,36 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 Use a summary list to summarise information, for example, a user’s responses at the end of a form.
 
+{% set wcagCallout %}
+
+  <p class="govuk-!-margin-bottom-2">
+    {{ govukTag({
+      text: "WCAG 2.2"
+    })}}
+  </p>
+
+### WCAG 2.2 criteria might affect this component
+
+To use ‘Summary list’ and comply with new success criteria introduced in Web Content Accessibility Guidelines (WCAG) 2.2, make sure that users can successfully:
+
+- [interact with row actions](/components/summary-list/#wcag-interact-row-actions)
+- [change information they've previously given in an answer](/components/summary-list/#wcag-change-answers)
+
+See the full list of components and patterns affected on our '[Changes to meet WCAG 2.2 page](/accessibility/WCAG-2.2/#components-affected-in-the-design-system)'.
+{% endset %}
+
+{{ govukInsetText({
+  html: wcagCallout,
+  attributes: {
+    style: 'border-left-color: #1d70b8;'
+  }
+})}}
+
 {{ example({ group: "components", item: "summary-list", example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }}
 
 ## When to use this component
@@ -46,12 +73,33 @@ You can add ‘row actions’ to a summary list. For example, you can help users
 
 When navigating visually, the borders above and below each row help to show which row action is tied to which piece of information.
 
+There's a few things to keep in mind to ensure that users can successfully use row actions.
+
+<div class="app-wcag-22" id="wcag-interact-row-actions" role="note">
+  <strong class="govuk-tag">WCAG 2.2</strong>
+  <p>
+    <span>Keep card and row actions as ‘<a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content">inline links</a>’. This is to make sure that sets of actions reflow properly on different screen sizes. This relates to WCAG 2.2 success criterion <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">2.5.8 Target Size (minimum)</a>.</span>
+  </p>
+</div>
+
+<div class="app-wcag-22" id="wcag-change-answers" role="note">
+  <strong class="govuk-tag">WCAG 2.2</strong>
+  <p>
+    If a user decides to go back to a previous answer through a card or row action, make sure information they have already entered is pre-populated.
+  </p>
+  <p>
+    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 <a href="https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html">3.3.7 Redundant Entry</a>.
+  </p>
+</div>
+
 Assistive technology users, including those who use a screen reader, might hear a row action link out of context and might not know what it will do.
 
 To give more context, add visually hidden text to the links. This means a screen reader user will hear the row action and the ‘key’ label for the information it will affect, like ‘Change name’ or ‘Change date of birth’.
 
 {{ example({ group: "components", item: "summary-list", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second" }) }}
 
+#### Showing rows with and without actions
+
 If you’re showing a mix of rows (where some rows include actions and some do not), add the `govuk-summary-list__row--no-actions` modifier class to the rows without actions. This is to ensure the bottom border is drawn correctly in some browsers.
 
 {{ example({ group: "components", item: "summary-list", example: "mixed-actions", html: true, nunjucks: true, open: false }) }}
diff --git a/src/components/tag/index.md b/src/components/tag/index.md
index 8e93cdfad3..5048a6e86d 100644
--- a/src/components/tag/index.md
+++ b/src/components/tag/index.md
@@ -8,6 +8,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 Use the tag component to show users the status of something.
 
@@ -21,7 +22,12 @@ Use the tag component when it’s possible for something to have more than one s
 
 There are two ways to use the tag component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://prototype-kit.service.gov.uk), you can use the Nunjucks macro.
 
-Tags are just used to indicate a status, so do not add links. Use adjectives rather than verbs for the names of your tags. Using a verb might make a user think that clicking on them will do something.
+Tags are only used to indicate a status. Do not make a tag interactive by making it into a link or button. Use adjectives (descriptive words) and not verbs (action words) for the names of your tags. Using a verb might make a user think that clicking on them will do something.
+
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Do not use tags to create links, buttons or other interactive elements, as users:
+
+- are unlikely to identify the tags as something they’re meant to interact with
+- would see no visual difference between interactive and non-interactive tags
 
 ## Showing one or two statuses
 
@@ -39,6 +45,8 @@ Tags should be helpful to users. The more you add, the harder it is for users to
 
 {{ example({ group: "components", item: "tag", example: "coloured-tags", html: true, nunjucks: true, open: false }) }}
 
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Any tag implementation that allows you to change the order of tags must offer a way to do so without relying on ‘click and drag’ movements. This is to comply with WCAG 2.2 success criterion [2.5.7 Dragging Movements](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html).
+
 ## Using colour with tags
 
 You can use colour to help distinguish between different tags – or to help draw the user’s attention to a tag if it’s especially important. For example, it probably makes sense to use `govuk-tag--red` for a tag that reads ‘Urgent’.
diff --git a/src/index.njk b/src/index.njk
index d130741b6d..a07fa6ea6a 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -37,7 +37,7 @@ The GOV.UK Design System helps teams that work on government services follow the
         </p>
 
       <p class="govuk-body">
-<a class="govuk-link" href="/community/accessibility-strategy/">Our accessibility strategy</a> outlines our principles and work to improve accessibility within the GOV.UK Design System.</p>
+<a class="govuk-link" href="/accessibility/accessibility-strategy/">Our accessibility strategy</a> outlines our principles and work to improve accessibility within the GOV.UK Design System.</p>
       </div>
 
       <div class="govuk-grid-column-full">
diff --git a/src/patterns/addresses/index.md b/src/patterns/addresses/index.md
index 8f9a36c341..1365e84164 100644
--- a/src/patterns/addresses/index.md
+++ b/src/patterns/addresses/index.md
@@ -9,6 +9,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 This guidance is for government teams that build online services. [To find information and services for the public, go to GOV.UK](https://www.gov.uk/).
 
@@ -18,6 +19,19 @@ Help users provide an address using one of the following:
 - Address lookup
 - Textarea
 
+### Reusing entered addresses
+
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Make sure users can easily reuse a previously entered address within a single journey, unless doing so would be a major safety or security concern. This is to comply with WCAG 2.2 success criterion [3.3.7 Redundant Entry](https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html).
+
+You can make it easier to reuse addresses through one of these methods:
+
+- pre-populate address fields with the previously entered address
+- show any previously entered addresses as an option for the user to select
+
+For example, show an option to reuse an entered delivery address as the billing address.
+
+Continue to give users the option to enter a new address.
+
 ## Multiple text inputs
 
 {{ example({ group: "patterns", item: "addresses", example: "multiple", html: true, nunjucks: true, open: true, size: "xl", loading: "eager" }) }}
diff --git a/src/patterns/bank-details/index.md b/src/patterns/bank-details/index.md
index 4e058f6f23..47812ba0ac 100644
--- a/src/patterns/bank-details/index.md
+++ b/src/patterns/bank-details/index.md
@@ -9,6 +9,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 This guidance is for government teams that build online services. [To find information and services for the public, go to GOV.UK](https://www.gov.uk/).
 
@@ -34,6 +35,19 @@ Do not ask users if they have a bank account or building society account as not
 
 If your service does not support building society accounts, remove building society from the content and do not ask for a roll number.
 
+### Reusing entered bank details
+
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Do not ask for bank details more than once within a single journey if only one transaction is taking place.
+
+Make sure users can easily reuse previously entered bank details within a single journey, unless the information is no longer valid or doing so would be a major safety or security concern. This is to comply with WCAG 2.2 success criterion [3.3.7 Redundant Entry](https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html).
+
+You can make it easier to reuse bank details through one of these methods:
+
+- pre-populate fields with the previously entered bank details
+- show any previously entered bank details as an option for the user to select
+
+Continue to give users the option to enter new bank details.
+
 ### Asking for building society roll numbers
 
 Roll numbers are only used by some building societies for certain types of account, so make this field optional.
diff --git a/src/patterns/check-a-service-is-suitable/index.md b/src/patterns/check-a-service-is-suitable/index.md
index 0b957d7052..951bb4b95c 100644
--- a/src/patterns/check-a-service-is-suitable/index.md
+++ b/src/patterns/check-a-service-is-suitable/index.md
@@ -8,12 +8,25 @@ backlogIssueId: 35
 layout: layout-pane.njk
 ---
 
+{% from "govuk/components/tag/macro.njk" import govukTag %}
+
 Ask users questions to help them work out if they can or should use your service.
 
 Doing this helps users save time as it tells them upfront whether they are eligible to use it and if they need it.
 
 It can also help reduce time and money spent processing queries from users confused about whether they’re eligible to use your service, or if it’s suitable for them.
 
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Make sure to not repeat questions or request information the user will need to re-provide later.
+
+If during the process a service is determined to be suitable, consider offering a secure method to carry forward relevant responses into the service journey, unless carrying forward would be a major safety concern.
+
+You can make it easier to enter the same information within the service through one of these methods:
+
+- pre-populating the relevant fields
+- showing carried-forward responses as an option for the user to select
+
+This is to comply with WCAG 2.2 success criterion [3.3.7 Redundant Entry](https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html).
+
 ![‘Check a service is suitable’ flow diagram. Contains an introduction page followed by a series of simple questions. If at any point a user is deemed not eligible for the service they will be pointed to a page that explains why they are not eligible. Otherwise they will be presented an ‘application complete’ page. ](check-a-service-is-suitable-new.svg)
 
 ## When to use this pattern
diff --git a/src/patterns/check-answers/index.md b/src/patterns/check-answers/index.md
index f05032509c..7088d00490 100644
--- a/src/patterns/check-answers/index.md
+++ b/src/patterns/check-answers/index.md
@@ -9,6 +9,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 Let users check their answers before submitting information to a service.
 
@@ -55,7 +56,11 @@ On the page, you should also:
 
 You should provide a ‘Change’ link next to each section on your check answers page so that users can add or change the information. 'Change' links contain hidden text to make them accessible to screen reader users. Update the hidden text to describe what each 'change' link is for.
 
-The answers pages should look the same way they did when the user last used them, with all their answers pre-populated.
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> If a user decides to go back to a previous answer, make sure information they've 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](https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html).
+
+The answers pages should look the same way they did when the user last used them.
 
 When they’ve finished, the ‘Continue’ button should return them to the check answers page. They should not need to go through the rest of the transaction again.
 
diff --git a/src/patterns/complete-multiple-tasks/index.md b/src/patterns/complete-multiple-tasks/index.md
index f8644ecb4e..6d1c59e2e0 100644
--- a/src/patterns/complete-multiple-tasks/index.md
+++ b/src/patterns/complete-multiple-tasks/index.md
@@ -9,6 +9,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 Help users understand:
 
@@ -40,15 +41,17 @@ If you use a complete multiple tasks page in your service, you'll need to:
 
 If there are lots of tasks to complete, you might also need to group them further into steps.
 
-### Group related actions into tasks
+### Show related actions as a task
 
-Group related activities and questions into tasks, for example, ‘Provide financial evidence’ and ‘Give medical information’. This will help users understand and plan what they need to do.
+Summarise a set of related activities and questions into a task, for example, ‘Provide financial evidence’ and ‘Give medical information’. This will help users understand and plan what they need to do.
 
 Where possible, task names should:
 
 - describe what the task or activity will involve
 - start with verbs, for example, ‘check’, ‘declare’, ‘report’
 
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Any task list that allows the user to rearrange the order that tasks are shown must offer a way to do so without relying on ‘click and drag’ movements. This is to comply with [WCAG 2.2 success criterion 2.5.7 Dragging Movements](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html).
+
 ### Show the status of the tasks
 
 Make it clear to users which tasks they’ve completed and which still need their attention, by labelling them using statuses.
@@ -124,6 +127,10 @@ If the user selects ‘No, I’ll come back to it later,’ mark the task as 'In
 
 If the user selects ‘Yes, I’ve completed this section,’ mark the task as 'Completed'.
 
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> If a user decides to go back to a previous task, 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](https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html).
+
 {{ example({ group: "patterns", item: "complete-multiple-tasks", example: "have-you-completed-this-section", html: true, nunjucks: true, open: false }) }}
 
 Always allow users to go back into a task to change their answer.
diff --git a/src/patterns/confirm-a-phone-number/index.md b/src/patterns/confirm-a-phone-number/index.md
index 9b3424c8cd..703492167e 100644
--- a/src/patterns/confirm-a-phone-number/index.md
+++ b/src/patterns/confirm-a-phone-number/index.md
@@ -10,6 +10,7 @@ layout: layout-pane.njk
 
 {% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 Check that a user has access to a specific mobile phone number using a security code sent by text message.
 
@@ -34,6 +35,8 @@ Send and ask the user for the security code when they:
 
 When the user creates an account, ask for their password and mobile phone number at the same time. Make it clear if you'll only use the mobile number for sending security codes, or if you'll also use it for other purposes.
 
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> You must always include the link for 'Not received a text message?’ so the user can find help in a consistent way. This relates to WCAG 2.2 success criterion [3.2.6 Consistent Help](https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html).
+
 After saving the user’s password and mobile phone number, verify their mobile phone number by sending them a text message with a 5 digit code in this format:
 
 {{ govukInsetText({
@@ -71,7 +74,9 @@ Ask the user to enter this code. Use the same pattern and time limit as when cre
 
 If they follow the ‘Not received a text message?’ link, show them a page allowing them to request a new code. Do not reveal the mobile number you sent it to.
 
-{{ example({ group: "patterns", item: "confirm-a-phone-number", example: "resend", html: true, nunjucks: true, open: false }) }}
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> You must always include the link for 'Not received a text message?’ so the user can find help in a consistent way. This relates to WCAG 2.2 success criterion [3.2.6 Consistent Help](https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html).
+
+{{ example({group: "patterns", item: "confirm-a-phone-number", example: "resend", html: true, nunjucks: true, open: false}) }}
 
 You should tell the user what to do if they no longer have access to the phone used to sign up.
 
diff --git a/src/patterns/confirm-an-email-address/index.md b/src/patterns/confirm-an-email-address/index.md
index ef2e559788..05f9c85dc4 100644
--- a/src/patterns/confirm-an-email-address/index.md
+++ b/src/patterns/confirm-an-email-address/index.md
@@ -41,6 +41,10 @@ If you use email confirmation loops you must consider:
 - whether to use a blocking or non-blocking loop
 - the design of the ‘activate your account’ page
 
+Most email confirmation loops will send the user a link and ask them to click it to return to the service. Another approach is to send the user a security code, similar to the [Confirm a phone number](/patterns/confirm-a-phone-number/) pattern, and ask the user to enter it.
+
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> You must allow users to copy and paste any security codes. Avoid making the user memorise or transcribe a security code between apps or browser tabs to use your service. This is to comply with WCAG 2.2 success criterion [3.3.8 Accessible Authentication (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum).
+
 ### Set expiry conditions
 
 You must set an expiry date on the email you send so that the link cannot be used after a certain period of time.
diff --git a/src/patterns/confirmation-pages/index.md b/src/patterns/confirmation-pages/index.md
index 9fe2a60f89..f22af702d0 100644
--- a/src/patterns/confirmation-pages/index.md
+++ b/src/patterns/confirmation-pages/index.md
@@ -9,6 +9,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 Use this pattern to let users know they’ve completed a transaction.
 
@@ -33,7 +34,9 @@ Your confirmation page must include:
 - a link to your [feedback page](https://www.gov.uk/service-manual/service-assessments/get-feedback-page)
 - a way for users to save a record of the transaction, for example, as a PDF
 
-{{ example({ group: "patterns", item: "confirmation-pages", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second", size: "xl" }) }}
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Do not include links, buttons or other interactive elements in the green confirmation panel, as the focus state will not have a minimum contrast ratio of 3:1 with the panel’s background colour.
+
+{{ example({group: "patterns", item: "confirmation-pages", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second", size: "xl"}) }}
 
 ### Help users who bookmark the page
 
@@ -45,6 +48,14 @@ If you cannot, make sure your service responds in a helpful way when users retur
 - starting a new application
 - what to do or who to contact if they have a problem with their application
 
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Allow users to select and copy text within a confirmation page as well as its [panel component](/components/panel/). For example, users should be able to select and copy a booking number. This relates to WCAG 2.2 success criterion [3.3.7 Redundant Entry](https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html).
+
+Consider offering an option for the user to copy information in the panel component area into their device’s clipboard if there’s information that the user is expected to:
+
+- save
+- remember
+- copy
+
 ## Research on this pattern
 
 [Read a blog post about users who bookmark confirmation pages](https://designnotes.blog.gov.uk/2015/12/10/do-users-return-to-your-service-after-finishing/).
diff --git a/src/patterns/contact-a-department-or-service-team/index.md b/src/patterns/contact-a-department-or-service-team/index.md
index aba627ad55..fac7e20f74 100644
--- a/src/patterns/contact-a-department-or-service-team/index.md
+++ b/src/patterns/contact-a-department-or-service-team/index.md
@@ -9,6 +9,7 @@ layout: layout-pane.njk
 ---
 
 {%- from "_example.njk" import example -%}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 Give users contact information within your service.
 
@@ -24,6 +25,14 @@ Read about how and why to [set up user support](https://www.gov.uk/service-manua
 
 {{ example({ group: "patterns", item: "contact-a-department-or-service-team", example: "all-contact-information", html: true, open: false, size: "xl" }) }}
 
+### Place contact information consistently
+
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> If you use this pattern across a set of pages, make sure to place the contact information consistently on the page.
+
+For example, if you place a ‘contact us’ section at the end of one page within a set of pages, then you should place any ‘contact us’ sections on other pages within the set at the end of the other pages as well.
+
+This is to comply with WCAG 2.2 success criterion [3.2.6 Consistent Help](https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html).
+
 ### Order contact channels consistently
 
 List contact channels in the same order throughout your service. This helps users to find what they need more easily.
diff --git a/src/patterns/cookies-page/index.md b/src/patterns/cookies-page/index.md
index a0f5853562..33ba7be52f 100644
--- a/src/patterns/cookies-page/index.md
+++ b/src/patterns/cookies-page/index.md
@@ -9,6 +9,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 Tell users about the cookies you’re setting on their device and let them accept or reject different types of non-essential cookies.
 
@@ -99,6 +100,8 @@ When the user sets or changes their cookie preferences, use a green [notificatio
 
 {{ example({ group: "patterns", item: "cookies-page", example: "cookies-updated", html: true, nunjucks: true, open: false }) }}
 
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Save cookie preferences for returning users whenever technically possible, so they do not need to enter their preferences again. This relates to WCAG 2.2 success criterion [3.3.7 Redundant Entry](https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html).
+
 ## If you depend on JavaScript to ask users to accept or reject cookies
 
 If you depend on JavaScript to ask about cookie preferences and the user’s device is not running JavaScript, show them a different version of the cookies page.
diff --git a/src/patterns/create-accounts/index.md b/src/patterns/create-accounts/index.md
index a6198205af..fd6f815be9 100644
--- a/src/patterns/create-accounts/index.md
+++ b/src/patterns/create-accounts/index.md
@@ -8,6 +8,8 @@ backlogIssueId: 41
 layout: layout-pane.njk
 ---
 
+{% from "govuk/components/tag/macro.njk" import govukTag %}
+
 Help users create an account for your service.
 
 ## When to use this pattern
@@ -48,12 +50,24 @@ Make it clear what you need users to do when they create an account.
 
 Show a clear difference between creating an account and signing in. Presenting the options side by side is not enough because users might miss one of them or not understand the&nbsp;difference.
 
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Make sure users do not need to enter the same information more than once when creating an account, unless the information is no longer valid or it’s necessary for security reasons. Use the [HTML autocomplete attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) to allow password managers and user agents to automatically populate fields. This is to comply with WCAG 2.2 success criterion [3.3.7 Redundant Entry](https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html).
+
 ### Make the sign-up process clear
 
 If a user fails to create an account they might not be able to use your service at all.
 
 Make sure the account creation screen is solely about that task. Do not add any distracting content or links.
 
+### Avoid using security measures such as CAPTCHAs
+
+CAPTCHAs (Completely Automated Public Turing Test to Tell Computers and Humans Apart) and similar tests require users to recognise words or pictures.
+
+These are tests of cognitive function, which might be difficult for some users. Users can also struggle to recognise specific words or pictures due to differences in culture and locale.
+
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Avoid making users do a cognitive test to use your service. If you do, you must also offer an alternative method. This is to comply with WCAG 2.2 success criterion [3.3.8 Accessible Authentication (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum).
+
+[WCAG lists some other security measures](https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum#object-recognition) you can implement to prevent misuse and automated abuse in your service.
+
 ### Never use National Insurance numbers to verify a user’s identity
 
 If you currently use National Insurance numbers to verify identity, find out how to [protect your service against fraud](https://www.gov.uk/service-manual/technology/protecting-your-service-against-fraud#avoid-using-national-insurance-numbers-to-verify-identity).
diff --git a/src/patterns/email-addresses/index.md b/src/patterns/email-addresses/index.md
index 512889f87d..98621cd7fc 100644
--- a/src/patterns/email-addresses/index.md
+++ b/src/patterns/email-addresses/index.md
@@ -8,6 +8,10 @@ backlogIssueId: 45
 layout: layout-pane.njk
 ---
 
+{% from "govuk/components/tag/macro.njk" import govukTag %}
+
+This guidance is for government teams that build online services. [To find information and services for the public, go to GOV.UK](https://www.gov.uk/).
+
 {% from "_example.njk" import example %}
 
 This guidance is for government teams that build online services. [To find information and services for the public, go to GOV.UK](https://www.gov.uk/).
@@ -30,6 +34,17 @@ You may also need to check that users have access to the email account they give
 
 {{ example({ group: "patterns", item: "email-addresses", example: "default", html: true, nunjucks: true, open: true, size: "s", titleSuffix: "second" }) }}
 
+### Reusing entered email addresses
+
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Make sure users can easily reuse a previously entered email address within a single journey, unless doing so would be a major safety or security concern. This is to comply with WCAG 2.2 success criterion [3.3.7 Redundant Entry](https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html).
+
+You can make it easier to reuse email addresses through one of these methods:
+
+- pre-populate the email field with the previously entered email address
+- show any previously entered email addresses as an option for the user to select
+
+Continue to give users the option to enter a new email address.
+
 ### Tell users why you want the email address
 
 Make it clear what the email address will be used for so that:
diff --git a/src/patterns/equality-information/index.md b/src/patterns/equality-information/index.md
index 9da6f2e9ac..025a905e18 100644
--- a/src/patterns/equality-information/index.md
+++ b/src/patterns/equality-information/index.md
@@ -9,6 +9,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 Public sector organisations have a duty to consider the need to avoid discrimination and advance equality of opportunity as part of what they do. This is part of what’s called the [public sector equality duty](https://www.gov.uk/guidance/equality-act-2010-guidance#public-sector-equality-duty).
 
@@ -45,6 +46,22 @@ With a service that you expect users to return to multiple times, you’ll need
 
 You’ll also need to give users the option to update their equality information in case anything changes.
 
+### Updating equality information
+
+Some categories of equality information can change over time, including changes to:
+
+- marriage or partnership status
+- disability
+- religion
+- sexual orientation
+- gender identity
+
+When possible, offer users the option to update their equality information. Users should be able to update their equality information through an online account, a change request form, or other contact methods. Integrating the option to update equality information directly into your service or user account system is often the most usable and efficient method.
+
+Updating equality information is especially relevant for longer term services and services that use the same equality information multiple times.
+
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> When users are updating equality information, only ask them to enter the information that has changed. Do not ask them to re-enter all existing equality information. This is to comply with WCAG 2.2 success criterion [3.3.7 Redundant Entry](https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html).
+
 ## Get specialist privacy or data protection advice
 
 Some or all of the equality information you collect is likely to be what’s called ‘[special category personal data](https://ico.org.uk/for-organisations/guide-to-data-protection/guide-to-the-general-data-protection-regulation-gdpr/special-category-data/what-is-special-category-data/)’, meaning it has special legal protections.
diff --git a/src/patterns/names/index.md b/src/patterns/names/index.md
index 64520fafc2..53fedd45f4 100644
--- a/src/patterns/names/index.md
+++ b/src/patterns/names/index.md
@@ -9,6 +9,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 {{ example({ group: "patterns", item: "names", example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }}
 
@@ -80,6 +81,17 @@ If you are working in production you’ll need to do this to meet [WCAG 2.1 Leve
 
 You will not normally need to use the `autocomplete` attribute in prototypes, as users will not generally be using their own devices.
 
+### Reusing entered names
+
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Make sure users can easily reuse a previously entered name within a single journey, unless doing so would be a major safety or security concern. This is to comply with WCAG 2.2 success criterion [3.3.7 Redundant Entry](https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html).
+
+You can make it easier to reuse names through one of these methods:
+
+- pre-populate name fields with the previously entered name
+- show any previously entered names as an option for the user to select
+
+Continue to give users the option to enter a new address.
+
 ### Do not spellcheck user's names
 
 Sometimes, browsers will spellcheck the information a user enters into a text input. To make sure user's names will not be spellchecked, set the `spellcheck` attribute to `false` as shown in this example.
diff --git a/src/patterns/national-insurance-numbers/index.md b/src/patterns/national-insurance-numbers/index.md
index 67c7c8a6d8..f210ee71b8 100644
--- a/src/patterns/national-insurance-numbers/index.md
+++ b/src/patterns/national-insurance-numbers/index.md
@@ -9,6 +9,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 This guidance is for government teams that build online services. [To find information and services for the public, go to GOV.UK](https://www.gov.uk/).
 
@@ -42,6 +43,19 @@ When asking for a National Insurance number:
 
 {{ example({ group: "patterns", item: "national-insurance-numbers", example: "default", html: true, nunjucks: true, open: true, size: "s", titleSuffix: "second" }) }}
 
+### Reusing entered National Insurance numbers
+
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Do not ask for a National Insurance number more than once within a single journey, if only one person’s details are needed.
+
+Make sure users can easily reuse previously entered National Insurance numbers within a single journey, unless doing so would be a major safety or security concern. This is to comply with WCAG 2.2 success criterion [3.3.7 Redundant Entry](https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html).
+
+You can make it easier to reuse National Insurance numbers through one of these methods:
+
+- pre-populate fields with the previously entered number
+- show any previously entered numbers as an option for the user to select
+
+Continue to give users the option to enter a new National Insurance number.
+
 ### Error messages
 
 Error messages should be styled like this:
diff --git a/src/patterns/page-not-found-pages/index.md b/src/patterns/page-not-found-pages/index.md
index 90c2f78591..a25a2e766f 100644
--- a/src/patterns/page-not-found-pages/index.md
+++ b/src/patterns/page-not-found-pages/index.md
@@ -9,6 +9,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 A page not found tells someone we cannot find the page they were trying to view. They are also known as 404 pages.
 
@@ -41,6 +42,8 @@ Contact information should either:
 
 The content should be clear and concise, not blame the user.
 
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> You must always write contact information in a clear and consistent way across ‘Page not found’ pages. This relates to WCAG 2.2 success criterion [3.2.6 Consistent Help](https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html).
+
 Do not use:
 
 - breadcrumbs
diff --git a/src/patterns/passwords/index.md b/src/patterns/passwords/index.md
index a526b91435..62400489ef 100644
--- a/src/patterns/passwords/index.md
+++ b/src/patterns/passwords/index.md
@@ -8,6 +8,8 @@ backlogIssueId: 56
 layout: layout-pane.njk
 ---
 
+{% from "govuk/components/tag/macro.njk" import govukTag %}
+
 Help users to create and enter secure and memorable passwords.
 
 ## When to use this pattern
@@ -71,15 +73,21 @@ To help users meet your password constraints and prevent mistyped passwords, you
 
 #### Showing and hiding passwords
 
-It's common for services to help users type passwords with a '[show password](https://github.com/alphagov/govuk-design-system-backlog/issues/240)' button to let users see their password if they want to.
+It's common for services to provide a '[show password](https://github.com/alphagov/govuk-design-system-backlog/issues/240)' button which helps users to accurately add their password by letting them see what they're typing
 
-When there are two or more password fields on a page, the 'show' and 'hide' labels for each password input must be different.
+When there are two or more password fields on a page, the 'show' and 'hide' labels for each password input must be unique.
 
 For example, you can label the input "Password" as "show password" and label the second input "Re-enter password" as "show re-entered password".
 
-### Allow users to paste their password
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Make sure any ‘show password’ button is at least 24px by 24px in size, with adequate spacing. This is to make sure users can easily interact with the button. This relates to WCAG 2.2 success criterion [2.5.8 Target Size (minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html).
+
+### Allow users to paste or autofill their password
+
+Do not disable paste on password fields. People might have good reasons why they want to paste their password, for example if they’re using a password manager.
 
-Do not disable paste on password fields. People may have very good reasons why they want to paste their password, for example if they’re using a password manager.
+Allow password managers to populate password inputs by adding the autocomplete attribute values for `current-password` and `new-password`.
+
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> You must allow users to copy and paste or autofill their password. Avoid making the user memorise or transcribe a password from somewhere else in order to use your service. This is to comply with WCAG 2.2 success criterion [3.3.8 Accessible Authentication (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum).
 
 ### Help users who forget their password
 
@@ -91,6 +99,8 @@ When helping users who’ve forgotten their password, you should:
 - avoid password reset questions
 - avoid password reminders
 
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> If you include instructions or a link to help users reset their password, make sure to place them consistently on the page. Also make sure any password reset links always perform the same action across each page. This is to comply with WCAG 2.2 success criterion [3.2.6 Consistent Help](https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html).
+
 ### Send a link to trigger password resets
 
 You should never send passwords by email because it’s not a secure channel.
diff --git a/src/patterns/payment-card-details/index.md b/src/patterns/payment-card-details/index.md
index 6070f01b64..bf4da73368 100644
--- a/src/patterns/payment-card-details/index.md
+++ b/src/patterns/payment-card-details/index.md
@@ -8,6 +8,8 @@ backlogIssueId: 80
 layout: layout-pane.njk
 ---
 
+{% from "govuk/components/tag/macro.njk" import govukTag %}
+
 This guidance is for government teams that build online services. [To find information and services for the public, go to GOV.UK](https://www.gov.uk/).
 
 ![A form entitled enter card details which asks for a card number, an expiry date, a name on the card and the card security code.](enter-card-details.jpg)
@@ -28,6 +30,8 @@ Let users enter payment card numbers in whatever format is familiar to them. All
 
 Present all fields on a single page, in the order in which they appear on a credit or debit card. This makes it easy for users to transcribe the information from their payment card.
 
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Make sure to add adequate spacing between the month and year fields. Ideally, leave at least 24px of space between the fields, either horizontally (inline) or vertically. This is to make sure users can easily interact with the fields. This relates to WCAG 2.2 success criterion [2.5.8 Target Size (minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html).
+
 Show logos for the cards you accept as icons so users can see whether their card is supported.
 
 Use Issuer Identification Number (IIN) lookups to validate the card number as the user enters it. Once you’ve been able to identify the user’s card type, leave only the relevant logo highlighted and grey out the others.
diff --git a/src/patterns/problem-with-the-service-pages/index.md b/src/patterns/problem-with-the-service-pages/index.md
index 54068c8369..f43fa4fa13 100644
--- a/src/patterns/problem-with-the-service-pages/index.md
+++ b/src/patterns/problem-with-the-service-pages/index.md
@@ -9,6 +9,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 This guidance is for government teams that build online services. [To find information and services for the public, go to GOV.UK](https://www.gov.uk/).
 
@@ -47,6 +48,21 @@ Have clear and concise content and do not use:
 - ‘We are experiencing technical difficulties’
 - red text to warn people
 
+Store previously entered information for a reasonable amount of time so users can resume a journey with re-populated information when the service becomes available again.
+
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Whenever possible, make sure to save and store any information the user has previously entered, unless doing so would be a major safety or security concern. This is to comply with WCAG 2.2 success criterion [3.3.7 Redundant Entry](https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html).
+
+### Showing contact information
+
+Contact information should either:
+
+- include all numbers and opening times in one place on the page
+- be a link out to a page that includes numbers and opening times
+
+You might choose to link to a ‘contact information’ page, such as one shown in the ‘[Contact a department or service team](https://design-system.service.gov.uk/patterns/contact-a-department-or-service-team/)’ pattern.
+
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> You must always write contact information in a clear and consistent way across ‘There is a problem with the service’ pages. This relates to WCAG 2.2 success criterion [3.2.6 Consistent Help](https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html).
+
 ### Service has a specific page that includes numbers and opening times
 
 {{ example({ group: "patterns", item: "problem-with-the-service-pages", example: "offline-support-link", html: true, nunjucks: true, open: false, titleSuffix: "second", size: "xl" }) }}
diff --git a/src/patterns/question-pages/index.md b/src/patterns/question-pages/index.md
index 60b132ae83..2a4aca9f38 100644
--- a/src/patterns/question-pages/index.md
+++ b/src/patterns/question-pages/index.md
@@ -9,6 +9,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 This pattern explains when to use question pages and what elements they need to include.
 
@@ -46,6 +47,13 @@ Question pages must include a:
 
 If research shows it’s helpful for users, you can also include a [progress indicator](#using-progress-indicators).
 
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Make sure to only ask for a piece of information once within a single journey. Whenever possible, do not ask a user to re-enter information they’ve already provided. This is to comply with WCAG 2.2 success criterion [3.3.7 Redundant Entry](https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html).
+
+If the same type of information is needed more than once, make it easier to reuse previously entered answers through one of these methods:
+
+- pre-populating the relevant fields
+- showing carried-forward responses as an option for the user to select
+
 ### Back link
 
 Some users do not trust browser back buttons when they’re entering data.
@@ -151,3 +159,7 @@ These can be problematic because they:
 - make it hard to handle conditional sections
 
 A number of GOV.UK services have removed this style of progress indicator without any negative effects. Read a blog post about [how the Carer’s Allowance team removed a 12-step progress indicator](https://designnotes.blog.gov.uk/2014/07/07/do-less-problems-as-shared-spaces/) with no effect on completion rates or times.
+
+### Using range sliders
+
+Avoid using [range slider](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) questions, where the user needs to click and drag a selector across a range of answers or values. These types of controls are difficult for some users to interact with. If you do use a range slider, you must provide a method for selecting an answer that doesn’t rely on ‘click and drag’ movements. This relates to WCAG success criterion [2.5.1 Pointer Gestures](https://www.w3.org/TR/WCAG22/#pointer-gestures).
diff --git a/src/patterns/service-unavailable-pages/index.md b/src/patterns/service-unavailable-pages/index.md
index 4d1322f279..1b121b2ddf 100644
--- a/src/patterns/service-unavailable-pages/index.md
+++ b/src/patterns/service-unavailable-pages/index.md
@@ -9,6 +9,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 This guidance is for government teams that build online services. [To find information and services for the public, go to GOV.UK](https://www.gov.uk/).
 
@@ -40,6 +41,8 @@ Contact information should either be:
 - a link to a specific page that includes numbers and opening times
 - include all numbers and opening times
 
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> You must always write contact information in a clear and consistent way across ‘Service unavailable’ pages. This relates to WCAG 2.2 success criterion [3.2.6 Consistent Help](https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html).
+
 Have clear and concise content and do not use:
 
 - breadcrumbs
diff --git a/src/patterns/start-using-a-service/index.md b/src/patterns/start-using-a-service/index.md
index 04f98bc089..d017369a1a 100644
--- a/src/patterns/start-using-a-service/index.md
+++ b/src/patterns/start-using-a-service/index.md
@@ -8,13 +8,17 @@ backlogIssueId: 111
 layout: layout-pane.njk
 ---
 
+{% from "govuk/components/tag/macro.njk" import govukTag %}
+
 GOV.UK services must start on a GOV.UK content page. This links your service to the rest of GOV.UK, and means that users can find it using search or through GOV.UK’s navigation.
 
 ## When to use this pattern
 
 Use this pattern to help you prototype a start point for your service, so you can test as much of the user journey as possible.
 
-The public-facing version of your service will need to start on a GOV.UK content page, published using one of the GOV.UK publishing apps. You’ll usually need to agree content for this GOV.UK content page with the GDS content team. Read [guidance on how to get your service on GOV.UK](https://www.gov.uk/service-manual/service-assessments/get-your-service-on-govuk).
+Public-facing UK government services need to start on a GOV.UK content page. The GDS content team creates these start points using GOV.UK publishing apps, separate from GOV.UK Frontend.
+
+Service teams will usually need to agree content for this GOV.UK content page with the GDS content team. Read guidance on how to get your service on GOV.UK. Read [guidance on how to get your service on GOV.UK](https://www.gov.uk/service-manual/service-assessments/get-your-service-on-govuk).
 
 ## How it works
 
diff --git a/src/patterns/validation/index.md b/src/patterns/validation/index.md
index 2d3da833a4..419284839b 100644
--- a/src/patterns/validation/index.md
+++ b/src/patterns/validation/index.md
@@ -7,6 +7,8 @@ aliases:
 layout: layout-pane.njk
 ---
 
+{% from "govuk/components/tag/macro.njk" import govukTag %}
+
 Check the information the user gives you to make sure it’s valid. If there's a validation error, tell the user what's gone wrong and how to fix it. Turn off HTML5 validation.
 
 ## When to use this pattern
@@ -59,6 +61,14 @@ If the user's answers fail validation:
 
 Read guidance on [writing good error messages](/components/error-message/#be-clear-and-concise).
 
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Do not clear any form fields when validating users’ answers. Keep both passing and failing answers. This is to comply with WCAG 2.2 success criterion [3.3.7 Redundant Entry](https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html).
+
+Keeping information that failed validation helps users to:
+
+- see what went wrong
+- edit their previous answer
+- avoid re-entering information
+
 ### When to tell the user about validation errors
 
 Do not validate when the user moves away from a field. Wait until they try to move to the next part of the service - usually by clicking the ‘continue’ or ‘submit’ button at the bottom of the page.
diff --git a/src/styles/images/index.md b/src/styles/images/index.md
index 5a483f8cfd..ee3dc4e11f 100644
--- a/src/styles/images/index.md
+++ b/src/styles/images/index.md
@@ -60,6 +60,8 @@ Icons can be more useful in case working systems, where users are familiar with
 
 Do not use a single icon to represent more than one thing. For example, the search icon (magnifying glass) should only be used for search functionality, and not also for screen magnification.
 
+<strong class="govuk-tag govuk-tag--grey">WCAG 2.2</strong> Make sure any icons and images used in links are at least 24px by 24px in size, with adequate spacing. This is to make sure users can easily interact with the link. This relates to WCAG 2.2 success criterion [2.5.8 Target Size (minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html).
+
 ## Avoid images that contain text
 
 Generally, you should avoid using images that contain any sort of text. Use written content or other alternatives wherever possible.
@@ -216,7 +218,7 @@ Do not write alt text that:
 
 In March 2023, we updated this page to help teams make decisions on when to use images in their services.
 
-In particular, we added a section on how to use images and ensure they’re as accessible as possible — giving advice to teams on how to meet or surpass relevant WCAG AA guidelines, in line with the [GOV.UK Design System accessibility strategy](/community/accessibility-strategy/).
+In particular, we added a section on how to use images and ensure they’re as accessible as possible — giving advice to teams on how to meet or surpass relevant WCAG AA guidelines, in line with the [GOV.UK Design System accessibility strategy](/accessibility/accessibility-strategy/).
 
 To help us validate that this guidance is useful and practical for service teams across government, we want to hear from you.
 
diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss
index b62e01632a..57428943f5 100644
--- a/src/stylesheets/main.scss
+++ b/src/stylesheets/main.scss
@@ -363,3 +363,11 @@ pre .language-plaintext {
   border-bottom: 1px solid $govuk-border-colour;
   background-color: $app-light-grey;
 }
+
+// Add highlight styling for WCAG 2.2 content
+.app-wcag-22 {
+  &:target {
+    outline: 4px solid $govuk-brand-colour;
+    outline-offset: 6px;
+  }
+}