From 63d4350581d5612a799cbe62945b0da998875218 Mon Sep 17 00:00:00 2001 From: Martin Jones Date: Thu, 19 Sep 2024 13:53:41 +0100 Subject: [PATCH] Update accessibility criteria in component docs Update the accessibility criteria in in the components docs for the breadcrumbs and step by step navigation header components, stating they should be placed before the `
` element to avoid failing WCAG 2.2 success criterion 2.4.1 Bypass Blocks (Level A) --- .../components/docs/breadcrumbs.yml | 4 +++- .../components/docs/step_by_step_nav_header.yml | 2 ++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/app/views/govuk_publishing_components/components/docs/breadcrumbs.yml b/app/views/govuk_publishing_components/components/docs/breadcrumbs.yml index 4aa88d2204..d587b06b13 100644 --- a/app/views/govuk_publishing_components/components/docs/breadcrumbs.yml +++ b/app/views/govuk_publishing_components/components/docs/breadcrumbs.yml @@ -6,9 +6,11 @@ body: | We recommend that if using the breadcrumbs for navigation purposes, you set `collapse_on_mobile` to `true` to make things more readable for mobile users. However, you can specify `collapse_on_mobile:``false` or remove the flag completely to stop this behaviour. shared_accessibility_criteria: - link -accessibility_criteria: +accessibility_criteria: | The breadcrumb links must have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA (this especially applies when [using the inverse flag](/component-guide/breadcrumbs/inverse)). + + Always place breadcrumbs at the top of a page, before the `
` element. Placing them here means that the "Skip to main content" link allows the user to skip all navigation links, including breadcrumbs. This relates to WCAG 2.2 success criterion [2.4.1 Bypass Blocks (Level A)](https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks). accessibility_excluded_rules: - skip-link # This component is creating a reference to #content which is part of the layout display_html: true diff --git a/app/views/govuk_publishing_components/components/docs/step_by_step_nav_header.yml b/app/views/govuk_publishing_components/components/docs/step_by_step_nav_header.yml index b8dfefc274..c1de3c19d6 100644 --- a/app/views/govuk_publishing_components/components/docs/step_by_step_nav_header.yml +++ b/app/views/govuk_publishing_components/components/docs/step_by_step_nav_header.yml @@ -8,6 +8,8 @@ accessibility_criteria: | An earlier version of the component did not use a heading element – this failed WCAG 2.1 Success Criterion 1.3.1 ("Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.") An early version of the component contained a hidden skip link for keyboard and screen reader users, that jumped to the step by step navigation component in the sidebar (similar to the 'skip to content' link at the top of all GOV.UK pages). User testing suggested that rather than helping users it confused them, so this has been removed. + + Always place the step by step navigation header at the top of a page, before the `
` element. Placing the component here means that the "Skip to main content" link allows the user to skip all navigation links, including the step by step navigation header. This relates to WCAG 2.2 success criterion [2.4.1 Bypass Blocks (Level A)](https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks). shared_accessibility_criteria: - link examples: