diff --git a/__tests__/accessibility-audit.test.js b/__tests__/accessibility-audit.test.js index f4c1a86c2f..b24b57fed0 100644 --- a/__tests__/accessibility-audit.test.js +++ b/__tests__/accessibility-audit.test.js @@ -42,8 +42,19 @@ async function axe(page) { // Additionally, we are relying on accessibility testing in govuk-frontend to cover these. '.app-example__frame' ) - // TODO + + // TODO: govuk-breadcrumbs sets off the "must be contained in landmarks" rule. Needs investigation. .exclude('.govuk-breadcrumbs') + + // TODO: figure out how and whether to re-enable these rules, or target them better + .disableRules([ + 'region', + 'color-contrast-enhanced', + 'aria-allowed-attr', + 'target-size', + 'aria-allowed-role' + ]) + .withTags([ 'best-practice', @@ -61,7 +72,7 @@ async function axe(page) { ]) // Create report - const report = await reporter.options({}).analyze() + const report = await reporter.analyze() // Add preview URL to report violations report.violations.forEach((violation) => { diff --git a/src/accessibility/index.md b/src/accessibility/index.md index f28f1d2fbd..d5b43c13cf 100644 --- a/src/accessibility/index.md +++ b/src/accessibility/index.md @@ -9,10 +9,10 @@ Our work to make the GOV.UK Design System meet public sector accessibility regul Using the GOV.UK Design System in a service does not immediately make that service accessible. You’ll need additional research, design, development and testing work to make sure your service is accessible, even when using accessible styles, components and patterns. -### Accessibility changes to the Design System to meet WCAG 2.2 +## Accessibility changes to the Design System to meet WCAG 2.2 [Read our guidance on the Web Content Accessibility Guidelines (WCAG) 2.2](/accessibility/wcag-2.2) to make sure teams using the Design System are aware of the changes and can make the necessary adjustments to their services. -### Accessibility strategy +## Accessibility strategy [Read our accessibility strategy](/accessibility/accessibility-strategy/) for more information on our current principles and work needed to improve the accessibility of the GOV.UK Design System. diff --git a/src/accessibility/wcag-2.2/index.md b/src/accessibility/wcag-2.2/index.md index 0535ce0532..dc5d8ba2f2 100644 --- a/src/accessibility/wcag-2.2/index.md +++ b/src/accessibility/wcag-2.2/index.md @@ -15,11 +15,11 @@ In 2023, the Design System team assessed and updated the GOV.UK Design System to We [included code changes in GOV.UK Frontend v5.0.0](https://frontend.design-system.service.gov.uk/changes-to-govuk-frontend-v5/) to make it easier for services to make changes to comply with WCAG 2.2. We also added guidance to make teams aware of the changes and help them make necessary adjustments to their services. -### Make sure your service meets the new WCAG 2.2 criteria +## Make sure your service meets the new WCAG 2.2 criteria WCAG 2.2 was published in October 2023. You’ll need to comply with the new criteria no later than October 2024. See more about [Meeting government accessibility requirements](https://www.gov.uk/service-manual/helping-people-to-use-your-service/understanding-wcag) in the GOV.UK Service Manual. -### What you need to do +## What you need to do 1. Revisit the [Government Digital Service (GDS) guidance](https://www.gov.uk/guidance/accessibility-requirements-for-public-sector-websites-and-apps) on what accessibility is and why your service needs to invest in it 2. Read [What’s new in WCAG 2.2](https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/) to understand the new criteria your service will need to comply with @@ -31,7 +31,7 @@ WCAG 2.2 was published in October 2023. You’ll need to comply with the new cri Make sure there's expertise within your organisation by advocating for people to receive training in accessibility. To provide some help with this, the Design System team is [organising community events](/community/) to help service teams share information with each other. -### Components and patterns affected in the Design System +## Components and patterns affected in the Design System We've made changes to these components and patterns to comply with WCAG 2.2 level AA. You must check if your service needs amending to align with these changes. diff --git a/src/community/index.md b/src/community/index.md index c8c28ed393..949eaa3b53 100644 --- a/src/community/index.md +++ b/src/community/index.md @@ -11,7 +11,7 @@ Everyone can help improve the Design System by joining our community discussions We depend on a strong cross-government community to ensure the Design System includes the latest research, design and development to represent and be relevant for its users. Read our [community principles](/community/community-principles/). -### Sign up to our mailing list +## Sign up to our mailing list [Find out when we announce new events, workshops and ask for help from our community](https://mailchi.mp/707ce8dec373/get-updated-by-email-govuk-design-system). diff --git a/src/components/accordion/index.md b/src/components/accordion/index.md index 3d33f78deb..f80421dde4 100644 --- a/src/components/accordion/index.md +++ b/src/components/accordion/index.md @@ -120,7 +120,7 @@ We updated this component in December 2021 to solve an accessibility issue where The team made sure the component is accessible, for example that users can interact with it using just the keyboard. -#### Users that navigate using ‘elements lists’ +### Users that navigate using ‘elements lists’ We need to find out more about users that navigate using ‘elements lists’ of headings, buttons, links and other elements – such as users of speech recognition software and partially-sighted users of screen readers. diff --git a/src/components/back-link/index.md b/src/components/back-link/index.md index 9d133678d8..16a512ad9f 100644 --- a/src/components/back-link/index.md +++ b/src/components/back-link/index.md @@ -20,7 +20,7 @@ Use the back link component to help users go back to the previous page in a mult classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this component +## New WCAG 2.2 criteria affects this component To use the ‘Back link’ and comply with new success criteria introduced in Web Content Accessibility Guidelines (WCAG) 2.2, make sure that users can successfully: diff --git a/src/components/breadcrumbs/index.md b/src/components/breadcrumbs/index.md index f0f5adfa50..6e355dba71 100644 --- a/src/components/breadcrumbs/index.md +++ b/src/components/breadcrumbs/index.md @@ -20,7 +20,7 @@ The breadcrumbs component helps users to understand where they are within a webs classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this component +## New WCAG 2.2 criteria affects this component To use ‘Breadcrumbs' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully: diff --git a/src/components/button/index.md b/src/components/button/index.md index eaa4141f46..86da991679 100644 --- a/src/components/button/index.md +++ b/src/components/button/index.md @@ -18,7 +18,7 @@ layout: layout-pane.njk classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this component +## New WCAG 2.2 criteria affects this component To use the ‘Button' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully: diff --git a/src/components/cookie-banner/index.md b/src/components/cookie-banner/index.md index 172a308ba8..00ce594ab8 100644 --- a/src/components/cookie-banner/index.md +++ b/src/components/cookie-banner/index.md @@ -20,7 +20,7 @@ Allow users to accept or reject cookies which are not essential to making your s classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this component +## New WCAG 2.2 criteria affects this component To use the ‘Cookie banner' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully: diff --git a/src/components/error-message/index.md b/src/components/error-message/index.md index e258df6b6b..38b357507a 100644 --- a/src/components/error-message/index.md +++ b/src/components/error-message/index.md @@ -20,7 +20,7 @@ This guidance is for government teams that build online services. [To find infor classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this component +## New WCAG 2.2 criteria affects this component To use the ‘Error message' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully: diff --git a/src/components/file-upload/index.md b/src/components/file-upload/index.md index ab77300b91..3eb394e06e 100644 --- a/src/components/file-upload/index.md +++ b/src/components/file-upload/index.md @@ -20,7 +20,7 @@ This guidance is for government teams that build online services. [To find infor classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this component +## New WCAG 2.2 criteria affects this component To use the ‘File upload' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully: diff --git a/src/components/footer/index.md b/src/components/footer/index.md index 90c1a2e6d0..ee625702bb 100644 --- a/src/components/footer/index.md +++ b/src/components/footer/index.md @@ -20,7 +20,7 @@ The footer provides copyright, licensing and other information about your servic classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this component +## New WCAG 2.2 criteria affects this component To use the ‘Footer' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully: diff --git a/src/components/header/index.md b/src/components/header/index.md index a144f856d3..55dc672f61 100644 --- a/src/components/header/index.md +++ b/src/components/header/index.md @@ -19,7 +19,7 @@ The GOV.UK header shows users that they are on GOV.UK and which service they are classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this component +## New WCAG 2.2 criteria affects this component To use the ‘Header' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully: diff --git a/src/components/phase-banner/index.md b/src/components/phase-banner/index.md index 307c64929b..62b39c2c10 100644 --- a/src/components/phase-banner/index.md +++ b/src/components/phase-banner/index.md @@ -20,7 +20,7 @@ Use the phase banner component to show users your service is still being worked classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this component +## New WCAG 2.2 criteria affects this component To use the ‘Phase banner' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully: diff --git a/src/components/select/index.md b/src/components/select/index.md index 299bf2f75e..c34fd4d1ba 100644 --- a/src/components/select/index.md +++ b/src/components/select/index.md @@ -18,7 +18,7 @@ layout: layout-pane.njk classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this component +## New WCAG 2.2 criteria affects this component To use the ‘Select' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully: diff --git a/src/components/summary-list/index.md b/src/components/summary-list/index.md index afb6092848..f9e2498014 100644 --- a/src/components/summary-list/index.md +++ b/src/components/summary-list/index.md @@ -20,7 +20,7 @@ Use a summary list to summarise information, for example, a user’s responses a classes: "app-tag" }) }} -### WCAG 2.2 criteria might affect this component +## WCAG 2.2 criteria might affect this component To use ‘Summary list’ and comply with new success criteria introduced in Web Content Accessibility Guidelines (WCAG) 2.2, make sure that users can successfully: diff --git a/src/components/tag/index.md b/src/components/tag/index.md index 06534ef8d4..cdf35ccab0 100644 --- a/src/components/tag/index.md +++ b/src/components/tag/index.md @@ -20,7 +20,7 @@ Use the tag component to show users the status of something. classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this component +## New WCAG 2.2 criteria affects this component To use the ‘Tag' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully: diff --git a/src/design-system-team.md b/src/design-system-team.md index fe825330dc..18df69b30d 100644 --- a/src/design-system-team.md +++ b/src/design-system-team.md @@ -12,14 +12,14 @@ The GOV.UK Design System at the [Government Digital Service](https://www.gov.uk/ If you want to contact the team you can [get in touch via email or Slack](/get-in-touch/). -### Team leads +## Team leads - Chris Ballantine-Thomas – Senior Interaction Designer - Kelly Lee – Senior Delivery Manager - Oliver Byford – Lead Frontend Developer - Trang Erskine – Senior Product Manager -### Design System team +## Design System team - Anika Henke – Senior Accessibility Specialist - Brett Kyle – Senior Frontend Developer diff --git a/src/patterns/addresses/index.md b/src/patterns/addresses/index.md index 2a77e8e5fa..3a1223337d 100644 --- a/src/patterns/addresses/index.md +++ b/src/patterns/addresses/index.md @@ -21,7 +21,7 @@ This guidance is for government teams that build online services. [To find infor classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this pattern +## New WCAG 2.2 criteria affects this pattern To ask users for 'Addresses' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully: diff --git a/src/patterns/bank-details/index.md b/src/patterns/bank-details/index.md index 9d37d8f9f2..4785826c94 100644 --- a/src/patterns/bank-details/index.md +++ b/src/patterns/bank-details/index.md @@ -21,7 +21,7 @@ This guidance is for government teams that build online services. [To find infor classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this pattern +## New WCAG 2.2 criteria affects this pattern To ask users for 'Bank details' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully: diff --git a/src/patterns/check-a-service-is-suitable/index.md b/src/patterns/check-a-service-is-suitable/index.md index 8f16d11b5a..5919d8d9c8 100644 --- a/src/patterns/check-a-service-is-suitable/index.md +++ b/src/patterns/check-a-service-is-suitable/index.md @@ -20,7 +20,7 @@ Ask users questions to help them work out if they can or should use your service classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this pattern +## New WCAG 2.2 criteria affects this pattern To help users to 'Check a service is suitable' and meet the new WCAG 2.2 criteria, make sure that users can successfully: diff --git a/src/patterns/check-answers/index.md b/src/patterns/check-answers/index.md index 2e7423f258..92b4aa9f6d 100644 --- a/src/patterns/check-answers/index.md +++ b/src/patterns/check-answers/index.md @@ -21,7 +21,7 @@ Let users check their answers before submitting information to a service. classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this pattern +## New WCAG 2.2 criteria affects this pattern To help users to 'Check answers' and meet the new WCAG 2.2 criteria, make sure that users can successfully: diff --git a/src/patterns/complete-multiple-tasks/index.md b/src/patterns/complete-multiple-tasks/index.md index 4381e252fc..ebc425da38 100644 --- a/src/patterns/complete-multiple-tasks/index.md +++ b/src/patterns/complete-multiple-tasks/index.md @@ -25,7 +25,7 @@ Help users understand: classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this pattern +## New WCAG 2.2 criteria affects this pattern To help users to 'Complete multiple tasks' and meet the new WCAG 2.2 criteria, make sure that users can successfully: diff --git a/src/patterns/confirm-a-phone-number/index.md b/src/patterns/confirm-a-phone-number/index.md index a74dacddcf..cccecaa185 100644 --- a/src/patterns/confirm-a-phone-number/index.md +++ b/src/patterns/confirm-a-phone-number/index.md @@ -21,7 +21,7 @@ Check that a user has access to a specific mobile phone number using a security classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this pattern +## New WCAG 2.2 criteria affects this pattern To help users to 'Confirm a phone number' and meet the new WCAG 2.2 criteria, make sure that users can successfully: diff --git a/src/patterns/confirm-an-email-address/index.md b/src/patterns/confirm-an-email-address/index.md index df35304e18..523132a2fb 100644 --- a/src/patterns/confirm-an-email-address/index.md +++ b/src/patterns/confirm-an-email-address/index.md @@ -21,7 +21,7 @@ This guidance is for government teams that build online services. [To find infor classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this pattern +## New WCAG 2.2 criteria affects this pattern To help users to 'Confirm an email address' and meet the new WCAG 2.2 criteria, make sure that users can successfully: 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 8a9225ed21..f4839ba698 100644 --- a/src/patterns/contact-a-department-or-service-team/index.md +++ b/src/patterns/contact-a-department-or-service-team/index.md @@ -21,7 +21,7 @@ Give users contact information within your service. classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this pattern +## New WCAG 2.2 criteria affects this pattern To help users to 'Contact a department or service team' and meet the new WCAG 2.2 criteria, make sure that users can successfully: diff --git a/src/patterns/create-accounts/index.md b/src/patterns/create-accounts/index.md index da579690a4..6c0cd539c4 100644 --- a/src/patterns/create-accounts/index.md +++ b/src/patterns/create-accounts/index.md @@ -20,7 +20,7 @@ Help users create an account for your service. classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this pattern +## New WCAG 2.2 criteria affects this pattern To help users to 'Create accounts' and meet the new WCAG 2.2 criteria, make sure that users can successfully: diff --git a/src/patterns/email-addresses/index.md b/src/patterns/email-addresses/index.md index 8d87e3b9bf..c487ec4528 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 classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this pattern +## New WCAG 2.2 criteria affects this pattern To ask users for 'Email addresses' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully: diff --git a/src/patterns/equality-information/index.md b/src/patterns/equality-information/index.md index c2088c929f..4e477b9d76 100644 --- a/src/patterns/equality-information/index.md +++ b/src/patterns/equality-information/index.md @@ -21,7 +21,7 @@ Public sector organisations have a duty to consider the need to avoid discrimina classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this pattern +## New WCAG 2.2 criteria affects this pattern To ask users for 'Equality information' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully: diff --git a/src/patterns/names/index.md b/src/patterns/names/index.md index a1ba9b8b76..edc2fd8e4d 100644 --- a/src/patterns/names/index.md +++ b/src/patterns/names/index.md @@ -19,7 +19,7 @@ layout: layout-pane.njk classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this pattern +## New WCAG 2.2 criteria affects this pattern To ask users for 'Names' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully: diff --git a/src/patterns/national-insurance-numbers/index.md b/src/patterns/national-insurance-numbers/index.md index ec38163a03..24dd3da813 100644 --- a/src/patterns/national-insurance-numbers/index.md +++ b/src/patterns/national-insurance-numbers/index.md @@ -21,7 +21,7 @@ This guidance is for government teams that build online services. [To find infor classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this pattern +## New WCAG 2.2 criteria affects this pattern To ask users for 'National insurance numbers' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully: diff --git a/src/patterns/page-not-found-pages/index.md b/src/patterns/page-not-found-pages/index.md index 6052db8719..5d7e1b0e67 100644 --- a/src/patterns/page-not-found-pages/index.md +++ b/src/patterns/page-not-found-pages/index.md @@ -21,7 +21,7 @@ A page not found tells someone we cannot find the page they were trying to view. classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this pattern +## New WCAG 2.2 criteria affects this pattern To use ‘Page not found pages' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully: diff --git a/src/patterns/passwords/index.md b/src/patterns/passwords/index.md index 52b34eae3c..824ded2638 100644 --- a/src/patterns/passwords/index.md +++ b/src/patterns/passwords/index.md @@ -20,7 +20,7 @@ Help users to create and enter secure and memorable passwords. classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this pattern +## New WCAG 2.2 criteria affects this pattern To ask users for 'Passwords' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully: diff --git a/src/patterns/payment-card-details/index.md b/src/patterns/payment-card-details/index.md index 8b3c4eec4d..cc506bca14 100644 --- a/src/patterns/payment-card-details/index.md +++ b/src/patterns/payment-card-details/index.md @@ -20,7 +20,7 @@ This guidance is for government teams that build online services. [To find infor classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this pattern +## New WCAG 2.2 criteria affects this pattern To ask users for 'Payment card details' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully: diff --git a/src/patterns/problem-with-the-service-pages/index.md b/src/patterns/problem-with-the-service-pages/index.md index 164d49b24b..b0d10573b6 100644 --- a/src/patterns/problem-with-the-service-pages/index.md +++ b/src/patterns/problem-with-the-service-pages/index.md @@ -21,7 +21,7 @@ This guidance is for government teams that build online services. [To find infor classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this pattern +## New WCAG 2.2 criteria affects this pattern To use ‘There is a problem with the service pages' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully: diff --git a/src/patterns/question-pages/index.md b/src/patterns/question-pages/index.md index 9e24937b3a..615d016a70 100644 --- a/src/patterns/question-pages/index.md +++ b/src/patterns/question-pages/index.md @@ -21,7 +21,7 @@ This pattern explains when to use question pages and what elements they need to classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this pattern +## New WCAG 2.2 criteria affects this pattern To use ‘Question pages' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully: diff --git a/src/patterns/service-unavailable-pages/index.md b/src/patterns/service-unavailable-pages/index.md index 7c71b5ca79..31acb0d20a 100644 --- a/src/patterns/service-unavailable-pages/index.md +++ b/src/patterns/service-unavailable-pages/index.md @@ -21,7 +21,7 @@ This guidance is for government teams that build online services. [To find infor classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this pattern +## New WCAG 2.2 criteria affects this pattern To use ‘Service unavailable pages' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully: diff --git a/src/patterns/validation/index.md b/src/patterns/validation/index.md index 5888526eac..e58172ee44 100644 --- a/src/patterns/validation/index.md +++ b/src/patterns/validation/index.md @@ -19,7 +19,7 @@ Check the information the user gives you to make sure it’s valid. If there's a classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects this pattern +## New WCAG 2.2 criteria affects this pattern To help users to 'Recover from validation errors' and meet the new WCAG 2.2 criteria, make sure that users can successfully: diff --git a/src/styles/images/index.md b/src/styles/images/index.md index ddda444861..d666ca17a4 100644 --- a/src/styles/images/index.md +++ b/src/styles/images/index.md @@ -22,7 +22,7 @@ Avoid using images for unnecessary decoration. Only use images if there’s a re classes: "app-tag" }) }} -### New WCAG 2.2 criteria affects how you use images +## New WCAG 2.2 criteria affects how you use images To meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, [make sure any icons and images used in links meet the minimum target size](/styles/images/#wcag-icon-focus). This is to make sure users can easily interact with the link. {% endset %}