diff --git a/contribute.md b/contribute.md index 43967e2d..352bf9f8 100644 --- a/contribute.md +++ b/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) diff --git a/src/components/accordion/_guidance.hbs b/src/components/accordion/_guidance.hbs index a754d1fa..de4f9348 100644 --- a/src/components/accordion/_guidance.hbs +++ b/src/components/accordion/_guidance.hbs @@ -45,4 +45,4 @@ layout: blank-layout.hbs

Consider tabs if the user would likely need to flick between content sections.

Accessibility

-

All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

+

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.

diff --git a/src/components/back-to-top/_guidance.hbs b/src/components/back-to-top/_guidance.hbs index 1f918b76..6eef5b01 100644 --- a/src/components/back-to-top/_guidance.hbs +++ b/src/components/back-to-top/_guidance.hbs @@ -47,4 +47,4 @@ layout: blank-layout.hbs {{/_docs-code}}

Accessibility

-

All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

\ No newline at end of file +

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.

\ No newline at end of file diff --git a/src/components/breadcrumbs/_guidance.hbs b/src/components/breadcrumbs/_guidance.hbs index 506d0b26..96d10466 100644 --- a/src/components/breadcrumbs/_guidance.hbs +++ b/src/components/breadcrumbs/_guidance.hbs @@ -24,4 +24,4 @@ layout: blank-layout.hbs

For mobile resolutions (under 768px), the breadcrumb shows a link to the immediate parent and current page only.

Accessibility

-

All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

\ No newline at end of file +

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.

