WCAG 2.2 AA updates to documentation

contribute.md

@@ -152,7 +152,7 @@ New components must follow the system as closely as possible, particularly the s
 
 ### Tested
 
-**Accessibility.** A component on its own must be accessible to [WCAG 2.1 level AA.](https://www.w3.org/TR/WCAG21/) Some documentation on how this has been checked, tested, or decisions made to support accessibility should be supplied.
+**Accessibility.** A component on its own must be accessible to [WCAG 2.2 level AA.](https://www.w3.org/TR/WCAG21/) Some documentation on how this has been checked, tested, or decisions made to support accessibility should be supplied.
 
 **Browser and device tested.** All components should meet our [browser support requirements.](https://github.com/govau/design-system-components#browser-support)
 

src/components/accordion/_guidance.hbs

@@ -45,4 +45,4 @@ layout: blank-layout.hbs
 <p>Consider tabs if the user would likely need to flick between content sections.</p>
 
 <h2>Accessibility</h2>
-<p>All components are responsive and meet WCAG 2.1 AA accessibility guidelines.</p>
+<p>All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.</p>

src/components/back-to-top/_guidance.hbs

@@ -47,4 +47,4 @@ layout: blank-layout.hbs
 {{/_docs-code}}
 
 <h2>Accessibility</h2>
-<p>All components are responsive and meet WCAG 2.1 AA accessibility guidelines.</p>
+<p>All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.</p>

src/components/breadcrumbs/_guidance.hbs

@@ -24,4 +24,4 @@ layout: blank-layout.hbs
 <p>For mobile resolutions (under 768px), the breadcrumb shows a link to the immediate parent and current page only.</p>
 
 <h2>Accessibility</h2>
-<p>All components are responsive and meet WCAG 2.1 AA accessibility guidelines.</p>
+<p>All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.</p>

src/components/button/_guidance.hbs

@@ -33,4 +33,7 @@ layout: blank-layout.hbs
   <li>Consider the GOV.UK guidance on how to <a target="_blank" href="https://design-system.service.gov.uk/components/button/#stop-users-from-accidentally-sending-information-more-than-once">stop users from accidentally sending information more than once</a></li> 
   <li>Overusing buttons and button-style links makes them less noticable</li> 
   <li>A comprehensive review of buttons vs. links is available from Indiana University - <a target="_blank" href="https://ux.iu.edu/writings/buttons-vs-links-basic/">Buttons &amp; Links - the Basics</a></li> 
-</ul>
+</ul>
+
+<h2>Accessibility</h2>
+<p>All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.</p>

src/components/callout/_guidance.hbs

@@ -25,4 +25,4 @@ layout: blank-layout.hbs
 <p>Callouts can contain an icon, a title and a message. Callouts should be short, easy to scan, informative and clear.</p>
 
 <h2>Accessibility</h2>
-<p>All components are responsive and meet WCAG 2.1 AA accessibility guidelines.</p>
+<p>All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.</p>

src/components/card-carousel/_guidance.hbs

@@ -59,7 +59,7 @@ layout: blank-layout.hbs
 <p>If the carousel items number is smaller than the number of visible items, and you want them to be centered in the viewport, add a <code>data-justify-content="on"</code> to the <code>.nsw-carousel</code> item. By default items will be aligned to the left.</p>
 
 <h2>Accessibility</h2>
-<p>All components are responsive and meet WCAG 2.1 AA accessibility guidelines.</p>
+<p>All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.</p>
 
 <p>The card carousel conforms to the <a href="https://www.w3.org/WAI/ARIA/apg/patterns/carousel">W3C Carousel Design Pattern</a> and includes a <a href="https://www.w3.org/TR/wai-aria-1.2/#dfn-live-region">Live Region</a> that allows screen readers to read content whenever carousel slides change.</p>
 

src/components/card/_guidance.hbs

@@ -69,4 +69,4 @@ layout: blank-layout.hbs
 <p>When a user interacts with a card it inverts colour to indicate to the user which card they are currently focused on and reinforces the clickable area.</p>
 
 <h2>Accessibility</h2>
-<p>All components are responsive and meet WCAG 2.1 AA accessibility guidelines.</p>
+<p>All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.</p>

src/components/close-button/index.hbs

@@ -30,7 +30,7 @@ meta-index: true
 {{/_docs-example}}
 
 <h3>Accessibility</h3>
-<p>All components are responsive and meet WCAG 2.1 AA accessibility guidelines.</p>
+<p>All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.</p>
 
 <p>Do:</p>
 <ul>

src/components/content-block/_guidance.hbs

@@ -53,4 +53,4 @@ layout: blank-layout.hbs
 </ul>
 
 <h2>Accessibility</h2>
-<p>All components are responsive and meet WCAG 2.1 AA accessibility guidelines.</p>
+<p>All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.</p>

src/components/date-input/_guidance.hbs

@@ -44,4 +44,11 @@ layout: blank-layout.hbs
 <p>The year input is set to accept only a four-digit number while the month and day inputs can accept up to a two-digit number.</p>
 
 <h2>Accessibility</h2>
-<p>All components are responsive and meet WCAG 2.1 AA accessibility guidelines.</p>
+<p>All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.</p>
+
+<h3>Ensuring compliance through usage</h3>
+
+<h4>Redundant entry</h4>
+
+<p>To ensure WCAG 2.2 AA compliance for a date input component, proper usage and configuration are essential. Although the component supports accessibility at a basic level, it’s important to minimise redundant entry by retaining any previously entered dates if a user returns to the form. Make sure that the input field is clearly labelled, with guidance on the correct date format, and allow for easy error correction without requiring re-entry of the date.</p>
+<p>Adhering to these practices ensures a smoother, more accessible experience that meets compliance standards.</p>

src/components/date-picker/_guidance.hbs

@@ -106,10 +106,17 @@ layout: blank-layout.hbs
 {{/_docs-code}}
 
 <h2>Accessibility</h2>
-<p>All components are responsive and meet WCAG 2.1 AA accessibility guidelines.</p>
+<p>All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.</p>
 
 <p>The dialog contains a calendar that uses the grid pattern to present buttons that enable the user to choose a day from the calendar. Choosing a date from the calendar closes the dialog and populates the date input field. When the dialog is opened, if the input field is empty, or does not contain a valid date, then the current date is focused in the calendar. Otherwise, the focus is placed on the day in the calendar that matches the value of the date input field.</p>
 
+<h3>Ensuring compliance through usage</h3>
+
+<h4>Redundant entry</h4>
+
+<p>To ensure WCAG 2.2 AA compliance for a date picker, correct usage and configuration are key. While the component offers an accessible foundation, it's important to minimise redundant input by retaining previously selected dates if users return to the form. Ensure that keyboard navigation is fully functional, and provide clear labels and instructions for selecting dates. If errors occur, users should be able to correct them without needing to re-select the date.</p>
+<p>Following these usage practices supports an inclusive experience that meets accessibility standards.</p>
+
 <h3>Keyboard support</h3>
 
 <p>Users can navigate the calendar by using the cursor keys to move around the calendar, and can use the enter key or spacebar to select a date.</p>

src/components/dialog/_guidance.hbs

@@ -41,4 +41,11 @@ layout: blank-layout.hbs
 </ul>
 
 <h2>Accessibility</h2>
-<p>All components are responsive and meet WCAG 2.1 AA accessibility guidelines.</p>
+<p>All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.</p>
+
+<h3>Ensuring compliance through usage</h3>
+
+<h4>Consistent help</h4>
+<p>When using the Dialog component in your project, focus on creating a smooth, accessible experience by implementing it thoughtfully within your design flow. As the Dialog will automatically handle focus management, ensure any actions leading to the Dialog's opening are intuitive and necessary for your users. Use clear and concise text for any buttons or links within the Dialog to guide users seamlessly through the interaction.</p>
+<p>If the Dialog contains forms or complex choices, provide logical steps that align with the user journey, making it easy to understand and complete actions. Ensure the Dialog's purpose and content are directly relevant to the task at hand, allowing users to engage with the Dialog naturally and exit smoothly.</p>
+<p>This approach will create a cohesive, accessible experience that feels effortless to navigate.</p>

src/components/file-upload/_guidance.hbs

@@ -71,4 +71,16 @@ layout: blank-layout.hbs
 <p>Error messages inform the user when there is an issue with the data they have input. Provide helpful error messages to clearly explain to the user what the issue is and how they can effectively address the errors. Check out <a href="https://design-system.service.gov.uk/components/file-upload/#error-messages">GOV.UK Design System's error messages for file uploads</a> for some best practice examples.</p>
 
 <h2>Accessibility</h2>
-<p>All components are responsive and meet WCAG 2.1 AA accessibility guidelines.</p>
+<p>All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.</p>
+
+<h3>Ensuring compliance through usage</h3>
+
+<h4>Redundant entry</h4>
+
+<p>To ensure WCAG 2.2 AA compliance for a file upload input, proper usage and configuration are essential. While the component provides a base level of accessibility, it's crucial to minimise redundant entry by configuring it so that users don't need to re-upload files or re-enter information they've previously provided. This includes allowing error correction without requiring re-entry and ensuring files remain accessible for review in multi-upload scenarios.</p>
+
+<h4>Consistent help</h4>
+
+<p>To create a consistent and accessible experience with the file upload component, provide clear, actionable guidance to support user interactions. Label the file upload field accurately, and include brief instructions on requirements like accepted file types or size limits, so users know exactly how to proceed. Use consistent language and formatting across all file upload interactions, ensuring users can easily recognise and understand the process.</p>
+
+<p>Adhering to these practices in usage supports a smooth, accessible experience and meets the necessary compliance standards.</p>

src/components/filters/_guidance.hbs

@@ -72,14 +72,29 @@ layout: blank-layout.hbs
 <p>For batch updates:</p>
 
 <ul>
-    <li>"Back" bar is sticky to top of screen and on selection closes filtering window with no updates to results.</li>
-    <li>"Apply filters" button is sticky to bottom of screen and on selection closes filtering window and displays updated results.</li>
-    <li>"Apply filters" is disabled if no filters are selected</li>
-    <li>When a filter is selected the icon changes to filled version and displays number of filters selected in brackets.</li>
+  <li>"Back" bar is sticky to top of screen and on selection closes filtering window with no updates to results.</li>
+  <li>"Apply filters" button is sticky to bottom of screen and on selection closes filtering window and displays updated results.</li>
+  <li>"Apply filters" is disabled if no filters are selected</li>
+  <li>When a filter is selected the icon changes to filled version and displays number of filters selected in brackets.</li>
 </ul>
 
 <p>For instant updates:</p>
 
 <ul>
-    <li>For filters that open down, when a filter is selected the icon changes to filled version and displays number of filters selected in brackets</li>
-</ul>
+  <li>For filters that open down, when a filter is selected the icon changes to filled version and displays number of filters selected in brackets</li>
+</ul>
+
+<h2>Accessibility</h2>
+<p>All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.</p>
+
+<h3>Ensuring compliance through usage</h3>
+
+<h4>Redundant entry</h4>
+
+<p>To ensure WCAG 2.2 AA compliance for a full array of filter components, correct usage and configuration are vital. While each component provides a foundation for accessibility, it's essential to minimise redundant entry by retaining previously selected or entered filter values if a user revisits the page or refines their search. Ensure all filter options are clearly labelled and provide instructions where needed, so users understand the available choices and input formats. Additionally, allow users to modify their filter selections easily without resetting other filters.</p>
+
+<h4>Consistent help</h4>
+
+<p>Ensure each input, whether it's a text field, checkbox, radio button, dropdown, or date input, is clearly labelled with descriptive text to communicate its purpose. Consistent error messaging and validation feedback are crucial; provide users with clear, actionable instructions if errors occur, without requiring them to re-enter data unnecessarily. Keyboard navigation should be maintained across all inputs, with each respective field focus indicator allowing users to move easily between fields clearly.</p>
+
+<p>Following these practices will help create accessible, user-friendly forms that offer a seamless experience across various input types.</p>

src/components/footer/_guidance.hbs

@@ -30,5 +30,5 @@ layout: blank-layout.hbs
 <p>The copyright statement is required as it is applies to all pages of the site.</p>
 
 <h2>Accessibility</h2>
-<p>All components are responsive and meet WCAG 2.1 AA accessibility guidelines.</p>
+<p>All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.</p>
 

src/components/form/_guidance.hbs

@@ -49,4 +49,16 @@ layout: blank-layout.hbs
 </ul>
 
 <h2>Accessibility</h2>
-<p>All components are responsive and meet WCAG 2.1 AA accessibility guidelines.</p>
+<p>All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.</p>
+
+<h3>Ensuring compliance through usage</h3>
+
+<h4>Redundant entry</h4>
+
+<p>To ensure WCAG 2.2 AA compliance for a full array of filter components, correct usage and configuration are vital. While each component provides a foundation for accessibility, it's essential to minimise redundant entry by retaining previously selected or entered filter values if a user revisits the page or refines their search. Ensure all filter options are clearly labelled and provide instructions where needed, so users understand the available choices and input formats. Additionally, allow users to modify their filter selections easily without resetting other filters.</p>
+
+<h4>Consistent help</h4>
+
+<p>Ensure each input, whether it's a text field, checkbox, radio button, dropdown, or date input, is clearly labelled with descriptive text to communicate its purpose. Consistent error messaging and validation feedback are crucial; provide users with clear, actionable instructions if errors occur, without requiring them to re-enter data unnecessarily. Keyboard navigation should be maintained across all inputs, with each respective field focus indicator allowing users to move easily between fields clearly.</p>
+
+<p>Following these practices will help create accessible, user-friendly forms that offer a seamless experience across various input types.</p>

src/components/global-alert/_guidance.hbs

@@ -30,4 +30,4 @@ layout: blank-layout.hbs
 <p>Do not display in response to an action initiated by a user interaction or system event.</p>
 
 <h2>Accessibility</h2>
-<p>All components are responsive and meet WCAG 2.1 AA accessibility guidelines.</p>
+<p>All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.</p>

src/components/header/_guidance.hbs

@@ -38,4 +38,11 @@ layout: blank-layout.hbs
 <p>The search displays on the right hand side and can be omitted if not required.</p>
 
 <h2>Accessibility</h2>
-<p>All components are responsive and meet WCAG 2.1 AA accessibility guidelines.</p>
+<p>All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.</p>
+
+<h3>Ensuring compliance through usage</h3>
+
+<h4>Redundant entry</h4>
+
+<p>To ensure WCAG 2.2 AA compliance for a header search component that opens upon clicking an always-visible icon, correct usage and configuration are essential. While the component is designed for accessibility, retaining any previous search entries can help reduce redundant input if a user revisits the search. The search input should have a clear, accessible label (often provided as aria-labels for screen readers) and guidance on how to use the search, such as placeholder text. Ensure the input maintains its easy-to-locate position to navigate back to, allowing users to correct or modify their query without losing previous entries.</p>
+<p>Following these practices ensures a smooth, accessible experience that meets compliance standards.</p>

src/components/hero-banner/_guidance.hbs

@@ -30,4 +30,4 @@ layout: blank-layout.hbs
 <p>Our base component shows example layouts, and are designed to adapt to your content. If these do not meet your user needs (ie. content type or layout), you can use the foundational elements of the design system to build your own in a similar style.</p>
 
 <h2>Accessibility</h2>
-<p>All components are responsive and meet WCAG 2.1 AA accessibility guidelines.</p>
+<p>All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.</p>

src/components/hero-search/_guidance.hbs

@@ -29,4 +29,13 @@ layout: blank-layout.hbs
 </ul>
 
 <h2>Accessibility</h2>
-<p>All components are responsive and meet WCAG 2.1 AA accessibility guidelines.</p>
+<p>All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.</p>
+
+<h3>Ensuring compliance through usage</h3>
+
+<h4>Redundant entry</h4>
+
+<p>To ensure WCAG 2.2 AA compliance for a hero site search input component, proper usage and configuration are key. While the component provides an accessible structure, it's essential to retain previously entered search terms or suggestions if a user returns to the page or refines their search. Ensure the input field maintains a clear label, along with guidance on how to effectively use the search function, such as placeholder text or assistive instructions. Users should be able to modify or correct their search query without needing to start over.</p>
+<p>Adhering to these practices provides a seamless, accessible experience that aligns with WCAG standards.</p>
+
+