Skip to content

Commit

Permalink
Move #top anchor to before the skip link
Browse files Browse the repository at this point in the history
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]: #1561 (comment)

Closes #1561
  • Loading branch information
36degrees committed May 10, 2022
1 parent 3cf3f69 commit a9db159
Showing 1 changed file with 2 additions and 1 deletion.
3 changes: 2 additions & 1 deletion views/layouts/_generic.njk
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
{% endblock %}

{% block bodyStart %}
<a id="top"></a>
<!--[if gte IE 9]><!-->
{% include "_cookie-banner.njk" %}
<!--<![endif]-->
Expand All @@ -33,7 +34,7 @@
{% block header %}{% endblock %}

{% block main %}
<div class="app-pane {% block appPaneClasses %}{% endblock %}" id="top">
<div class="app-pane {% block appPaneClasses %}{% endblock %}">
{% include "_header.njk" %}
{% include "_navigation.njk" %}
{% include "_banner.njk" %}
Expand Down

0 comments on commit a9db159

Please sign in to comment.