From a373695e6a83d5bd789450d62c0e303c4d871fe9 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 28 Apr 2022 13:54:49 +0100 Subject: [PATCH] Move #top anchor to before the skip link MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The ‘back to top’ link takes users to the #top anchor point, which is currently before the navigation but after the ‘skip to main content’ link. This means you can no longer skip past the navs etc (as per WCAG 2.1 2.4.1 Bypass Blocks [1]) unless you know to press shift + tab to go backwards in the tab order. Insetead, we want the 'back to top' link to take the user to the very top of the page, so that the next tab will take them to ‘Skip to main content’ (or the cookie banner, if it’s not been dismissed). We also considered taking the user to the start of `#main` [2], bypassing all of the navigation, but opted instead to move the `#top` anchor to be the very first thing because: 1. The back to top link was introduced in #687, when we moved from the side navigation and the main content being fixed, independently scrollable panes. This change meant that the side navigation no longer remained within the viewport. It seems that the intent at the time was that the back to top link would bring the side navigation back into view, rather than providing a convenient way for the user to get back to the top of the main content. 2. Linking to #main makes it harder for users who have to get back to the navigation: > If you're using a screen reader you could jump between landmarks using hot keys, but if you're just using a keyboard you're kinda just left with the tab key. Maybe I'm missing something, but the only options I could see to get back to the nav would be: > > - use TAB to go all the way through the content and footer content until you eventually get back to the top of the page > - use back to top to get to the top of the main, and then use SHIFT+TAB to reverse through the nav menu > - refresh the page and use TAB 3. We think users would expect to see the header when using the ‘Back to top’ link, especially if they were aiming for the navigation. [1]: https://www.w3.org/TR/WCAG21/#bypass-blocks [2]: https://github.com/alphagov/govuk-design-system/issues/1561#issuecomment-964273009 Closes #1561 --- __tests__/accessiblity_audit.test.js | 1 + views/layouts/_generic.njk | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/__tests__/accessiblity_audit.test.js b/__tests__/accessiblity_audit.test.js index b44a63344d..0c74d55871 100644 --- a/__tests__/accessiblity_audit.test.js +++ b/__tests__/accessiblity_audit.test.js @@ -14,6 +14,7 @@ async function audit (page) { .include('body') .exclude('#app-site-search__input') // axe reports there is "no label associated with the text field", when there is one. .exclude('.app-phase-banner') // axe reports that the phase banner is not inside a landmark, which is intentional. + .exclude('.app-back-to-top__link') // axe gets confused by our use of #top without top being defined in the doc const results = await axe.analyze() diff --git a/views/layouts/_generic.njk b/views/layouts/_generic.njk index 06a8f6729b..6556f4a094 100644 --- a/views/layouts/_generic.njk +++ b/views/layouts/_generic.njk @@ -24,6 +24,7 @@ {% endblock %} {% block bodyStart %} + {% include "_cookie-banner.njk" %} @@ -33,7 +34,7 @@ {% block header %}{% endblock %} {% block main %} -
+
{% include "_header.njk" %} {% include "_navigation.njk" %} {% include "_banner.njk" %}