Edit links to WCAG criteria to make them clearer

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: "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: "users can interact with Back links",
       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. This is to make sure users can easily interact with the back link. 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.

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: "users can interact with Breadcrumbs",
       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. This is to make sure users can easily interact with the breadcrumbs. 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.

src/components/button/index.md

@@ -17,7 +17,7 @@ layout: layout-pane.njk
   name: "Button",
   criteria: [
     {
-      text: "interact with buttons",
+      text: "users can interact with Buttons",
       anchor: "wcag-interact-button"
     }
   ]
@@ -50,7 +50,7 @@ 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 buttons. This is to make sure users can easily interact with buttons. 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.

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: "items in focus can be seen all times",
       anchor: "wcag-see-focus"
     },
     {
-      text: "interact with buttons and links in the cookie banner",
+      text: "users can interact with buttons and links in the Cookie banner",
       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 ‘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. 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/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: "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 adding error messages. 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: "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: "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: "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 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 <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

src/components/header/index.md

@@ -19,11 +19,11 @@ The GOV.UK header component tells users they’re using a service on GOV.UK and
   name: "GOV.UK header",
   criteria: [
     {
-      text: "see all page content when interacting with a dropdown menu",
+      text: "all page content can be seen when the user interacts with a dropdown menu",
       anchor: "wcag-do-not-cover-content"
     },
     {
-      text: "find help links in a consistent place on each page",
+      text: "help links can be found in a consistent place on each page",
       anchor: "wcag-consistent-help-links"
     }
   ]
@@ -91,15 +91,15 @@ We’ve started to deprecate the [GOV.UK header with navigation](/components/hea
 {% call wcagNote({id: "wcag-do-not-cover-content"}) %}
 
 <p>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.</p>
-<p>This is to make sure elements do not hide or obscure any content which has a focus applied and 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>This is to make sure elements do not hide or obscure any content which has a focus applied and 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 %}
 
 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.
 
 {% call wcagNote({id: "wcag-consistent-help-links"}) %}
 
-<p>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.</p>
-<p>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 <a href="https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html">3.2.6 Consistent help</a>.</p>
+<p>You can add a link to a ‘help’ page in your service’s GOV.UK header. If you do, the link must be positioned consistently within the header, and must always link to the same place.</p>
+<p>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 <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 %}
 
 ### GOV.UK header with One Login

src/components/password-input/index.md

@@ -19,15 +19,15 @@ Help users to create and enter passwords.
   name: "Password input",
   criteria: [
     {
-      text: "interact with any 'show password' button",
+      text: "'show password' buttons are easy to interact with",
       anchor: "wcag-interact-show-password"
     },
     {
-      text: "use `autocomplete` to securely create and enter passwords",
+      text: "users can use `autocomplete` to securely create and enter passwords",
       anchor: "wcag-autocomplete-attribute"
     },
     {
-      text: "copy and paste into a password input",
+      text: "users can enter a password using copy and paste",
       anchor: "wcag-copy-paste-password"
     }
   ]
@@ -75,7 +75,7 @@ Hide passwords by default until the user chooses to show it using the ‘show’
 
 {% call wcagNote({id: "wcag-interact-show-password"}) %}
 
-<p>Make sure any ‘show password’ button is at least 24px by 24px in size, or has adequate spacing. This is to make sure users can easily interact with the button. 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 any ‘show password’ button is at least 24px by 24px in size, or has adequate spacing. This is to make sure users can easily interact with the button. 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 %}
 
 If you do choose to include two or more password inputs on a page, the ‘show’ and ‘hide’ toggles and labels for each password input must be different.
@@ -107,7 +107,7 @@ Set the `autocomplete` attribute to `new-password` if the user is creating a pas
 
 {% call wcagNote({id: "wcag-autocomplete-attribute"}) %}
 
-<p>Providing an <code>autocomplete</code> attribute is one way to avoid making the user memorise or transcribe a password from somewhere else in order to use your service. This is to help comply with WCAG 2.2 success criterion <a href="https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum">3.3.8 Accessible authentication (minimum)</a>.</p>
+<p>Providing an <code>autocomplete</code> attribute is one way to avoid making the user memorise or transcribe a password from somewhere else in order to use your service. This is to help comply with <a href="https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum">WCAG 2.2 success criterion 3.3.8 Accessible authentication (minimum)</a>.</p>
 {% endcall %}
 
 Many browsers will autofill password inputs, even when the `autocomplete` attribute is missing or set to `off`.
@@ -118,7 +118,7 @@ Always allow users to copy and paste in password fields. People may have very go
 
 {% call wcagNote({id: "wcag-copy-paste-password"}) %}
 
-<p>You must allow users to paste in or use autofill to enter 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 <a href="https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum">3.3.8 Accessible authentication (minimum)</a>.</p>
+<p>You must allow users to paste in or use autofill to enter 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 <a href="https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum">WCAG 2.2 success criterion 3.3.8 Accessible authentication (minimum)</a>.</p>
 {% endcall %}
 
 #### Copying text from password fields

src/components/phase-banner/index.md

@@ -19,7 +19,7 @@ Use the phase banner component to show users your service is still being worked
   name: "Phase banner",
   criteria: [
     {
-      text: "see all page content when a phase banner is shown",
+      text: "all page content can be seen when the Phase banner is shown",
       anchor: "wcag-do-not-cover-content"
     }
   ]
@@ -48,7 +48,7 @@ You can choose to place the Phase banner in a more appropriate place for your se
 
 {% call wcagNote({id: "wcag-do-not-cover-content"}) %}
 
-<p>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 <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 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 <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 %}
 
 ### Add a feedback link