Update links to WCAG criteria to make them clearer

src/accessibility/accessibility-strategy/index.md

@@ -25,7 +25,7 @@ The GOV.UK Design System team follows 3 sets of principles to increase the acces
 
 ### Web accessibility
 
-We follow the [4 principles of web accessibility](https://www.w3.org/WAI/WCAG21/Understanding/intro#understanding-the-four-principles-of-accessibility) upon which WCAG is based:
+We follow the [4 principles of web accessibility](https://www.w3.org/WAI/WCAG22/Understanding/intro#understanding-the-four-principles-of-accessibility) upon which WCAG is based:
 
 1.  Perceivable – Information and user interface components must be presentable to users in ways they can perceive.
 2.  Operable – User interface components and navigation must be operable.
@@ -435,7 +435,7 @@ WCAG 2.2 published a new ‘Candidate recommendation’ version on 6 September 2
 
 ### 5 October 2023
 
-WCAG 2.2 formally published by <abbr title="World Wide Web Consortium">W3C</abbr>. At this stage, it’s a final and official web standard. WCAG 2.2 is backwards compatible with WCAG 2.1, thanks partly to a September 2023 update which helps deprecate [Success Criterion 4.1.1: Parsing for HTML and XML](https://www.w3.org/WAI/WCAG21/Understanding/parsing.html).
+WCAG 2.2 formally published by <abbr title="World Wide Web Consortium">W3C</abbr>. At this stage, it’s a final and official web standard. WCAG 2.2 is backwards compatible with WCAG 2.1, thanks partly to a September 2023 update which helps deprecate [Success Criterion 4.1.1: Parsing for HTML and XML](https://www.w3.org/WAI/WCAG22/Understanding/parsing.html).
 
 ### 8 December 2023
 

src/components/back-link/index.md

@@ -19,11 +19,11 @@ Use the back link component to help users go back to the previous page in a mult
   name: "Back link",
   criteria: [
     {
-      text: "avoid re-entering information they've previously given when they go back to a page",
+      text: "make sure users do not need to re-enter information they've previously given when they go back to a page",
       anchor: "wcag-avoid-information-reentry"
     },
     {
-      text: "interact with back links",
+      text: "make sure users can interact with the Back link component",
       anchor: "wcag-interact-back-links"
     }
   ]
@@ -52,12 +52,12 @@ Make sure the link takes users to the previous page they were on, in the state t
 {% call wcagNote({id: "wcag-avoid-information-reentry"}) %}
 
 <p>If a user decides to go back to a previous page, 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>
+<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 <a href="https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html">WCAG 2.2 success criterion 3.3.7 Redundant entry</a>.</p>
 {% endcall %}
 
 {% call wcagNote({id: "wcag-interact-back-links"}) %}
 
-<p>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 <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">2.5.8 Target size (minimum)</a>.</p>
+<p>Make sure no other interactive elements are too close to the Back link component. This is to make sure users can easily interact with it. This relates to <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">WCAG 2.2 success criterion 2.5.8 Target size (minimum)</a>.</p>
 {% endcall %}
 
 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.
@@ -74,6 +74,6 @@ For more complex user journeys, consider using different link text, like 'Go bac
 
 Use the `govuk-back-link--inverse` modifier class to show a white link on a dark background – for example, in headers, custom components, and patterns with darker backgrounds.
 
-Make sure all users can see the back link – the background colour [must have a contrast ratio of at least 4.5:1](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) with white.
+Make sure all users can see the back link – the background colour must have a contrast ratio of at least 4.5:1 with white to meet [WCAG 2.2 success criterion 1.4.3 Contrast (minimum), level AA](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html).
 
 {{ example({ group: "components", item: "back-link", example: "inverse", html: true, nunjucks: true, open: false }) }}

src/components/breadcrumbs/index.md

@@ -19,7 +19,7 @@ The breadcrumbs component helps users to understand where they are within a webs
   name: "Breadcrumbs",
   criteria: [
     {
-      text: "interact with breadcrumbs",
+      text: "make sure users can interact with the Breadcrumbs component",
       anchor: "wcag-interact-breadcrumbs"
     }
   ]
@@ -45,7 +45,7 @@ The breadcrumbs should start with your 'home' page and end with the parent secti
 
 {% call wcagNote({id: "wcag-interact-breadcrumbs"}) %}
 
-<p>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 <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">2.5.8 Target size (minimum)</a>.</p>
+<p>Make sure no other interactive elements are too close to the Breadcrumbs component. This is to make sure users can easily interact with it. This relates to <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">WCAG 2.2 success criterion 2.5.8 Target size (minimum)</a>.</p>
 {% endcall %}
 
 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.
@@ -64,6 +64,6 @@ To do this, add a `govuk-breadcrumbs--collapse-on-mobile` class to the outer `<d
 
 Use the `govuk-breadcrumbs--inverse` modifier class to show white links and arrows on dark backgrounds – for example, in headers, custom components, and patterns with darker backgrounds.
 
-Make sure all users can see the breadcrumbs – the background colour [must have a contrast ratio of at least 4.5:1](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) with white.
+Make sure all users can see the breadcrumbs – the background colour must have a contrast ratio of at least 4.5:1 with white to [meet WCAG 2.2 success criterion 1.4.3 Contrast (minimum), level AA](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html).
 
 {{ example({ group: "components", item: "breadcrumbs", example: "inverse", html: true, nunjucks: true, open: false }) }}

src/components/button/index.md

@@ -17,7 +17,7 @@ layout: layout-pane.njk
   name: "Button",
   criteria: [
     {
-      text: "interact with buttons",
+      text: "make sure users can interact with the Button component",
       anchor: "wcag-interact-button"
     }
   ]
@@ -50,10 +50,10 @@ Align the primary action button to the left edge of your form.
 
 {% call wcagNote({id: "wcag-interact-button"}) %}
 
-<p>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 <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">2.5.8 Target size (minimum)</a>.</p>
+<p>Do not decrease the height or target area of the Button component. This is to make sure users can easily interact with it. This is to comply with <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">WCAG 2.2 success criterion 2.5.8 Target size (minimum)</a>.</p>
 {% endcall %}
 
-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.
+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
 
@@ -98,7 +98,7 @@ Do not only rely on the red colour of a warning button to communicate the seriou
 
 Use the `govuk-button--inverse` modifier class to show white buttons on dark backgrounds – for example, in headers, custom components, and patterns with darker backgrounds.
 
-Make sure all users can see the button – the white button and background colour [must have a contrast ratio of at least 3:1](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html).
+Make sure all users can see the button – the white button and background colour must have a contrast ratio of at least 4.5:1 to meet [WCAG 2.2 success criterion 1.4.3 Contrast (minimum), level AA](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html).
 
 {{ example({ group: "components", item: "button", example: "inverse", html: true, nunjucks: true, open: false }) }}
 

src/components/checkboxes/index.md

@@ -103,7 +103,7 @@ You should only conditionally reveal questions - do not show or hide anything th
 
 #### Known issues
 
-Users are not always notified when a conditionally revealed question is shown or hidden. This fails [WCAG 2.1 success criterion 4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html).
+Users are not always notified when a conditionally revealed question is shown or hidden. This fails [WCAG 2.2 success criterion 4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html).
 
 However, we found that screen reader users did not have difficulty answering a conditionally revealed question - as long as it’s kept simple. It confused our test users when we conditionally revealed complicated questions to them.
 

src/components/cookie-banner/index.md

@@ -19,11 +19,11 @@ Allow users to accept or reject cookies which are not essential to making your s
   name: "Cookie banner",
   criteria: [
     {
-      text: "see items that are in focus at all times",
+      text: "make sure that items in focus can be seen all times",
       anchor: "wcag-see-focus"
     },
     {
-      text: "interact with buttons and links in the cookie banner",
+      text: "make sure users can interact with buttons and links in the Cookie banner component",
       anchor: "wcag-interact-cookie-banner"
     }
   ]
@@ -83,12 +83,12 @@ Position the cookie banner after the opening `<body>` tag and before the ’skip
 
 {% call wcagNote({id: "wcag-see-focus"}) %}
 
-<p>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 <a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html">2.4.11 Focus not obscured (minimum)</a>.</p>
+<p>Do not make the Cookie banner component ‘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 <a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html">WCAG 2.2 success criterion 2.4.11 Focus not obscured (minimum)</a>.</p>
 {% endcall %}
 
 {% call wcagNote({id: "wcag-interact-cookie-banner"}) %}
 
-<p>Do not change the padding or margins of buttons and links within the cookie banner. This is to make sure there’s adequate space for the user to interact with the buttons and links. 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>.</p>
+<p>Do not change the padding or margins of buttons and links within the Cookie banner component. This is to make sure there’s adequate space for the user to interact with the buttons and links. This relates to <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">WCAG 2.2 success criterion 2.5.8 Target size (minimum)</a>.</p>
 {% endcall %}
 
 ### Option 1: If you’re only using essential cookies

src/components/date-input/index.md

@@ -57,7 +57,7 @@ To do this, set the `autocomplete` attribute on the 3 fields to `bday-day`, `bda
 
 {{ example({ group: "components", item: "date-input", example: "date-of-birth", html: true, nunjucks: true, open: true, size: "s", id: "default-2" }) }}
 
-If you are working in production you’ll need to do this to meet [WCAG 2.1 Level AA](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html).
+If you are working in production you’ll need to do this to meet [WCAG 2.2 success criterion 1.3.5: Identify input purpose, level AA](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html).
 
 ### Error messages
 

src/components/error-message/index.md

@@ -19,7 +19,7 @@ This guidance is for government teams that build online services. [To find infor
   name: "Error message",
   criteria: [
     {
-      text: "edit information they've previously given, so that they can correct an error",
+      text: "make sure users can edit information they've previously given, so that they can correct an error",
       anchor: "wcag-clear-answers-error"
     }
   ]
@@ -57,7 +57,7 @@ For each error:
 
 {% call wcagNote({id: "wcag-clear-answers-error"}) %}
 
-<p>Do not clear any form fields when adding error messages. 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>
+<p>Do not clear any form fields when showing the Error message component. This is to comply with <a href="https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html">WCAG 2.2 success criterion 3.3.7 Redundant entry</a>.</p>
 {% endcall %}
 
 Keeping information that caused errors helps users to:

src/components/file-upload/index.md

@@ -19,11 +19,11 @@ This guidance is for government teams that build online services. [To find infor
   name: "File upload",
   criteria: [
     {
-      text: "upload a file without relying on 'drag and drop' movements",
+      text: "make sure users can upload a file without relying on 'drag and drop' movements",
       anchor: "wcag-multi-method-drag-drop"
     },
     {
-      text: "reuse files they've uploaded",
+      text: "make sure uploaded files can be reused",
       anchor: "wcag-use-previous-uploads"
     }
   ]
@@ -46,14 +46,14 @@ To upload a file, the user can either:
 
 {% call wcagNote({id: "wcag-multi-method-drag-drop"}) %}
 
-<p>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 <a href="https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html">2.5.7 Dragging movements</a>.</p>
+<p>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 <a href="https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html">WCAG 2.2 success criterion 2.5.7 Dragging movements</a>.</p>
 {% endcall %}
 
 {% call wcagNote({id: "wcag-use-previous-uploads"}) %}
 
 <p>Make sure users can easily reuse a previously uploaded file within a single journey, unless doing so would be a major security or privacy concern.</p>
 <p>For example, a user might need to upload a photo of their driving licence to prove their identity, and again to prove their address.</p>
-<p>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 <a href="https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html">3.3.7 Redundant entry</a>.</p>
+<p>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 <a href="https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html">WCAG 2.2 success criterion 3.3.7 Redundant entry</a>.</p>
 {% endcall %}
 
 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.

src/components/footer/index.md

@@ -19,7 +19,7 @@ The GOV.UK footer provides copyright, licensing and other information about your
   name: "GOV.UK footer",
   criteria: [
     {
-      text: "find help links in a consistent place on each page",
+      text: "make sure help links can be found in a consistent place on each page",
       anchor: "wcag-consistent-links"
     }
   ]
@@ -62,7 +62,7 @@ Use ‘Privacy’, ‘Accessibility’, ‘Cookies’ and ‘Terms and condition
 
 {% call wcagNote({id: "wcag-consistent-links"}) %}
 
-<p>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 <a href="https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html">3.2.6 Consistent help</a>.</p>
+<p>If you include links to ‘help’ pages within the GOV.UK footer component, 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 <a href="https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html">WCAG 2.2 success criterion 3.2.6 Consistent help</a>.</p>
 {% endcall %}
 
 ## Adding secondary navigation