\ No newline at end of file diff --git a/src/components/button/_guidance.hbs b/src/components/button/_guidance.hbs index 09ed6489..2428c7ad 100644 --- a/src/components/button/_guidance.hbs +++ b/src/components/button/_guidance.hbs @@ -33,4 +33,7 @@ layout: blank-layout.hbs
  • Consider the GOV.UK guidance on how to stop users from accidentally sending information more than once
  • Overusing buttons and button-style links makes them less noticable
  • A comprehensive review of buttons vs. links is available from Indiana University - Buttons & Links - the Basics
    • - \ No newline at end of file + + +

    Accessibility

    +

    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.

    \ No newline at end of file diff --git a/src/components/callout/_guidance.hbs b/src/components/callout/_guidance.hbs index dbc6d110..a4e789b0 100644 --- a/src/components/callout/_guidance.hbs +++ b/src/components/callout/_guidance.hbs @@ -25,4 +25,4 @@ layout: blank-layout.hbs

    Callouts can contain an icon, a title and a message. Callouts should be short, easy to scan, informative and clear.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    \ No newline at end of file +

    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.

    \ No newline at end of file diff --git a/src/components/card-carousel/_guidance.hbs b/src/components/card-carousel/_guidance.hbs index 855512e5..3be28ab2 100644 --- a/src/components/card-carousel/_guidance.hbs +++ b/src/components/card-carousel/_guidance.hbs @@ -59,7 +59,7 @@ layout: blank-layout.hbs

    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 data-justify-content="on" to the .nsw-carousel item. By default items will be aligned to the left.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    The card carousel conforms to the W3C Carousel Design Pattern and includes a Live Region that allows screen readers to read content whenever carousel slides change.

    diff --git a/src/components/card/_guidance.hbs b/src/components/card/_guidance.hbs index e6061270..79c55bdd 100644 --- a/src/components/card/_guidance.hbs +++ b/src/components/card/_guidance.hbs @@ -69,4 +69,4 @@ layout: blank-layout.hbs

    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.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    \ No newline at end of file +

    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.

    \ No newline at end of file diff --git a/src/components/close-button/index.hbs b/src/components/close-button/index.hbs index e8d286b5..13fcf254 100644 --- a/src/components/close-button/index.hbs +++ b/src/components/close-button/index.hbs @@ -30,7 +30,7 @@ meta-index: true {{/_docs-example}}

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    Do:

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    diff --git a/src/components/date-input/_guidance.hbs b/src/components/date-input/_guidance.hbs index 632ebd1c..9cd2285d 100644 --- a/src/components/date-input/_guidance.hbs +++ b/src/components/date-input/_guidance.hbs @@ -44,4 +44,11 @@ layout: blank-layout.hbs

    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.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    + +

    Ensuring compliance through usage

    + +

    Redundant entry

    + +

    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.

    +

    Adhering to these practices ensures a smoother, more accessible experience that meets compliance standards.

    \ No newline at end of file diff --git a/src/components/date-picker/_guidance.hbs b/src/components/date-picker/_guidance.hbs index d13cfc33..da4a97af 100644 --- a/src/components/date-picker/_guidance.hbs +++ b/src/components/date-picker/_guidance.hbs @@ -106,10 +106,17 @@ layout: blank-layout.hbs {{/_docs-code}}

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    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.

    +

    Ensuring compliance through usage

    + +

    Redundant entry

    + +

    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.

    +

    Following these usage practices supports an inclusive experience that meets accessibility standards.

    +

    Keyboard support

    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.

    diff --git a/src/components/dialog/_guidance.hbs b/src/components/dialog/_guidance.hbs index 3f8dd260..26c01d15 100644 --- a/src/components/dialog/_guidance.hbs +++ b/src/components/dialog/_guidance.hbs @@ -41,4 +41,11 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    + +

    Ensuring compliance through usage

    + +

    Consistent help

    +

    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.

    +

    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.

    +

    This approach will create a cohesive, accessible experience that feels effortless to navigate.

    diff --git a/src/components/file-upload/_guidance.hbs b/src/components/file-upload/_guidance.hbs index d473fa6a..63feff84 100644 --- a/src/components/file-upload/_guidance.hbs +++ b/src/components/file-upload/_guidance.hbs @@ -71,4 +71,16 @@ layout: blank-layout.hbs

    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 GOV.UK Design System's error messages for file uploads for some best practice examples.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    + +

    Ensuring compliance through usage

    + +

    Redundant entry

    + +

    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.

    + +

    Consistent help

    + +

    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.

    + +

    Adhering to these practices in usage supports a smooth, accessible experience and meets the necessary compliance standards.

    \ No newline at end of file diff --git a/src/components/filters/_guidance.hbs b/src/components/filters/_guidance.hbs index a78e6784..3a940f9f 100644 --- a/src/components/filters/_guidance.hbs +++ b/src/components/filters/_guidance.hbs @@ -72,14 +72,29 @@ layout: blank-layout.hbs

    For batch updates:

    For instant updates:

    \ No newline at end of file +
  • For filters that open down, when a filter is selected the icon changes to filled version and displays number of filters selected in brackets
    • + + +

    Accessibility

    +

    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.

    + +

    Ensuring compliance through usage

    + +

    Redundant entry

    + +

    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.

    + +

    Consistent help

    + +

    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.

    + +

    Following these practices will help create accessible, user-friendly forms that offer a seamless experience across various input types.

    \ No newline at end of file diff --git a/src/components/footer/_guidance.hbs b/src/components/footer/_guidance.hbs index 9cf3fc42..e9b61520 100644 --- a/src/components/footer/_guidance.hbs +++ b/src/components/footer/_guidance.hbs @@ -30,5 +30,5 @@ layout: blank-layout.hbs

    The copyright statement is required as it is applies to all pages of the site.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    \ No newline at end of file diff --git a/src/components/form/_guidance.hbs b/src/components/form/_guidance.hbs index 03ea59cc..ca0206e1 100644 --- a/src/components/form/_guidance.hbs +++ b/src/components/form/_guidance.hbs @@ -49,4 +49,16 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    \ No newline at end of file +

    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.

    + +

    Ensuring compliance through usage

    + +

    Redundant entry

    + +

    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.

    + +

    Consistent help

    + +

    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.

    + +

    Following these practices will help create accessible, user-friendly forms that offer a seamless experience across various input types.

    \ No newline at end of file diff --git a/src/components/global-alert/_guidance.hbs b/src/components/global-alert/_guidance.hbs index 101205fc..8b41a0d9 100644 --- a/src/components/global-alert/_guidance.hbs +++ b/src/components/global-alert/_guidance.hbs @@ -30,4 +30,4 @@ layout: blank-layout.hbs

    Do not display in response to an action initiated by a user interaction or system event.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    diff --git a/src/components/header/_guidance.hbs b/src/components/header/_guidance.hbs index 88e98f9e..b3558d37 100644 --- a/src/components/header/_guidance.hbs +++ b/src/components/header/_guidance.hbs @@ -38,4 +38,11 @@ layout: blank-layout.hbs

    The search displays on the right hand side and can be omitted if not required.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    + +

    Ensuring compliance through usage

    + +

    Redundant entry

    + +

    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.

    +

    Following these practices ensures a smooth, accessible experience that meets compliance standards.

    \ No newline at end of file diff --git a/src/components/hero-banner/_guidance.hbs b/src/components/hero-banner/_guidance.hbs index 31d12a03..ce8a040c 100644 --- a/src/components/hero-banner/_guidance.hbs +++ b/src/components/hero-banner/_guidance.hbs @@ -30,4 +30,4 @@ layout: blank-layout.hbs

    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.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    diff --git a/src/components/hero-search/_guidance.hbs b/src/components/hero-search/_guidance.hbs index 46996d68..d1e51184 100644 --- a/src/components/hero-search/_guidance.hbs +++ b/src/components/hero-search/_guidance.hbs @@ -29,4 +29,13 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    + +

    Ensuring compliance through usage

    + +

    Redundant entry

    + +

    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.

    +

    Adhering to these practices provides a seamless, accessible experience that aligns with WCAG standards.

    + + diff --git a/src/components/in-page-alert/_guidance.hbs b/src/components/in-page-alert/_guidance.hbs index 7c01625f..ed10ef6b 100644 --- a/src/components/in-page-alert/_guidance.hbs +++ b/src/components/in-page-alert/_guidance.hbs @@ -57,4 +57,10 @@ layout: blank-layout.hbs

    The alerts are not dismissible.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    + +

    Ensuring compliance through usage

    + +

    Consistent help

    +

    For in-page alerts in the design system, ensuring WCAG 2.2 AA compliance requires careful attention to consistency and accessibility. Alerts should be configured to deliver clear, actionable guidance without disrupting user flow. This means applying consistent language, formatting, and placement to make alerts easily recognisable across the interface. Ensure each alert is accessible, with clear labels and instructions that screen readers can interpret effectively. Additionally, users should be able to reference alert content without needing to re-trigger it.

    +

    Following these guidelines helps to create a cohesive, accessible experience, aligning with best practices for usability and accessibility in your design system.

    \ No newline at end of file diff --git a/src/components/in-page-nav/_guidance.hbs b/src/components/in-page-nav/_guidance.hbs index 2981ebb8..860f255e 100644 --- a/src/components/in-page-nav/_guidance.hbs +++ b/src/components/in-page-nav/_guidance.hbs @@ -14,4 +14,4 @@ layout: blank-layout.hbs

    The lefthand highlight bar visually separates the component from the page content and groups the navigation.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    diff --git a/src/components/link-list/_guidance.hbs b/src/components/link-list/_guidance.hbs index 55458722..3a4e0f28 100644 --- a/src/components/link-list/_guidance.hbs +++ b/src/components/link-list/_guidance.hbs @@ -19,6 +19,5 @@ layout: blank-layout.hbs
  • to link to content on the same page, consider in-page navigation
    • -

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    diff --git a/src/components/link/_guidance.hbs b/src/components/link/_guidance.hbs index 0da67c5d..74ca43e0 100644 --- a/src/components/link/_guidance.hbs +++ b/src/components/link/_guidance.hbs @@ -51,6 +51,5 @@ layout: blank-layout.hbs
  • use end punctuation. If your link is at the very end of a sentence, make sure that the full stop is not part of the linked text
    • -

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    diff --git a/src/components/list-item/_guidance.hbs b/src/components/list-item/_guidance.hbs index 56aa8115..75ad1096 100644 --- a/src/components/list-item/_guidance.hbs +++ b/src/components/list-item/_guidance.hbs @@ -30,3 +30,6 @@ layout: blank-layout.hbs
  • tips to improve or widen the results
  • contact information or other ways to navigate the site
    • + +

    Accessibility

    +

    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.

    diff --git a/src/components/loader/_guidance.hbs b/src/components/loader/_guidance.hbs index 57cd87ad..d5bbfa69 100644 --- a/src/components/loader/_guidance.hbs +++ b/src/components/loader/_guidance.hbs @@ -28,4 +28,4 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    \ No newline at end of file +

    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.

    diff --git a/src/components/main-nav/_guidance.hbs b/src/components/main-nav/_guidance.hbs index 9cfa6bf7..b5d019da 100644 --- a/src/components/main-nav/_guidance.hbs +++ b/src/components/main-nav/_guidance.hbs @@ -14,4 +14,4 @@ layout: blank-layout.hbs

    On smaller devices, the main navigation displays as a hamburger menu, where all levels are available.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    diff --git a/src/components/masthead/_guidance.hbs b/src/components/masthead/_guidance.hbs index 44eb00da..d3156830 100644 --- a/src/components/masthead/_guidance.hbs +++ b/src/components/masthead/_guidance.hbs @@ -23,4 +23,4 @@ layout: blank-layout.hbs

    The component becomes visible when in focus. To display it, press the Tab key (or swipe right if you've enabled the accessibility features of your phone).

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    diff --git a/src/components/media/_guidance.hbs b/src/components/media/_guidance.hbs index 2ecdca6b..f279c5f0 100644 --- a/src/components/media/_guidance.hbs +++ b/src/components/media/_guidance.hbs @@ -14,3 +14,6 @@ layout: blank-layout.hbs

    Captions

    Captions by default contain a coloured background to visually connect the text to the image or video. If your caption text would be better placed without a background, this option is also available.

    Read more about using captions.

    + +

    Accessibility

    +

    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.

    diff --git a/src/components/pagination/_guidance.hbs b/src/components/pagination/_guidance.hbs index 8d792739..310016d5 100644 --- a/src/components/pagination/_guidance.hbs +++ b/src/components/pagination/_guidance.hbs @@ -17,4 +17,4 @@ layout: blank-layout.hbs

    Pagination links are customizable for different circumstances. Use .disabled for links that appear un-clickable and .active to indicate the current page.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    \ No newline at end of file +

    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.

    diff --git a/src/components/popover/_guidance.hbs b/src/components/popover/_guidance.hbs index f8d16cc1..4d5b7b2f 100644 --- a/src/components/popover/_guidance.hbs +++ b/src/components/popover/_guidance.hbs @@ -23,7 +23,7 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    Popover keyboard interaction and focus

    diff --git a/src/components/progress-indicator/_guidance.hbs b/src/components/progress-indicator/_guidance.hbs index fced8adf..bc7b5486 100644 --- a/src/components/progress-indicator/_guidance.hbs +++ b/src/components/progress-indicator/_guidance.hbs @@ -23,4 +23,4 @@ layout: blank-layout.hbs

    As a user progresses through the steps of a process, the Step position is updated and the progress bar highlights the correlating sections to reflect the steps completed. The Step _ of _ text can be use on it own (without the progress bar) when this alone communicates enough information to the user.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    diff --git a/src/components/results-bar/_guidance.hbs b/src/components/results-bar/_guidance.hbs index 4efb74e6..f1e8964e 100644 --- a/src/components/results-bar/_guidance.hbs +++ b/src/components/results-bar/_guidance.hbs @@ -20,3 +20,6 @@ layout: blank-layout.hbs
  • tips to improve or widen the results
  • contact information or other ways to navigate the site
    • + +

    Accessibility

    +

    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.

    diff --git a/src/components/select/_guidance.hbs b/src/components/select/_guidance.hbs index 80cace14..59240f1d 100644 --- a/src/components/select/_guidance.hbs +++ b/src/components/select/_guidance.hbs @@ -27,4 +27,16 @@ layout: blank-layout.hbs

    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.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    + +

    Ensuring compliance through usage

    + +

    Redundant entry

    + +

    To ensure WCAG 2.2 AA compliance for a select component, it's essential to retain selected options if users revisit the form or make changes to other fields. This reduces redundant actions, allowing users to pick up where they left off. Ensure that users can adjust their selections without affecting other fields, supporting smooth navigation and a streamlined form experience.

    + +

    Consistent help

    + +

    For a seamless, accessible experience with the select component, focus on clear labelling and purpose-driven design, especially when combined with other inputs. Arrange options logically and in alignment with user needs to reduce cognitive load. If users are likely to revisit or adjust selections, aim to maintain their choices to prevent unnecessary re-selection. A consistently configured select component improves user interaction, supporting both accessibility and usability throughout the interface.

    + +

    Following these practices supports a more inclusive, accessible experience in forms and flows, meeting compliance requirements effectively.

    \ No newline at end of file diff --git a/src/components/side-nav/_guidance.hbs b/src/components/side-nav/_guidance.hbs index 052c1538..b76ee61f 100644 --- a/src/components/side-nav/_guidance.hbs +++ b/src/components/side-nav/_guidance.hbs @@ -15,4 +15,4 @@ layout: blank-layout.hbs

    On mobile and smaller viewports, the side navigation is displayed through the main site navigation, otherwise called the hamburger menu.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    diff --git a/src/components/status-labels/_guidance.hbs b/src/components/status-labels/_guidance.hbs index 827da7b4..72ccaa2e 100644 --- a/src/components/status-labels/_guidance.hbs +++ b/src/components/status-labels/_guidance.hbs @@ -31,4 +31,4 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    \ No newline at end of file +

    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.

    diff --git a/src/components/steps/_guidance.hbs b/src/components/steps/_guidance.hbs index 493d55e1..c2aea192 100644 --- a/src/components/steps/_guidance.hbs +++ b/src/components/steps/_guidance.hbs @@ -19,4 +19,4 @@ layout: blank-layout.hbs

    Do not use when content doesn't come together in sequential or linear order, consider bullets points instead.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    \ No newline at end of file +

    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.

    diff --git a/src/components/support-list/_guidance.hbs b/src/components/support-list/_guidance.hbs index b25e7757..fa97a41a 100644 --- a/src/components/support-list/_guidance.hbs +++ b/src/components/support-list/_guidance.hbs @@ -63,4 +63,4 @@ layout: blank-layout.hbs

    The support logos should be 76px in height on large screens (≥ 992px), and 48px in height on small screens (< 991px).

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    \ No newline at end of file +

    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.

    diff --git a/src/components/table/_guidance.hbs b/src/components/table/_guidance.hbs index 755fa401..4eaee37f 100644 --- a/src/components/table/_guidance.hbs +++ b/src/components/table/_guidance.hbs @@ -34,5 +34,5 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    \ No newline at end of file diff --git a/src/components/tabs/_guidance.hbs b/src/components/tabs/_guidance.hbs index 65fbd224..b841d0d6 100644 --- a/src/components/tabs/_guidance.hbs +++ b/src/components/tabs/_guidance.hbs @@ -27,4 +27,4 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    \ No newline at end of file +

    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.

    diff --git a/src/components/tag/_guidance.hbs b/src/components/tag/_guidance.hbs index 28c1d9e8..7c2148de 100644 --- a/src/components/tag/_guidance.hbs +++ b/src/components/tag/_guidance.hbs @@ -21,4 +21,4 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    diff --git a/src/components/tooltip/_guidance.hbs b/src/components/tooltip/_guidance.hbs index 6b2ed8a1..f53cbe6a 100644 --- a/src/components/tooltip/_guidance.hbs +++ b/src/components/tooltip/_guidance.hbs @@ -44,7 +44,7 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    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.

    Tooltip keyboard interaction and focus