Update accessibility criteria in component docs

CHANGELOG.md

@@ -7,10 +7,15 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Update accessibility criteria in component docs ([PR #4242](https://github.com/alphagov/govuk_publishing_components/pull/4242))
+
 ## 43.5.0
 
 * Add `ostruct` as an explicit dependency ([PR #4251](https://github.com/alphagov/govuk_publishing_components/pull/4251))
 * Allow visually hiding legend on `radio` component ([PR #4252](https://github.com/alphagov/govuk_publishing_components/pull/4252))
+* Remove breadcrumbs example from inverse_header docs ([PR #4244](https://github.com/alphagov/govuk_publishing_components/pull/4244))
 
 ## 43.4.1
 
@@ -21,7 +26,6 @@
 * Remove left search variant of layout header ([PR #4239](https://github.com/alphagov/govuk_publishing_components/pull/4239))
 * Remove 'inverse' background style from phase banner ([PR #4241](https://github.com/alphagov/govuk_publishing_components/pull/4241))
 * Add experimental `search_with_autocomplete` component ([PR #4218](https://github.com/alphagov/govuk_publishing_components/pull/4218))
-* Remove breadcrumbs example from inverse_header docs ([PR #4244](https://github.com/alphagov/govuk_publishing_components/pull/4244))
 
 ## 43.3.0
 

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 `<main>` element. Placing them here means that the "Skip to main content" link allows the user to skip all navigation links, including breadcrumbs.
 accessibility_excluded_rules:
   - skip-link # This component is creating a reference to #content which is part of the layout
 display_html: true

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 `<main>` 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.
 shared_accessibility_criteria:
   - link
 examples: