Apply changes from review with accessibility expert

Co-Authored-By: David Cox <98318778+dav-idc@users.noreply.github.com>
Co-Authored-By: Anika Henke <108893+selfthinker@users.noreply.github.com>

src/accessibility-statement.md

@@ -12,12 +12,12 @@ This accessibility statement applies to both websites and the components and pat
 
 The team wants to make sure as many people as possible can use their websites. For example, making sure the website text is as clear as possible to understand and making sure you can:
 
--   change colours, contrast levels and fonts
--   zoom in up to 400% without the text spilling off the screen
--   listen to most of the website using a screen reader (including the most recent versions of JAWS, NVDA, TalkBack and VoiceOver)
--   navigate most of the website using just a keyboard
--   navigate most of the website using just a mouse and on-screen keyboard
--   navigate most of the website using speech recognition software
+- change colours, contrast levels and fonts
+- zoom in up to 400% without the text spilling off the screen
+- listen to most of the website using a screen reader (including the most recent versions of JAWS, NVDA, TalkBack and VoiceOver)
+- navigate most of the website using just a keyboard
+- navigate most of the website using just a mouse and on-screen keyboard
+- navigate most of the website using speech recognition software
 
 AbilityNet has [advice on making your device easier to use](https://mcmw.abilitynet.org.uk/), if you have a disability.
 
@@ -27,20 +27,20 @@ The Design System website at [design-system.service.gov.uk](https://design-syste
 
 The GOV.UK Frontend documentation website at [frontend.design-system.service.gov.uk](https://frontend.design-system.service.gov.uk/) is fully compliant with the Web Content Accessibility Guidelines (WCAG) version 2.1 AA standard.
 
-The GOV.UK Frontend codebase at [github.com/alphagov/govuk-frontend](https://github.com/alphagov/govuk-frontend) is fully compliant with the Web Content Accessibility Guidelines (WCAG) versions 2.1 AA and 2.2 AA standards.
+The GOV.UK Frontend codebase at [github.com/alphagov/govuk-frontend](https://github.com/alphagov/govuk-frontend) is fully compliant with the Web Content Accessibility Guidelines (WCAG) version 2.2 AA standard.
 
 ## Non-accessible content
 
 In this section, the team lists non-accessible content that has been reported, verified and tracked in the following repositories:
 
--   [GOV.UK Design System GitHub repository](https://github.com/alphagov/govuk-design-system)    
--   [GOV.UK Frontend Documentation Github repository](https://github.com/alphagov/govuk-frontend-docs)
--   [GOV.UK Frontend GitHub repository](https://github.com/alphagov/govuk-frontend)
+- [GOV.UK Design System GitHub repository](https://github.com/alphagov/govuk-design-system)
+- [GOV.UK Frontend Documentation Github repository](https://github.com/alphagov/govuk-frontend-docs)
+- [GOV.UK Frontend GitHub repository](https://github.com/alphagov/govuk-frontend)
 
 The team document WCAG 2.1 A and AA failures in two repositories under the ‘accessibility-regulations-failure’ issue label:
 
--   [GOV.UK Design System website label for accessibility regulations failures](https://github.com/alphagov/govuk-design-system/labels/accessibility-regulations-failure)    
--   [GOV.UK Frontend codebase label for accessibility regulations failures](https://github.com/alphagov/govuk-frontend/labels/accessibility-regulations-failure)
+- [GOV.UK Design System website label for accessibility regulations failures](https://github.com/alphagov/govuk-design-system/labels/accessibility-regulations-failure)
+- [GOV.UK Frontend codebase label for accessibility regulations failures](https://github.com/alphagov/govuk-frontend/labels/accessibility-regulations-failure)
 
 ### Non-compliance with the accessibility regulations
 
@@ -60,25 +60,23 @@ The team does not have any content within these products outside the scope of th
 
 In addition to non-compliant content, the team also track additional concerns about accessibility which:
 
--   show strong evidence of being accessibility barriers    
--   do not constitute a failure in one or more WCAG 2.1 Level AA criteria
--   are not classified as non-compliance with the accessibility regulations
--   are determined as worth featuring in this accessibility statement
+- show strong evidence of being accessibility barriers
+- do not constitute a failure in one or more WCAG 2.1 Level AA criteria
+- are not classified as non-compliance with the accessibility regulations
+- are determined as worth featuring in this accessibility statement
 
 The team documents these additional concerns in two repositories under the ‘accessibility-concern’ issue label:
 
--   [GOV.UK Design System website label for accessibility concerns](https://github.com/alphagov/govuk-design-system/labels/accessibility-concern)    
--   [GOV.UK Frontend codebase label for accessibility concerns](https://github.com/alphagov/govuk-frontend/labels/accessibility-concern)
+- [GOV.UK Design System website label for accessibility concerns](https://github.com/alphagov/govuk-design-system/labels/accessibility-concern)
+- [GOV.UK Frontend codebase label for accessibility concerns](https://github.com/alphagov/govuk-frontend/labels/accessibility-concern)
 
 For the GOV.UK Design System website and the GOV.UK Frontend Documentation website, the team do not currently know of any additional accessibility concerns to add to this statement.
 
 Additional accessibility concerns from the GOV.UK Frontend codebase include:
 
 1.  The accordion component is currently using an `aria-labelledby` ARIA attribute on an unsupported `<div>` element. This is an incorrect implementation of [WAI-ARIA 1.1](https://www.w3.org/TR/wai-aria-1.1/), but is not a failure of WCAG success criterion [4.1.2 Name, Role, Value](https://www.w3.org/TR/WCAG21/#name-role-value). The team does not plan to fix this at present. Track our progress on the [GitHub issue: ‘Accordion - Elements must only use allowed ARIA attributes’](https://github.com/alphagov/govuk-frontend/issues/2472).
-
 2.  The details component does not work well with Dragon and VoiceOver. This is not an issue with our details component, but is a known issue with the assistive tech and the `<details>` HTML element. Track our progress on the [GitHub issue: ‘Details component does not work well with Dragon and VoiceOver’](https://github.com/alphagov/govuk-frontend/issues/3693).
-
-3.  [A bug within Dragon means no action is taken when trying to activate the file upload component](https://github.com/alphagov/reported-bugs/issues/35) through the command ‘click choose file’. This is a usability issue originating from the assistive technology. The team does not plan on fixing this, as the assistive technology will need to resolve it. Track our progress on the [GitHub issue: ‘Upload file component doesn’t respond to ‘click choose file’ due to Dragon / browser bugs’](https://github.com/alphagov/govuk-frontend/issues/3686).    
+3.  [A bug within Dragon means no action is taken when trying to activate the file upload component](https://github.com/alphagov/reported-bugs/issues/35) through the command ‘click choose file’. This is a usability issue originating from the assistive technology. The team does not plan on fixing this, as the assistive technology will need to resolve it. Track our progress on the [GitHub issue: ‘Upload file component doesn’t respond to ‘click choose file’ due to Dragon / browser bugs’](https://github.com/alphagov/govuk-frontend/issues/3686).
 
 ## Preparation of this accessibility statement
 
@@ -88,13 +86,13 @@ The [GOV.UK Design System website](https://design-system.service.gov.uk/) was la
 
 DAC tested a sample of pages to cover the different content types in the GOV.UK Design System website. They were:
 
--   [the homepage](https://design-system.service.gov.uk/)    
--   [a short content page](https://design-system.service.gov.uk/community/design-system-working-group/)
--   [a long content page](https://design-system.service.gov.uk/styles/layout/)
--   [an overview page](https://design-system.service.gov.uk/community/)
--   [a styles page](https://design-system.service.gov.uk/styles/typography/)
--   [a component page](https://design-system.service.gov.uk/components/radios/)
--   [a pattern page](https://design-system.service.gov.uk/patterns/question-pages/)
+- [the homepage](https://design-system.service.gov.uk/)
+- [a short content page](https://design-system.service.gov.uk/community/design-system-working-group/)
+- [a long content page](https://design-system.service.gov.uk/styles/layout/)
+- [an overview page](https://design-system.service.gov.uk/community/)
+- [a styles page](https://design-system.service.gov.uk/styles/typography/)
+- [a component page](https://design-system.service.gov.uk/components/radios/)
+- [a pattern page](https://design-system.service.gov.uk/patterns/question-pages/)
 
 DAC also tested the global search functionality that appears in the header of the GOV.UK Design System website.
 

src/accessibility/WCAG-2.2/index.md

@@ -13,7 +13,7 @@ W3C owns and manages the [Web Content Accessibility Guidelines (WCAG) 2.2](https
 
 In 2023, the Design System team assessed and updated the GOV.UK Design System to comply with the new criteria and recommendations given in WCAG 2.2.
 
-Any guidance we provide is to make sure teams using the Design System are aware of the changes and can make the necessary adjustments to their services.
+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
 
@@ -24,9 +24,10 @@ WCAG 2.2 was published in October 2023. You’ll need to comply with the new cri
 1. Revisit the [Government Digital Service (GDS) guidance](https://www.gov.uk/guidance/accessibility-requirements-for-public-sector-websites-and-apps) on 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
 3. Ask your wider organisation for support to prepare for work needed to meet WCAG 2.2
-4. Review the lists on this page of affected components and patterns in the Design System
-5. Assess your service to see how many affected components and patterns are in use
-6. Plan and implement the changes needed to your service
+4. Update your service to use [GOV.UK Frontend v5.0.0](https://frontend.design-system.service.gov.uk/changes-to-govuk-frontend-v5/) or later, to make it easier to make changes in your service
+5. Review the lists on this page of affected components and patterns in the Design System
+6. Assess your service to see how many affected components and patterns are in use
+7. Plan and implement the changes needed to your service
 
 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.
 
@@ -111,15 +112,7 @@ We've made changes to these components and patterns to comply with WCAG 2.2 leve
         html: '<a href="/components/header/">Header</a>'
       },
       {
-        html: 'Focus not obscured (Minimum)<br>Focus appearance'
-      }
-    ],
-    [
-      {
-        html: '<a href="/components/panel/">Panel</a>'
-      },
-      {
-        html: 'Redundant entry'
+        html: 'Focus not obscured (Minimum)<br>Consistent help'
       }
     ],
     [
@@ -151,7 +144,7 @@ We've made changes to these components and patterns to comply with WCAG 2.2 leve
         html: '<a href="/components/tag/">Tag</a>'
       },
       {
-        html: 'Dragging movements<br>Focus appearance'
+        html: 'Dragging movements'
       }
     ]
   ]
@@ -232,7 +225,7 @@ We've made changes to these components and patterns to comply with WCAG 2.2 leve
         html: '<a href="/patterns/payment-card-details/">Payment card details</a>'
       },
       {
-        html: 'Redundant entry'
+        html: 'Target size (minimum)'
       }
     ]
   ]
@@ -308,14 +301,6 @@ We've made changes to these components and patterns to comply with WCAG 2.2 leve
         html: 'Accessible authentication<br>Redundant entry'
       }
     ],
-    [
-      {
-        html: '<a href="/patterns/start-using-a-service/">Start using a service</a>'
-      },
-      {
-        html: 'Focus appearance'
-      }
-    ],
     [
       {
         html: '<a href="/patterns/validation/">Recover from validation errors</a>'
@@ -341,22 +326,6 @@ We've made changes to these components and patterns to comply with WCAG 2.2 leve
     }
   ],
   rows: [
-    [
-      {
-        html: '<a href="/patterns/confirmation-pages/">Confirmation pages</a>'
-      },
-      {
-        html: 'Dragging movements<br>Focus appearance<br>Redundant entry'
-      }
-    ],
-    [
-      {
-        html: '<a href="/patterns/cookies-page/">Cookies page </a>'
-      },
-      {
-        html: 'Redundant entry'
-      }
-    ],
     [
       {
         html: '<a href="/patterns/page-not-found-pages/">Page not found pages</a>'

src/components/file-upload/index.md

@@ -24,6 +24,7 @@ This guidance is for government teams that build online services. [To find infor
 
 To use the ‘File upload' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully:
 
+- [upload a file without relying on 'drag and drop' movements](/components/file-upload/#wcag-multi-method-drag-drop)
 - [reuse files they've uploaded](/components/file-upload/#wcag-use-previous-uploads)
 
 See the full list of [components and patterns affected by WCAG 2.2](/accessibility/WCAG-2.2/#components-and-patterns-affected-in-the-design-system).

src/components/panel/index.md

@@ -8,34 +8,8 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
-{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
-{% from "govuk/components/tag/macro.njk" import govukTag %}
 
 The panel component is a visible container used on confirmation or results pages to highlight important content.
-
-{% set wcagCallout %}
-
-{{ govukTag({
-  text: "WCAG 2.2",
-  classes: "app-tag"
-}) }}
-
-### New WCAG 2.2 criteria affects this component
-
-To use the ‘Panel' and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully:
-
-- [copy and paste text within a confirmation page as well as its panel](/components/panel/#wcag-allow-copy-paste)
-
-See the full list of [components and patterns affected by WCAG 2.2](/accessibility/WCAG-2.2/#components-and-patterns-affected-in-the-design-system).
-{% endset %}
-
-{{ govukInsetText({
-  html: wcagCallout,
-  attributes: {
-    style: 'border-left-color: #1d70b8;'
-  }
-})}}
-
 {{ example({ group: "components", item: "panel", example: "default", html: true, nunjucks: true, open: false, size: "m", loading: "eager" }) }}
 
 ## When to use this component
@@ -72,7 +46,7 @@ If you need to give detailed information, or more context, use the description t
   <p>Allow users to select and copy text within a <a href="/patterns/confirmation-pages/">confirmation page</a> as well as its panel component. For example, users should be able to select and copy a booking number. This relates to WCAG 2.2 success criterion <a href="https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html">3.3.7 Redundant Entry</a>.</p>
 </div>
 
-Consider offering an option for the user to copy information in the panel component area into their device’s clipboard if there’s information that the user is expected:
+Consider offering an option for the user to copy information in the panel component area into their device’s clipboard if there’s information that the user is expected to:
 
 - save
 - remember

src/components/summary-list/index.md

@@ -79,7 +79,7 @@ There's a few things to keep in mind to ensure that users can successfully use r
     text: "WCAG 2.2",
     classes: "app-tag"
   }) }}
-  <p>Keep card and row actions as ‘<a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content">inline links</a>’. This is to make sure that sets of actions reflow properly on different screen sizes. This relates to WCAG 2.2 success criterion <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">2.5.8 Target Size (minimum)</a>.</p>
+  <p>Make sure any 'action links' are at least 24px by 24px in size, with adequate spacing. This is to make sure users can easily interact with the links. This relates to WCAG 2.2 success criterion <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">2.5.8 Target Size (minimum)</a>.</p>
 </div>
 
 <div class="app-wcag-22" id="wcag-change-answers" role="note">