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.
+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.
{% endcall %} {% call wcagNote({id: "wcag-interact-back-links"}) %} -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).
+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).
{% 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. diff --git a/src/components/breadcrumbs/index.md b/src/components/breadcrumbs/index.md index 0f0b3b1409..f15486bf49 100644 --- a/src/components/breadcrumbs/index.md +++ b/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"}) %} -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).
+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).
{% 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. diff --git a/src/components/button/index.md b/src/components/button/index.md index ca1c5a9624..620d4fb9b4 100644 --- a/src/components/button/index.md +++ b/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"}) %} -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).
+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).
{% 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. diff --git a/src/components/cookie-banner/index.md b/src/components/cookie-banner/index.md index b70e7180ea..daad3ea251 100644 --- a/src/components/cookie-banner/index.md +++ b/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 `` tag and before the ’skip {% call wcagNote({id: "wcag-see-focus"}) %} -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).
+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).
{% endcall %} {% call wcagNote({id: "wcag-interact-cookie-banner"}) %} -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 2.5.8 Target size (minimum).
+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 2.5.8 Target size (minimum).
{% endcall %} ### Option 1: If you’re only using essential cookies diff --git a/src/components/error-message/index.md b/src/components/error-message/index.md index 9cb92aefa6..9d5382099a 100644 --- a/src/components/error-message/index.md +++ b/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"}) %} -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.
+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.
{% endcall %} Keeping information that caused errors helps users to: diff --git a/src/components/file-upload/index.md b/src/components/file-upload/index.md index 7f4d56786e..87e01e5100 100644 --- a/src/components/file-upload/index.md +++ b/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"}) %} -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.
+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.
{% endcall %} {% call wcagNote({id: "wcag-use-previous-uploads"}) %}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.
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.
+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.
{% 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. diff --git a/src/components/footer/index.md b/src/components/footer/index.md index 81cf29d45a..31a1669971 100644 --- a/src/components/footer/index.md +++ b/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"}) %} -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.
+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.
{% endcall %} ## Adding secondary navigation diff --git a/src/components/header/index.md b/src/components/header/index.md index b4d36335a8..9b746b2e88 100644 --- a/src/components/header/index.md +++ b/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"}) %}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 elements do 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).
+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 2.4.11 Focus not obscured (minimum).
{% 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"}) %} -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.
+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.
+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.
{% endcall %} ### GOV.UK header with One Login diff --git a/src/components/password-input/index.md b/src/components/password-input/index.md index 2ab15b7ec2..6f3a860dc1 100644 --- a/src/components/password-input/index.md +++ b/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"}) %} -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 2.5.8 Target size (minimum).
+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 2.5.8 Target size (minimum).
{% 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"}) %} -Providing an autocomplete 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 3.3.8 Accessible authentication (minimum).
Providing an autocomplete 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 3.3.8 Accessible authentication (minimum).
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 3.3.8 Accessible authentication (minimum).
+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 3.3.8 Accessible authentication (minimum).
{% endcall %} #### Copying text from password fields diff --git a/src/components/phase-banner/index.md b/src/components/phase-banner/index.md index 474c955f95..31ba73bdd5 100644 --- a/src/components/phase-banner/index.md +++ b/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"}) %} -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).
+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).
{% endcall %} ### Add a feedback link diff --git a/src/components/select/index.md b/src/components/select/index.md index 55552f381e..edc7cd3c35 100644 --- a/src/components/select/index.md +++ b/src/components/select/index.md @@ -17,7 +17,7 @@ layout: layout-pane.njk name: "Select", criteria: [ { - text: "use the select without relying on 'click and drag' movements (if you choose to add functionality to select multiple options)", + text: "if you choose to add functionality to select multiple options, users can do so without relying on 'click and drag' movements", anchor: "wcag-avoid-dragging-multiple-options" } ] @@ -69,7 +69,7 @@ The select component does not support selecting multiple options, [as there’s {% call wcagNote({id: "wcag-avoid-dragging-multiple-options"}) %} -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.
+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.
{% endcall %} ## Research on this component diff --git a/src/components/service-navigation/index.md b/src/components/service-navigation/index.md index 6be5d4abd6..e8110cde86 100644 --- a/src/components/service-navigation/index.md +++ b/src/components/service-navigation/index.md @@ -19,11 +19,11 @@ Service navigation helps users understand that they’re using your service and name: "Service navigation", 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" } ] @@ -70,7 +70,7 @@ See when and how to show navigation links in the [Help users navigate a service {% call wcagNote({id: "wcag-do-not-cover-content"}) %}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 elements do 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).
+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 2.4.11 Focus not obscured (minimum).
{% 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. @@ -78,7 +78,7 @@ In November 2021, [the GOV.UK homepage introduced a menu bar](https://insidegovu {% call wcagNote({id: "wcag-consistent-help-links"}) %}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.
+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.
{% endcall %} ## Use ‘slots’ to add custom elements diff --git a/src/components/summary-list/index.md b/src/components/summary-list/index.md index 97ca83f690..0b31e6dd61 100644 --- a/src/components/summary-list/index.md +++ b/src/components/summary-list/index.md @@ -23,7 +23,7 @@ Use a summary list to summarise information, for example, a user’s responses a anchor: "wcag-interact-row-actions" }, { - text: "change information they've previously given in an answer", + text: "users can change information they've previously given in an answer", anchor: "wcag-change-answers" } ] @@ -68,13 +68,13 @@ There's a few things to keep in mind to ensure that users can successfully use r {% call wcagNote({id: "wcag-interact-row-actions"}) %} -Make sure any 'action links' are at least 24px by 24px in size, or have adequate spacing. This is to make sure users can easily interact with the links. This relates to WCAG 2.2 success criterion 2.5.8 Target size (minimum).
+Make sure any 'action links' are at least 24px by 24px in size, or have adequate spacing. This is to make sure users can easily interact with the links. This relates to WCAG 2.2 success criterion 2.5.8 Target size (minimum).
{% endcall %} {% call wcagNote({id: "wcag-change-answers"}) %}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.
-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.
+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.
{% endcall %} 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. diff --git a/src/components/tag/index.md b/src/components/tag/index.md index a9986c46d6..b38eee4620 100644 --- a/src/components/tag/index.md +++ b/src/components/tag/index.md @@ -19,7 +19,7 @@ Use the tag component to show users the status of something. name: "Tag", criteria: [ { - text: "interact with tags without relying on 'click and drag' movements (if you choose to add functionality to reorder tags)", + text: "if you choose to add functionality to reorder tags, users can do so without relying on 'click and drag' movements ()", anchor: "wcag-tag-no-dragging-reorder" } ] @@ -60,7 +60,7 @@ Tags should be helpful to users. The more you add, the harder it is for users to {% call wcagNote({id: "wcag-tag-no-dragging-reorder"}) %} -Any tag implementation that allows the user 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.
+Any tag implementation that allows the user 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.
{% endcall %} ## Using colour with tags diff --git a/src/components/text-input/index.md b/src/components/text-input/index.md index 55c48c496c..e8dd0cd342 100644 --- a/src/components/text-input/index.md +++ b/src/components/text-input/index.md @@ -31,7 +31,7 @@ Do not use placeholder text in place of a label, or for hints or examples, as: - it vanishes when the user starts typing, which can cause problems for users with memory conditions or when reviewing answers - not all screen readers read it out -- its browser default styles often do not meet [minimum contrast requirements](https://www.w3.org/TR/WCAG22/#contrast-minimum) +- its browser default styles often do not meet [WCAG 2.2 success criterion 1.4.3 Contrast (minimum)](https://www.w3.org/TR/WCAG22/#contrast-minimum) ### If you're asking one question on the page @@ -166,7 +166,7 @@ For example, to enable autofill on a postcode field, set the `autocomplete` attr {{ example({ group: "components", item: "text-input", example: "input-autocomplete-attribute", displayExample: false, html: true, nunjucks: true, open: true, size: "s" }) }} -If you are working in production and there is a relevant [input purpose](https://www.w3.org/TR/WCAG21/#input-purposes), you'll need to use the `autocomplete` attribute to meet [WCAG 2.1 Level AA](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html). +If you are working in production and there is a relevant [input purpose](https://www.w3.org/TR/WCAG21/#input-purposes), you'll need to use the `autocomplete` attribute 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). You will not normally need to use the `autocomplete` attribute in prototypes, as users will not generally be using their own devices. diff --git a/src/get-started/focus-states/index.md b/src/get-started/focus-states/index.md index 9a0b7b975c..f4ac33444a 100644 --- a/src/get-started/focus-states/index.md +++ b/src/get-started/focus-states/index.md @@ -9,7 +9,7 @@ description: Some people use keyboards or other devices to navigate through a pa Some people use keyboards or other devices to navigate through a page by jumping from one interactive element to the next. Focus states let users know which element they’re currently on and is ready to be interacted with. -Focus states in the GOV.UK Design System use a combination of yellow and black to make sure they meet Web Content Accessibility Guidelines (WCAG) 2.1 level AA [non-text contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) on any background colour used on GOV.UK. +Focus states in the GOV.UK Design System use a combination of yellow and black to make sure they meet [Web Content Accessibility Guidelines (WCAG) 2.2 success criterion 1.4.11 Non-text contrast, level AA](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html) on any background colour used on GOV.UK. The yellow has a high contrast with dark backgrounds and the thick black border has a high contrast against light backgrounds. diff --git a/src/patterns/addresses/index.md b/src/patterns/addresses/index.md index d82c83542f..9489bee499 100644 --- a/src/patterns/addresses/index.md +++ b/src/patterns/addresses/index.md @@ -20,7 +20,7 @@ This guidance is for government teams that build online services. [To find infor name: "Addresses", criteria: [ { - text: "reuse previously entered address", + text: "users can reuse a previously entered address", anchor: "wcag-reuse-addresses" } ] @@ -36,7 +36,7 @@ Help users provide an address using one of the following: {% call wcagNote({id: "wcag-reuse-addresses"}) %} -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.
+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.
{% endcall %} You can make it easier to reuse addresses through one of these methods: @@ -89,7 +89,7 @@ Use the `autocomplete` attribute on each individual address field to help user [Check which input purpose to use](https://www.w3.org/TR/WCAG21/#input-purposes) for each field. -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). You will not normally need to use the `autocomplete` attribute in prototypes, as users will not generally be using their own devices. +In production, you’ll need to do this to meet [WCAG 2.2 success criterion 1.3.5 Identify input purpose](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html). You will not normally need to use the `autocomplete` attribute in prototypes, as users will not generally be using their own devices. #### Error messages @@ -161,6 +161,6 @@ Use the `autocomplete` attribute on the textarea component when you're asking fo To do this, set the `autocomplete` attribute to `street-address` as shown in the HTML and Nunjucks tabs in the textarea example above. -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](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html). You will not normally need to use the `autocomplete` attribute in prototypes, as users will not generally be using their own devices. diff --git a/src/patterns/bank-details/index.md b/src/patterns/bank-details/index.md index 43f7587a9c..9b2451c291 100644 --- a/src/patterns/bank-details/index.md +++ b/src/patterns/bank-details/index.md @@ -20,7 +20,7 @@ This guidance is for government teams that build online services. [To find infor name: "Bank details", criteria: [ { - text: "reuse previously entered bank details", + text: "users can reuse previously entered bank details", anchor: "wcag-reuse-bank-details" } ] @@ -53,7 +53,7 @@ If your service does not support building society accounts, remove building soci {% call wcagNote({id: "wcag-reuse-bank-details"}) %}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.
+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.
{% endcall %} You can make it easier to reuse bank details through one of these methods: diff --git a/src/patterns/check-a-service-is-suitable/index.md b/src/patterns/check-a-service-is-suitable/index.md index a0c3e8cd26..010ad78ebb 100644 --- a/src/patterns/check-a-service-is-suitable/index.md +++ b/src/patterns/check-a-service-is-suitable/index.md @@ -19,7 +19,7 @@ Ask users questions to help them work out if they can or should use your service name: "Check a service is suitable", criteria: [ { - text: "use the service without repeating answers they've already given", + text: "users do not need to repeat answers that they've already given", anchor: "wcag-avoid-repeating-questions" } ] @@ -38,7 +38,7 @@ It can also help reduce time and money spent processing queries from users confuThis is to comply with WCAG 2.2 success criterion 3.3.7 Redundant entry.
+This is to comply with WCAG 2.2 success criterion 3.3.7 Redundant entry.
{% endcall %}  diff --git a/src/patterns/check-answers/index.md b/src/patterns/check-answers/index.md index 049683c3a2..f287dd7ed9 100644 --- a/src/patterns/check-answers/index.md +++ b/src/patterns/check-answers/index.md @@ -20,7 +20,7 @@ Let users check their answers before submitting information to a service. name: "Check answers", criteria: [ { - text: "go back and edit information they've already entered", + text: "users can go back and edit information they've already entered", anchor: "wcag-prepopulate-information" } ] @@ -72,7 +72,7 @@ You should provide a ‘Change’ link next to each section on your check answer {% call wcagNote({id: "wcag-prepopulate-information"}) %}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.
+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.
{% endcall %} The answers pages should look the same way they did when the user last used them. diff --git a/src/patterns/complete-multiple-tasks/index.md b/src/patterns/complete-multiple-tasks/index.md index bcce26372b..a7ad4d119d 100644 --- a/src/patterns/complete-multiple-tasks/index.md +++ b/src/patterns/complete-multiple-tasks/index.md @@ -24,11 +24,11 @@ Help users understand: name: "Complete multiple tasks", criteria: [ { - text: "interact with tasks without relying on 'click and drag' movements (if you choose to add functionality to reorder tasks)", + text: "if you choose to add functionality to reorder tasks, users can do so without relying on 'click and drag' movements", anchor: "wcag-interact-without-click-drag-task" }, { - text: "edit information they've given when going back to a previous task", + text: "users can edit information they've given when going back to a previous task", anchor: "wcag-edit-information-previous-task" } ] @@ -69,7 +69,7 @@ Where possible, task names should: {% call wcagNote({id: "wcag-interact-without-click-drag-task"}) %} -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.
+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.
{% endcall %} ### Show the status of the tasks @@ -150,7 +150,7 @@ If the user selects ‘Yes, I’ve completed this section,’ mark the task as ' {% call wcagNote({id: "wcag-edit-information-previous-task"}) %}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.
+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.
{% endcall %} {{ example({ group: "patterns", item: "complete-multiple-tasks", example: "have-you-completed-this-section", html: true, nunjucks: true, open: false }) }} diff --git a/src/patterns/confirm-a-phone-number/index.md b/src/patterns/confirm-a-phone-number/index.md index 92954f34c1..b1d50bca7f 100644 --- a/src/patterns/confirm-a-phone-number/index.md +++ b/src/patterns/confirm-a-phone-number/index.md @@ -21,11 +21,11 @@ Check that a user has access to a specific mobile phone number using a security name: "Confirm a phone number", criteria: [ { - text: "use a link to resend the security code when the user creates an account", + text: "users can use a link to resend the security code (when the user creates an account)", anchor: "wcag-resend-security-code-creation" }, { - text: "use a link to resend the security code when the user signs in", + text: "users can use a link to resend the security code (when the user signs in)", anchor: "wcag-resend-security-code-sign-in" } ] @@ -75,7 +75,7 @@ If the user follows the ‘Not received a text message?’ link, allow them to c {% call wcagNote({id: "wcag-resend-security-code-creation"}) %} -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.
+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.
{% endcall %} {{ example({ group: "patterns", item: "confirm-a-phone-number", example: "resend-first-time", html: true, nunjucks: true, open: false }) }} @@ -96,7 +96,7 @@ If they follow the ‘Not received a text message?’ link, show them a page all {% call wcagNote({id: "wcag-resend-security-code-sign-in"}) %} -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.
+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.
{% endcall %} {{ example({group: "patterns", item: "confirm-a-phone-number", example: "resend", html: true, nunjucks: true, open: false}) }} diff --git a/src/patterns/confirm-an-email-address/index.md b/src/patterns/confirm-an-email-address/index.md index 35ada9f90f..be1d678d41 100644 --- a/src/patterns/confirm-an-email-address/index.md +++ b/src/patterns/confirm-an-email-address/index.md @@ -20,7 +20,7 @@ This guidance is for government teams that build online services. [To find infor name: "Confirm an email address", criteria: [ { - text: "copy and paste a security code (if you're asking the user to enter a security code you've sent them)", + text: "if you're asking the user to enter a security code, they can enter the code using copy and paste", anchor: "wcag-copy-paste-security-codes" } ] @@ -61,7 +61,7 @@ Most email confirmation loops will send the user a link and ask them to click it {% call wcagNote({id: "wcag-copy-paste-security-codes"}) %} -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).
+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).
{% endcall %} ### Set expiry conditions 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 7eb07f8da7..84afb8f355 100644 --- a/src/patterns/contact-a-department-or-service-team/index.md +++ b/src/patterns/contact-a-department-or-service-team/index.md @@ -20,7 +20,7 @@ Give users contact information within your service. name: "Contact a department or service team", criteria: [ { - text: "find contact details in a consistent place across a set of pages", + text: "users can find contact details in a consistent place across a set of pages", anchor: "wcag-consistent-contact" } ] @@ -46,7 +46,7 @@ Show contact channels in the same order throughout your service. This helps userIf you repeat a particular set of contact details on different pages, show them in the same place on each page.
For example, if you show a ‘contact us’ section at the end of one help page, any other help pages that include the same ‘contact us’ section should have them shown at the end of the page as well.
-This is to comply with WCAG 2.2 success criterion 3.2.6 Consistent help.
+This is to comply with WCAG 2.2 success criterion 3.2.6 Consistent help.
{% endcall %} ### Social media diff --git a/src/patterns/create-accounts/index.md b/src/patterns/create-accounts/index.md index 69b2f967e1..fc854e3056 100644 --- a/src/patterns/create-accounts/index.md +++ b/src/patterns/create-accounts/index.md @@ -19,11 +19,11 @@ Help users create an account for your service. name: "Create accounts", criteria: [ { - text: "reuse information they've already entered", + text: "users can reuse information they've already entered", anchor: "wcag-reuse-account-information" }, { - text: "avoid doing a cognitive test, such as a CAPTCHA, to create an account", + text: "cognitives tests, such as CAPTCHA, are not a requirement for users to create an account", anchor: "wcag-avoid-cognitive-test" } ] @@ -69,7 +69,7 @@ Show a clear difference between creating an account and signing in. Presenting t {% call wcagNote({id: "wcag-reuse-account-information"}) %} -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 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.
+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 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.
{% endcall %} ### Make the sign-up process clear @@ -86,7 +86,7 @@ These are tests of cognitive function, which might be difficult for some users. {% call wcagNote({id: "wcag-avoid-cognitive-test"}) %} -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).
+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).
See more about using CAPTCHAs and why they’re problematic in the Service Manual. WCAG lists some other security measures you can implement to prevent misuse and automated abuse in your service.
{% endcall %} diff --git a/src/patterns/email-addresses/index.md b/src/patterns/email-addresses/index.md index c917cb4a05..421087fa4e 100644 --- a/src/patterns/email-addresses/index.md +++ b/src/patterns/email-addresses/index.md @@ -20,7 +20,7 @@ This guidance is for government teams that build online services. [To find infor name: "Email addresses", criteria: [ { - text: "reuse a previously entered email address", + text: "users can reuse a previously entered email address", anchor: "wcag-reuse-email-addresses" } ] @@ -48,7 +48,7 @@ You may also need to check that users have access to the email account they give {% call wcagNote({id: "wcag-reuse-email-addresses"}) %} -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.
+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.
{% endcall %} You can make it easier to reuse email addresses through one of these methods: @@ -83,7 +83,7 @@ Help your users to enter a valid email address by: You should also set the `autocomplete` attribute to `email`. This lets browsers autofill the email address on a user's behalf if they’ve entered it previously. -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). You will not normally need to use the `autocomplete` attribute in prototypes, as users will not generally be using their own devices. +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](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html). You will not normally need to use the `autocomplete` attribute in prototypes, as users will not generally be using their own devices. The field should be wide enough for most users to see their entire email address once they have entered it. A good rule of thumb is to make sure you can see at least 30 characters at once. You can analyse your user data to refine this. diff --git a/src/patterns/equality-information/index.md b/src/patterns/equality-information/index.md index ca8c3033c9..7965614804 100644 --- a/src/patterns/equality-information/index.md +++ b/src/patterns/equality-information/index.md @@ -20,7 +20,7 @@ Public sector organisations have a duty to consider the need to avoid discrimina name: "Equality information", criteria: [ { - text: "update their equality information without re-entering existing information", + text: "users can update their equality information without re-entering existing information", anchor: "wcag-do-not-ask-reentry-equality-info" } ] @@ -75,7 +75,7 @@ Updating equality information is especially relevant for longer term services an {% call wcagNote({id: "wcag-do-not-ask-reentry-equality-info"}) %} -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.
+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.
{% endcall %} ## Get specialist privacy or data protection advice diff --git a/src/patterns/names/index.md b/src/patterns/names/index.md index f19863988e..e359f5feff 100644 --- a/src/patterns/names/index.md +++ b/src/patterns/names/index.md @@ -18,7 +18,7 @@ layout: layout-pane.njk name: "National insurance numbers", criteria: [ { - text: "reuse a previously entered name", + text: "users can reuse a previously entered name", anchor: "wcag-reuse-name" } ] @@ -90,7 +90,7 @@ If you are asking users to enter their name in multiple fields, set the `autocom - `given-name` for fields labelled 'First name' or 'Given name' - `family-name` for fields labelled 'Last name' or 'Family name' -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](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html). You will not normally need to use the `autocomplete` attribute in prototypes, as users will not generally be using their own devices. @@ -98,7 +98,7 @@ You will not normally need to use the `autocomplete` attribute in prototypes, as {% call wcagNote({id: "wcag-reuse-name"}) %} -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.
+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.
{% endcall %} You can make it easier to reuse names through one of these methods: diff --git a/src/patterns/national-insurance-numbers/index.md b/src/patterns/national-insurance-numbers/index.md index 5bbe19490c..eaee3b3765 100644 --- a/src/patterns/national-insurance-numbers/index.md +++ b/src/patterns/national-insurance-numbers/index.md @@ -20,7 +20,7 @@ This guidance is for government teams that build online services. [To find infor name: "National insurance numbers", criteria: [ { - text: "reuse a previously entered National Insurance number", + text: "users can reuse a previously entered National Insurance number", anchor: "wcag-reuse-national-insurance-number" } ] @@ -61,7 +61,7 @@ When asking for a National Insurance number: {% call wcagNote({id: "wcag-reuse-national-insurance-number"}) %}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.
+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.
{% endcall %} You can make it easier to reuse National Insurance numbers through one of these methods: diff --git a/src/patterns/navigate-a-service/index.md b/src/patterns/navigate-a-service/index.md index 9432a1db7e..3c393bae39 100644 --- a/src/patterns/navigate-a-service/index.md +++ b/src/patterns/navigate-a-service/index.md @@ -20,11 +20,11 @@ Help users know they’re using your service and navigate around it. name: "Navigate a service", 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: "users can find help links in a consistent place on each page", anchor: "wcag-consistent-help-links" } ] @@ -113,7 +113,7 @@ Navigation is not a site map and does not need to list every part of your servic {% call wcagNote({id: "wcag-do-not-cover-content"}) %}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).
+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).
{% 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. @@ -121,7 +121,7 @@ In November 2021, [the GOV.UK homepage introduced a menu bar](https://insidegovu {% call wcagNote({id: "wcag-consistent-help-links"}) %}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.
+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.
{% endcall %} #### External links diff --git a/src/patterns/page-not-found-pages/index.md b/src/patterns/page-not-found-pages/index.md index b0cf2d8756..420f3e1567 100644 --- a/src/patterns/page-not-found-pages/index.md +++ b/src/patterns/page-not-found-pages/index.md @@ -20,7 +20,7 @@ A page not found tells someone we cannot find the page they were trying to view. name: "Page not found pages", criteria: [ { - text: "find contact information in a consistent way", + text: "users can find contact information in a consistent way", anchor: "wcag-consistent-content-page-not-found" } ] @@ -57,7 +57,7 @@ The content should be clear and concise, not blame the user. {% call wcagNote({id: "wcag-consistent-content-page-not-found"}) %} -You must always write contact information in a clear and consistent way across ‘Page not found’ and similar service error pages. This relates to WCAG 2.2 success criterion 3.2.6 Consistent help.
+You must always write contact information in a clear and consistent way across ‘Page not found’ and similar service error pages. This relates to WCAG 2.2 success criterion 3.2.6 Consistent help.
{% endcall %} Do not use: diff --git a/src/patterns/passwords/index.md b/src/patterns/passwords/index.md index c9644e4a53..3be8857748 100644 --- a/src/patterns/passwords/index.md +++ b/src/patterns/passwords/index.md @@ -19,7 +19,7 @@ Help users to create and enter secure and memorable passwords. name: "Passwords", criteria: [ { - text: "find 'reset password' links in a consistent place on each page", + text: "'reset password' links can be found in a consistent place on each page", anchor: "wcag-consistent-reset" } ] @@ -94,7 +94,7 @@ When helping users who’ve forgotten their password, you should: {% call wcagNote({id: "wcag-consistent-reset"}) %} -If you include instructions or a link to help users reset their password, make sure to place them consistently on the page. This is to comply with WCAG 2.2 success criterion 3.2.6 Consistent help.
+If you include instructions or a link to help users reset their password, make sure to place them consistently on the page. This is to comply with WCAG 2.2 success criterion 3.2.6 Consistent help.
{% endcall %} Also make sure any password reset links always perform the same action across each page. diff --git a/src/patterns/payment-card-details/index.md b/src/patterns/payment-card-details/index.md index 6b752b5ec7..acd8d29bd8 100644 --- a/src/patterns/payment-card-details/index.md +++ b/src/patterns/payment-card-details/index.md @@ -19,7 +19,7 @@ This guidance is for government teams that build online services. [To find infor name: "Payment card details", criteria: [ { - text: "interact the with month and year fields, by adding adequate spacing between them", + text: "there's adequate spacing between month and year fields, so users can easily interact with them", anchor: "wcag-spacing-month-year" } ] @@ -45,7 +45,7 @@ Present all fields on a single page, in the order in which they appear on a cred {% call wcagNote({id: "wcag-spacing-month-year"}) %} -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).
+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).
{% endcall %} Show logos for the cards you accept as icons so users can see whether their card is supported. diff --git a/src/patterns/phone-numbers/index.md b/src/patterns/phone-numbers/index.md index 51ea48797c..3ed7b6d795 100644 --- a/src/patterns/phone-numbers/index.md +++ b/src/patterns/phone-numbers/index.md @@ -34,7 +34,7 @@ Use the `autocomplete` attribute on phone number inputs. This lets browsers auto To do this, set the `autocomplete` attribute to `tel`, as shown in the HTML and Nunjucks tabs in the examples on this page. -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](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html). You will not normally need to use the `autocomplete` attribute in prototypes, as users will not generally be using their own devices. diff --git a/src/patterns/problem-with-the-service-pages/index.md b/src/patterns/problem-with-the-service-pages/index.md index 7173e5db24..29eeeb1c47 100644 --- a/src/patterns/problem-with-the-service-pages/index.md +++ b/src/patterns/problem-with-the-service-pages/index.md @@ -20,11 +20,11 @@ This guidance is for government teams that build online services. [To find infor name: "There is a problem with the service pages", criteria: [ { - text: "get contact information in a consistent way", + text: "users can get contact information in a consistent way", anchor: "wcag-consistent-content-problem-service" }, { - text: "resume the service using information they've previously entered, if possible", + text: "users can resume the service using information they've previously entered, if possible", anchor: "wcag-resume-previous-entered-information" } ] @@ -70,7 +70,7 @@ Store previously entered information for a reasonable amount of time so users ca {% call wcagNote({id: "wcag-resume-previous-entered-information"}) %}Whenever possible, 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.
+This is to comply with WCAG 2.2 success criterion 3.3.7 Redundant entry.
{% endcall %} ### Showing contact information @@ -84,7 +84,7 @@ You might choose to link to a ‘contact information’ page, such as one shown {% call wcagNote({id: "wcag-consistent-content-problem-service"}) %} -You must always write contact information in a clear and consistent way across ‘There is a problem with the service’ and similar service error pages. This relates to WCAG 2.2 success criterion 3.2.6 Consistent help.
+You must always write contact information in a clear and consistent way across ‘There is a problem with the service’ and similar service error pages. This relates to WCAG 2.2 success criterion 3.2.6 Consistent help.
{% endcall %} ### Service has a specific page that includes numbers and opening times diff --git a/src/patterns/question-pages/index.md b/src/patterns/question-pages/index.md index b7ffc0709c..ba1ca1a132 100644 --- a/src/patterns/question-pages/index.md +++ b/src/patterns/question-pages/index.md @@ -20,11 +20,11 @@ This pattern explains when to use question pages and what elements they need to name: "Question pages", criteria: [ { - text: "avoid re-entering information they've given in a previous answer", + text: "users can avoid re-entering information they've given in a previous answer", anchor: "wcag-reenter-previous-answer" }, { - text: "select an answer without relying on 'click and drag' movement", + text: "users can select an answer without relying on 'click and drag' movements", anchor: "wcag-select-without-click-drag" } ] @@ -66,7 +66,7 @@ If research shows it’s helpful for users, you can also include a [progress ind {% call wcagNote({id: "wcag-reenter-previous-answer"}) %} -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.
+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.
{% endcall %} If the same type of information is needed more than once, make it easier to reuse previously entered answers through one of these methods: @@ -191,5 +191,5 @@ A number of GOV.UK services have removed this style of progress indicator withou {% call wcagNote({id: "wcag-select-without-click-drag"}) %}Avoid using range slider 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.
+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.
{% endcall %} diff --git a/src/patterns/service-unavailable-pages/index.md b/src/patterns/service-unavailable-pages/index.md index 51d2ed1455..88f0f39c67 100644 --- a/src/patterns/service-unavailable-pages/index.md +++ b/src/patterns/service-unavailable-pages/index.md @@ -20,7 +20,7 @@ This guidance is for government teams that build online services. [To find infor name: "Service unavailable pages", criteria: [ { - text: "get contact information in a consistent way", + text: "users can get contact information in a consistent way", anchor: "wcag-consistent-content-service-unavailable" } ] @@ -56,7 +56,7 @@ Contact information should either be: {% call wcagNote({id: "wcag-consistent-content-service-unavailable"}) %} -You must always write contact information in a clear and consistent way across ‘Service unavailable’ and similar service error pages. This relates to WCAG 2.2 success criterion 3.2.6 Consistent help.
+You must always write contact information in a clear and consistent way across ‘Service unavailable’ and similar service error pages. This relates to WCAG 2.2 success criterion 3.2.6 Consistent help.
{% endcall %} Have clear and concise content and do not use: diff --git a/src/patterns/validation/index.md b/src/patterns/validation/index.md index c85f2cd6aa..e812033950 100644 --- a/src/patterns/validation/index.md +++ b/src/patterns/validation/index.md @@ -18,7 +18,7 @@ Check the information the user gives you to make sure it’s valid. If there's a name: "Recover from validation errors", criteria: [ { - text: "edit information they've previously given to correct an error", + text: "users can edit information they've previously given to correct an error", anchor: "wcag-edit-to-correct-errors" } ] @@ -76,7 +76,7 @@ Read guidance on [writing good error messages](/components/error-message/#be-cle {% call wcagNote({id: "wcag-edit-to-correct-errors"}) %} -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.
+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.
{% endcall %} Keeping information that failed validation helps users to: diff --git a/src/styles/images/index.md b/src/styles/images/index.md index 4405fa6698..de138e10a0 100644 --- a/src/styles/images/index.md +++ b/src/styles/images/index.md @@ -74,7 +74,7 @@ Do not use a single icon to represent more than one thing. For example, the sear {% call wcagNote({id: "wcag-icon-focus"}) %} -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).
+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).
{% endcall %} ## Avoid images that contain text diff --git a/views/partials/_wcag-callout.njk b/views/partials/_wcag-callout.njk index f41962fc7a..98af15b6ca 100644 --- a/views/partials/_wcag-callout.njk +++ b/views/partials/_wcag-callout.njk @@ -13,7 +13,7 @@ {% if caller -%} {{ caller() }} {% else -%} -To {{params.introAction}} ‘{{params.name}}’ and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully:
+To {{params.introAction}} ‘{{params.name}}’ and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that: