- 4 simple questions to check it's "done" + 4 questions to check it's "done"
Make sure your service meets WCAG 2.2
+For: Design, Development, Product and delivery, Testing
+ ++ + WCAG 2.2 + +
+The Web Content Accessibility Guidelines (WCAG) 2.2 add 9 new "success criteria" for improving web accessibility. 6 of the new criteria are graded at the A and AA level, which means they're a requirement for websites and mobile apps in the NHS. Learn more about the WCAG 2.2 new accessibility requirements and criteria.
+See the full list of design system changes to meet the requirements.
\ No newline at end of file diff --git a/app/views/accessibility/product-and-delivery.njk b/app/views/accessibility/product-and-delivery.njk index 1ca1bf7d4..01a4f30ec 100644 --- a/app/views/accessibility/product-and-delivery.njk +++ b/app/views/accessibility/product-and-delivery.njk @@ -3,7 +3,7 @@ {% set subSection = "Accessibility" %} {% set pageDescription = "What product and delivery managers need to do to make digital services accessible." %} {% set theme = "Accessibility guidance for:" %} -{% set dateUpdated = "March 2021" %} +{% set dateUpdated = "April 2024" %} {% set backlog_issue_id = "345" %} {% extends "includes/app-layout.njk" %} @@ -14,6 +14,7 @@ {% block bodyContent %} + {% include "./partials/make-sure-your-service-meets-wcag-2-2.njk" %} {% include "./partials/make-sure-everyone-knows-their-responsibilities.njk" %} {% include "./partials/ask-questions-at-the-start-of-the-project.njk" %} {% include "./partials/check-that-accessibility-is-done.njk" %} diff --git a/app/views/accessibility/testing.njk b/app/views/accessibility/testing.njk index 7678b9acb..cd272f24c 100644 --- a/app/views/accessibility/testing.njk +++ b/app/views/accessibility/testing.njk @@ -3,7 +3,7 @@ {% set subSection = "Accessibility" %} {% set pageDescription = "What testers and quality assurers need to do to make digital services accessible." %} {% set theme = "Accessibility guidance for:" %} -{% set dateUpdated = "January 2024" %} +{% set dateUpdated = "April 2024" %} {% set backlog_issue_id = "350" %} {% extends "includes/app-layout.njk" %} @@ -21,6 +21,7 @@ + {% include "./partials/make-sure-your-service-meets-wcag-2-2.njk" %} {% include "./partials/understand-types-of-testing.njk" %} {% include "./partials/check-orientation-is-not-locked.njk" %} {% include "./partials/make-sure-navigation-is-consistent.njk" %} diff --git a/app/views/design-system/components/back-link/index.njk b/app/views/design-system/components/back-link/index.njk index 06d741b42..d09535a4c 100644 --- a/app/views/design-system/components/back-link/index.njk +++ b/app/views/design-system/components/back-link/index.njk @@ -1,55 +1,103 @@ {% set pageTitle = "Back link" %} {% set pageSection = "Design system" %} {% set subSection = "Components" %} -{% set pageDescription = "Use back links to help users go back to the previous page in a multi-page transaction" %} +{% set pageDescription = "Use back links to help users go back to the previous page in a multi-page transaction." %} {% set theme = "Navigation" %} -{% set dateUpdated = "January 2023" %} +{% set dateUpdated = "April 2024" %} {% set backlog_issue_id = "32" %} {% extends "includes/app-layout.njk" %} {% block breadcrumb %} - {% include "design-system/components/_breadcrumb.njk" %} +{% include "design-system/components/_breadcrumb.njk" %} {% endblock %} {% block bodyContent %} - {{ designExample({ - group: "components", - item: "back-link", - type: "default" - }) }} +When to use a back link
-We only use back links on transactional services or multi-page forms.
-The GOV.UK Design System recommends including a back link on question pages. Read more about question pages on GOV.UK.
-You can include a back link on other pages in a multi-page transaction, if it makes sense to do so.
+WCAG 2.2 affects this component
+To meet new success criteria introduced in the Web Content Accessibility Guidelines (WCAG) 2.2, make sure that users can successfully:
+-
+
- avoid re-entering information they've previously + given when they go back to a page +
- interact with back links +
See the full list of design system changes to meet WCAG 2.2.
+When not to use a back link
-Do not use a back link on a content page, like a health information page.
-Do not use a back link with breadcrumbs.
+{{ designExample({ +group: "components", +item: "back-link", +type: "default" +}) }} -How to use back links
-Make sure the text used in the link describes the action, for example "Go back". Carry out research with users to find the words that help them the most.
-The link should take users back to the page they were on in the state they last saw it.
-Consider where you put the back link. Do not put it close to other links or buttons where it might distract users from what they need to do.
-The GOV.UK Design System says that you should put back links at the top of a page, but a couple of NHS services (NHS 111 online and Find out why your NHS data matters) found that it works better at the bottom of the page below the primary action. That's because we don't want to suggest to people who use a screen reader that they leave the page prematurely.
+When to use a back link
+We only use back links on transactional services or multi-page forms.
+The GOV.UK design system recommends + including a back link on question pages. Read more about question pages on GOV.UK.
+You can include a back link on other pages in a multi-page transaction, if it makes sense to do so.
-Back link as a button
-You can render the back link as a button element if necessary in order to post form data back to the previous page.
When not to use a back link
+Do not use a back link on a content page, like a health information page.
+Do not use a back link with breadcrumbs.
- {{ designExample({ - group: "components", - item: "back-link", - type: "button" - }) }} +How to use back links
+Make sure the text used in the link describes the action, for example "Go back". Carry out research with users to + find the words that help them the most.
+The link should take users back to the page they were on in the state they last saw it.
-Accessibility
-When you're considering where to put back link on a page, think about people who use a screen reader.
-Also, make sure the text you use describes the action. Do not rely on "Go back". It might not reflect what users expect.
+Research
-During testing, NHS 111 online found that some users wanted to change their answers, so they introduced a back link and labelled it to "Change my previous answer".
-The Digital Accessibility Centre recommended that Find out why your NHS data matters place their back link below the primary action, because screen reader users were confused when they landed on a page and were immediately told to go back.
+If a user goes back to a previous page, make sure information they have already entered is pre-populated.
+Do not pre-populate if the information is no longer valid, or when pre-populating would be a major safety or security concern. This is to comply with WCAG 2.2 success criterion 3.3.7 Redundant Entry (W3C).
+Consider where you put the back link. Do not put it close to other links or buttons where it might distract users + from what they need to do. Also think about people who use a screen reader.
+ +Make sure no other interactive elements are too close to the back link so users can easily + interact with it. This is to comply with WCAG 2.2 success criterion 2.5.8 Target Size (W3C).
+The GOV.UK design system says that you + should put back links at the top of a page, but a couple of NHS services (NHS 111 + online and Find out why your NHS data matters) found that + it works better at the bottom of the page below the primary action. That's because we don't want to suggest to people + who use a screen reader that they leave the page prematurely.
+ +Back link as a button
+You can render the back link as a button element if necessary in order to post form
+ data back to the previous page.
Research
+During testing, NHS 111 online found that some users wanted to change their + answers, so they introduced a back link and labelled it to "Change my previous answer".
+An accessibility audit recommended that Find out why your NHS data matters place their back link below + the primary action, because screen reader users were confused when they landed on a page and were immediately told to + go back.
+ +{% endblock %} \ No newline at end of file diff --git a/app/views/design-system/components/breadcrumbs/index.njk b/app/views/design-system/components/breadcrumbs/index.njk index 60b650ae6..8bdba179e 100644 --- a/app/views/design-system/components/breadcrumbs/index.njk +++ b/app/views/design-system/components/breadcrumbs/index.njk @@ -3,41 +3,72 @@ {% set subSection = "Components" %} {% set pageDescription = "Use breadcrumbs to help users understand where they are in the website." %} {% set theme = "Navigation" %} -{% set dateUpdated = "April 2023" %} +{% set dateUpdated = "April 2024" %} {% set backlog_issue_id = "6" %} {% extends "includes/app-layout.njk" %} {% block breadcrumb %} - {% include "design-system/components/_breadcrumb.njk" %} +{% include "design-system/components/_breadcrumb.njk" %} {% endblock %} {% block bodyContent %} - {{ designExample({ - group: "components", - item: "breadcrumbs", - type: "default" - }) }} +When to use breadcrumbs
-Use breadcrumbs to give users context and let them move back or up a level if they can't find what they want on the page.
+WCAG 2.2 affects this component
+To meet new success criteria introduced in the Web Content Accessibility Guidelines (WCAG) 2.2, make sure that users can successfully:
+ +See the full list of design system changes to meet WCAG 2.2.
+When not to use breadcrumbs
-Don't use breadcrumbs in transactional journeys as they can get in the way of the user completing the task.
+{{ designExample({ +group: "components", +item: "breadcrumbs", +type: "default" +}) }} -How to use breadcrumbs
-If the full breadcrumb trail doesn't fit the screen size, it can wrap onto 2 lines, but don't break a breadcrumb if it doesn't fit the line.
-You don't need to show the current page in the breadcrumb because this information is in the H1.
-On mobile, we replace the full breadcrumb trail with a "Back to [parent]" link.
+When to use breadcrumbs
+Use breadcrumbs to give users context and let them move back or up a level if they can't find what they want on the + page.
-Accessibility
-We use aria-label="breadcrumb" as a label in the nav element to let people who use screen readers know what it is.
We add aria-hidden="true" to the svg icons to hide them from people who use screen readers.
When not to use breadcrumbs
+Don't use breadcrumbs in transactional journeys as they can get in the way of the user completing the task.
-Research
-We tested breadcrumbs on pages with lots of content about conditions or medicines. They helped people understand their place on the website. People noticed them and appreciated the context they gave. People also used them to get back to where they came from or to get back home.
-We took out the breadcrumb links when we tested our pages in transactional journeys (in more than 3 labs). We thought that having extra links would distract users and that fewer people would complete the journey. As we expected, we found that users didn’t miss the links because they were focused on the task.
-Get in touch to share your research findings about this pattern.
+How to use breadcrumbs
+If the full breadcrumb trail doesn't fit the screen size, it can wrap onto 2 lines, but don't break a breadcrumb if + it doesn't fit the line.
-{% endblock %} +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 is to comply with WCAG 2.2 success criterion 2.5.8 Target Size (W3C).
+You don't need to show the current page in the breadcrumb because this information is in the H1.
+On mobile, we replace the full breadcrumb trail with a "Back to [parent]" link.
+ +Accessibility
+We use aria-label="breadcrumb" as a label in the nav element to let people who use
+ screen readers know what it is.
We add aria-hidden="true" to the svg icons
+ to hide them from people who use screen readers.
Research
+We tested breadcrumbs on pages with lots of content about conditions or medicines. They helped people understand + their place on the website. People noticed them and appreciated the context they gave. People also used them to get + back to where they came from or to get back home.
+We took out the breadcrumb links when we tested our pages in transactional journeys (in more than 3 labs). We thought + that having extra links would distract users and that fewer people would complete the journey. As we expected, we + found that users didn't miss the links because they were focused on the task.
+ +{% endblock %} \ No newline at end of file diff --git a/app/views/design-system/components/buttons/index.njk b/app/views/design-system/components/buttons/index.njk index 3671803ab..5f59d6ecd 100644 --- a/app/views/design-system/components/buttons/index.njk +++ b/app/views/design-system/components/buttons/index.njk @@ -3,7 +3,7 @@ {% set subSection = "Components" %} {% set pageDescription = "Use buttons to help users carry out an action on a page like starting an application or saving their progress." %} {% set theme = "Form elements" %} -{% set dateUpdated = "January 2023" %} +{% set dateUpdated = "April 2024" %} {% set backlog_issue_id = "7" %} {% extends "includes/app-layout.njk" %} @@ -14,6 +14,19 @@ {% block bodyContent %} +WCAG 2.2 affects this component
+To meet new success criteria introduced in the Web Content Accessibility Guidelines (WCAG) 2.2, make sure that users can successfully:
+ +See the full list of design system changes to meet WCAG 2.2.
+We have 3 buttons
- primary button @@ -67,19 +80,25 @@
- from 1 flat content page to another
- to external websites
Try not to have multiple buttons on 1 page. Follow GOV.UK guidance on One thing per page.
+Try not to have multiple buttons on 1 page. Follow GOV.UK guidance on structuring forms and starting with one thing per page.
How to use buttons
-The GOV.UK Design System suggests using a button to help users carry out an action on a page like starting an application or saving their progress.
+The GOV.UK design system suggests using a button to help users carry out an action on a page like starting an application or saving their progress.
Write button text in sentence case and describe the action the button performs. For example "Save and continue" or "Start now".
Align the primary action button to the left edge of your form.
+ +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 (W3C).
+Disabled buttons
Disabled buttons have poor contrast and can confuse some users. Only use them if user research shows it makes things easier for users to understand.
We have developed disabled versions of the 3 buttons but we haven't tested them yet. You can get the latest disabled button code in the NHS.UK frontend library in GitHub.
-Accessibility
-Make sure the text you use describes the action.
+Colour contrast
All 3 active buttons pass AAA guidelines for colour contrast. The colour contrast ratio between text and background colour is as follows:
- primary button 5.12:1 diff --git a/app/views/design-system/components/error-message/index.njk b/app/views/design-system/components/error-message/index.njk index 930dafa11..46a000ceb 100644 --- a/app/views/design-system/components/error-message/index.njk +++ b/app/views/design-system/components/error-message/index.njk @@ -3,7 +3,7 @@ {% set subSection = "Components" %} {% set pageDescription = "Use an error message when there is a validation error. Explain what went wrong and how to fix it." %} {% set theme = "Form elements" %} -{% set dateUpdated = "June 2020" %} +{% set dateUpdated = "April 2024" %} {% set backlog_issue_id = "12" %} {% extends "includes/app-layout.njk" %} @@ -14,6 +14,19 @@ {% block bodyContent %} +
- use a red border to visually connect the message and the question it belongs to
- if the error relates to specific text fields in the question, give these a red border as well
WCAG 2.2 affects this component
+To meet new success criteria introduced in the Web Content Accessibility Guidelines (WCAG) 2.2, make sure that users can successfully:
+ +See the full list of design system changes to meet WCAG 2.2.
+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 (W3C).
+Keeping information that caused errors helps users to:
+-
+
- see what went wrong +
- edit their previous answer +
- avoid re-entering information +
To help screen reader users, the error message component includes a hidden "Error:" before the error message. These users will hear, for example, "Error: Date of birth must be in the past".
{{ designExample({ @@ -104,8 +134,8 @@ }) }}How to write error messages
-Focus on telling users how to fix the problem rather than describing what's gone wrong. You may need to write more than 1 error message for each field. Read more about writing good error messages on GOV.UK.
-Use standard messages for different components. The GOV.UK Design System has some good error message templates for common errors.
+Focus on telling users how to fix the problem rather than describing what's gone wrong. You may need to write more than 1 error message for each field. See the GOV.UK error message component for more guidance on writing good error messages.
+Use standard messages for different components. The GOV.UK error message component also includes error message templates for common errors.
Research
Research on error messages showed users:
diff --git a/app/views/design-system/components/footer/index.njk b/app/views/design-system/components/footer/index.njk index c0a53c3e1..ecb806863 100644 --- a/app/views/design-system/components/footer/index.njk +++ b/app/views/design-system/components/footer/index.njk @@ -3,7 +3,7 @@ {% set subSection = "Components" %} {% set pageDescription = "Use the footer to show users they are on an NHS service and to help them find links they expect at the bottom of our pages." %} {% set theme = "Navigation" %} -{% set dateUpdated = "March 2024" %} +{% set dateUpdated = "April 2024" %} {% set backlog_issue_id = "15" %} {% extends "includes/app-layout.njk" %} @@ -14,6 +14,19 @@ {% block bodyContent %} +WCAG 2.2 affects this component
+To meet new success criteria introduced in the Web Content Accessibility Guidelines (WCAG) 2.2, make sure that users can successfully:
+ +See the full list of design system changes to meet WCAG 2.2.
+If you include links to "help" pages in a footer, make sure to place those links consistently in the footer content. Also make sure that "help" links always work in a similar way across each page. This is to comply with WCAG 2.2 success criterion 3.2.6 Consistent Help (W3C).
+Keep links to a minimum, especially in a transactional journey. Too many links can distract users. Link to specific policies for the transaction, if appropriate.
If your total number of links is less than 7, arrange them horizontally in lines.
@@ -60,11 +82,5 @@Your copyright statement must reflect the ownership of your website or service. The NHS website is (c) Crown copyright but the NHS generally does not have Crown status. The service manual footer, for example, says (c) NHS England.
Include a reference to the Open Government Licence if your organisation or service encourages people to reuse and adapt its information under the licence.
Contact your legal team for advice.
-Accessibility
-In 2023, we updated the NHS footer colours to improve accessibility with:
--
-
- dark blue links that turn dark pink on hover -
- the copyright statement in dark grey -
WCAG 2.2 affects this component
+To meet new success criteria introduced in the Web Content Accessibility Guidelines (WCAG) 2.2, make sure that users can successfully:
+-
+
- see all page content when interacting with a dropdown menu +
- find help links in a consistent place on each page +
See the full list of design system changes to meet WCAG 2.2.
+The elements you include depend on the nature of your service and your users' needs.
For example, transactional services (like Find your NHS number, on the NHS website) do not usually include navigation and search, just the logo and service name. This is less distracting for users in a transactional journey.
+Do not make header elements, like the "More" dropdown menu, sticky to the top of the page by using position: fixed or any other method. In other words, avoid anything that makes the menu sit on top of page content.
This is to make sure it does not hide or obscure any content which has a focus applied. This complies with WCAG 2.2 success criterion 2.4.11 Focus not Obscured (W3C).
+You can add a link to a "help" page in your service's header. If you do, the link must be positioned consistently in 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 (W3C).
+Search
The NHS header can include a search bar.
If your content or service is on the NHS website and you need help with search, the service manual team can put you in touch with the team that manages our search functionality contract.
diff --git a/app/views/design-system/components/select/index.njk b/app/views/design-system/components/select/index.njk index ceaa22b99..099ed9efa 100644 --- a/app/views/design-system/components/select/index.njk +++ b/app/views/design-system/components/select/index.njk @@ -3,7 +3,7 @@ {% set subSection = "Components" %} {% set pageDescription = "Use select to let users choose an option from a long list but only use it as a last resort." %} {% set theme = "Form elements" %} -{% set dateUpdated = "January 2019" %} +{% set dateUpdated = "April 2024" %} {% set backlog_issue_id = "20" %} {% extends "includes/app-layout.njk" %} @@ -14,6 +14,19 @@ {% block bodyContent %} +WCAG 2.2 affects this component
+To meet new success criteria introduced in the Web Content Accessibility Guidelines (WCAG) 2.2, make sure that users can successfully:
+ +See the full list of design system changes to meet WCAG 2.2.
+How to use select
The select component allows users to choose an option from a long list. Before using it, try other questions which will allow you to present users with fewer options. Consider using a different solution, such as radios.
+ +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 (W3C).
+Research
-Watch a video about how some users struggle with selects: Alice Barlett: Burn your select tags.
+Watch a video about how some users struggle with selects: Alice Bartlett: Burn your select tags.
{% endblock %} diff --git a/app/views/design-system/components/summary-list/index.njk b/app/views/design-system/components/summary-list/index.njk index 72acebb32..bdf62b815 100644 --- a/app/views/design-system/components/summary-list/index.njk +++ b/app/views/design-system/components/summary-list/index.njk @@ -1,9 +1,9 @@ {% set pageTitle = "Summary list" %} {% set pageSection = "Design system" %} {% set subSection = "Components" %} -{% set pageDescription = "Use the summary list to summarise information, for example, a user’s responses at the end of a form." %} +{% set pageDescription = "Use the summary list to summarise information, for example, a user's responses at the end of a form." %} {% set theme = "Content presentation" %} -{% set dateUpdated = "August 2020" %} +{% set dateUpdated = "April 2024" %} {% set backlog_issue_id = "36" %} {% extends "includes/app-layout.njk" %} @@ -14,6 +14,20 @@ {% block bodyContent %} +WCAG 2.2 affects this component
+To meet new success criteria introduced in the Web Content Accessibility Guidelines (WCAG) 2.2, make sure that users can successfully:
+ +See the full list of design system changes to meet WCAG 2.2.
+Think about how you can use the summary list along with other components or patterns to give users a sense of control. You can use it to summarise a user’s responses at the end of a form, for example as part of the GOV.UK check answers pattern.
+Think about how you can use the summary list along with other components or patterns to give users a sense of control. You can use it to summarise a user's responses at the end of a form, for example as part of the GOV.UK check answers pattern.
When not to use summary lists
The summary list uses the description list <dl> HTML element, so only use it to present information that has a key and at least 1 value.
Do not use it for tabular data or a simple list of information or tasks, like a task list page. (See the GOV.UK task list page pattern.) For those, use a <table>, <ul> or <ol>.
Do not use it for tabular data or a simple list of information or tasks, like a task list page. (See the GOV.UK complete multiple tasks pattern.) For those, use a <table>, <ul> or <ol>.
How to use summary lists
-There are 2 ways to use the summary list component. You can use HTML or, if you’re using Nunjucks or the NHS.UK prototype kit, you can use the Nunjucks macro.
+There are 2 ways to use the summary list component. You can use HTML or, if you're using Nunjucks or the NHS.UK prototype kit, you can use the Nunjucks macro.
{{ designExample({ group: "components", @@ -43,7 +57,26 @@Summary list with actions
You can add actions to a summary list, like a "Change" link to let users go back and edit their answer.
-People who use assistive technology, like a screen reader, may hear the action links out of context and not know what they do. To give more context, add visually hidden text to the links. This means a screen reader user will hear a meaningful action, like "Change name" or "Change date of birth".
+ +Make sure any "Change" or other 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 is to comply with WCAG 2.2 success criterion 2.5.8 Target Size (W3C).
+If a user decides to go back to a previous answer through an action link, make sure information they have already entered is pre-populated.
+Do not pre-populate if the information is no longer valid, or when pre-populating would be a major safety or security concern. This is to comply with WCAG 2.2 success criterion 3.3.7 Redundant Entry (W3C).
+People who use assistive technology, like a screen reader, may hear the links out of context and not know what they do. To give more context, add visually hidden text to the links. This means a screen reader user will hear a meaningful action, like "Change name" or "Change date of birth".
{{ designExample({ group: "components", diff --git a/app/views/design-system/components/tag/index.njk b/app/views/design-system/components/tag/index.njk index fbfebfbe5..a7b623e4f 100644 --- a/app/views/design-system/components/tag/index.njk +++ b/app/views/design-system/components/tag/index.njk @@ -3,7 +3,7 @@ {% set subSection = "Components" %} {% set pageDescription = "Use the tag component when it's possible for something to have more than 1 status and it's useful for the user to know about that status. For example, you can use a tag to show whether an item in a task list has been \"completed\"." %} {% set theme = "Content presentation" %} -{% set dateUpdated = "October 2020" %} +{% set dateUpdated = "April 2024" %} {% set backlog_issue_id = "174" %} {% set hideDescription = "true" %} @@ -15,6 +15,19 @@ {% block bodyContent %} +WCAG 2.2 affects this component
+To meet new success criteria introduced in the Web Content Accessibility Guidelines (WCAG) 2.2, make sure that users can successfully:
+ +See the full list of design system changes to meet WCAG 2.2.
+When to use a tag
Use the tag component when it's possible for something to have more than 1 status and it's useful for the user to know about that status. For example, you can use a tag to show whether an item in a task list has been "completed".
@@ -40,6 +53,15 @@ type: "multiple" }) }} +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 (W3C).
+Using colour with tags
You can use colour to help distinguish between different tags – or to help draw the user's attention to a tag if it's especially important. For example, it makes sense to use nhsuk-tag--red for a tag that reads "Urgent".
Do not rely on colour alone to convey information because it's not accessible. If you use the same tag in more than 1 place, make sure you keep the colour consistent.
diff --git a/app/views/design-system/index.njk b/app/views/design-system/index.njk index 1d9748075..c1b71757a 100644 --- a/app/views/design-system/index.njk +++ b/app/views/design-system/index.njk @@ -7,13 +7,101 @@ {% block bodyContent %} -Use these design styles, components and patterns to quickly make prototypes or build a live service.
+Use these design styles, components and patterns to quickly make prototypes or build a live service. The examples come with code to make it easy for you to use them in your project.
-The examples in the NHS digital service manual come with code to make it easy for you to use them in your project.
+Changes to meet new accessibility requirements
++ + WCAG 2.2 + +
+We've added new guidance to meet WCAG 2.2 level AA. Learn about the new WCAG 2.2 accessibility requirements.
+ +Updates to our components
+No changes to design or code, but you must check the updated guidance to understand whether your service needs updating.
+| + Page + | ++ Changes + | +
|---|---|
| Back link | +Guidance on positioning and keeping data the user has entered | +
| Breadcrumbs | +Guidance on positioning | +
| Buttons | +Guidance on minimum target size | +
| Error message | +Guidance on not clearing data the user has entered | +
| Footer | +Guidance on placing help links | +
| Header | +Guidance on placing help links and not hiding content that has a focus applied | +
| Select | +Guidance on avoiding click and drag | +
| Summary list | +Guidance on action link target size and keeping data the user has entered | +
| Tag | +Guidance on avoiding click and drag | +
Updates to our styles
+No changes to design or code, but you must check the updated guidance to understand whether your service needs updating.
+| + Page + | ++ Changes + | +
|---|---|
| Focus state | +Guidance on not hiding content that has a focus applied | +
| Icons | +Guidance on minimum target size | +
Updates to our patterns
+None of our patterns need updating.
+ +Updates to the GOV.UK design system
+Our design system is based on GOV.UK and we know that teams regularly refer to their guidance too. If your service uses any components or patterns borrowed from the GOV.UK design system, make sure you check their guidance too.
+Read about GOV.UK changes to their design system to meet WCAG 2.2.
-WCAG 2.2
-We are currently reviewing the design system and will be updating it to reflect WCAG 2.2.
-Teams should comply now to make sure products and services are ready by October 2024. This is when the Government Digital Service, Department of Health and Social Care and NHS England will start monitoring accessibility to WCAG 2.2.
@@ -33,6 +33,16 @@
-
+
-
+
-
+ +++ + WCAG 2.2 + ++
Check your service meets the new accessibility requirements
+ -
diff --git a/app/views/site-map.njk b/app/views/site-map.njk index d7baf9a3d..96091ec12 100644 --- a/app/views/site-map.njk +++ b/app/views/site-map.njk @@ -15,6 +15,7 @@
- What all NHS services need to do about accessibility
- How to make digital services accessible
- Getting started with accessibility
+- New accessibility requirements: WCAG 2.2
- Download accessibility posters
- Product and delivery
- User research
diff --git a/app/views/whats-new/index.njk b/app/views/whats-new/index.njk index f77e3e195..76773abcb 100644 --- a/app/views/whats-new/index.njk +++ b/app/views/whats-new/index.njk @@ -9,9 +9,9 @@Latest updates
-March 2024
+April 2024
-
Updates to the service manual in March 2024 +Updates to the service manual in April 2024 Section @@ -20,25 +20,36 @@- Content guide +Accessibility guidance - Updated outstanding COVID-19 entries in the A to Z of NHS health writing
-Deleted entry for NHS COVID Pass as this service has closed
+Added new accessibility requirements: WCAG 2.2
+Added sections on making sure your service meets WCAG 2.2 for: Product and delivery and Design, Development and Testing
Design system - Right aligned copyright statement in the footer component
-Fixed target size issue on A to Z page
+Added list of changes to meet new accessibility requirements to design system
+Updated components and styles for WCAG 2.2:
+-
+
- Back link: guidance on positioning and keeping data the user has entered +
- Breadcrumbs: guidance on positioning +
- Buttons: guidance on minimum target size +
- Error message: guidance on not clearing data the user has entered +
- Footer: guidance on placing help links +
- Header: guidance on placing help links and not hiding content that has a focus applied +
- Select: guidance on avoiding click and drag +
- Summary list: guidance on action link target size and keeping data the user has entered +
- Tag: guidance on avoiding click and drag +
- Focus state: guidance on not hiding content that has a focus applied +
- Icons: guidance on minimum target size +
Other - Added new page Feedback or share insights in Community and contribution section
-Updated the "Help us improve this guidance" section at the bottom of pages across the site
-Updated site map
+Updated site map
April 2024
++
+Updates to the service manual in April 2024 + ++ + + +Section +Update ++ +Accessibility guidance ++ +Added new accessibility requirements: WCAG 2.2
+Added sections on making sure your service meets WCAG 2.2 for: Product and delivery and Design, Development and Testing
++ +Design system ++ +Added list of changes to meet new accessibility requirements to design system
+Updated components and styles for WCAG 2.2:
+-
+
- Back link: guidance on positioning and keeping data the user has entered +
- Breadcrumbs: guidance on positioning +
- Buttons: guidance on minimum target size +
- Error message: guidance on not clearing data the user has entered +
- Footer: guidance on placing help links +
- Header: guidance on placing help links and not hiding content that has a focus applied +
- Select: guidance on avoiding click and drag +
- Summary list: guidance on action link target size and keeping data the user has entered +
- Tag: guidance on avoiding click and drag +
- Focus state: guidance on not hiding content that has a focus applied +
- Icons: guidance on minimum target size +
+ + +Other ++ +Updated site map
+March 2024
-Updates to the service manual in January 2024 @@ -45,7 +91,6 @@January 2024
Updates to the service manual in January 2024 diff --git a/package.json b/package.json index 156878a82..2fad9beff 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nhsuk-service-manual", - "version": "6.2.2", + "version": "6.3.0", "description": "NHS digital service manual", "main": "app.js", "directories": {