Move #top anchor to before the skip link #2161
Conversation
✅ You can preview this change here:
To edit notification comments on pull requests, go to your Netlify site settings. |
36degrees
force-pushed
the
move-top-anchor
branch
from
0a798ae
to
e360138
Compare
There was a problem hiding this comment.
Hi @36degrees, Im not sure why, but I'm now seeing that with this latest commit the focus doesn't actually move to the item with id="top".
Once you press enter on or click the 'back to top' button, if you tab, it starts into the footer, rather than going to the first tab area on the page (the cookies banner button if you haven't dismissed it)
36degrees
force-pushed
the
move-top-anchor
branch
from
e360138
to
a373695
Compare
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
36degrees
force-pushed
the
move-top-anchor
branch
from
a373695
to
a9db159
Compare
We were using I've updated the PR to instead add an explicit anchor with an ID of |
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) unless you know to press shift + tab to go backwards in the tab order.
Instead, 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, bypassing all of the navigation, but opted instead to move the #top anchor to be the very first thing because:The back to top link was introduced in Remove fixed layout, introduce back to top component #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.
Linking to
#mainmakes it harder for users who have to get back to the navigation:We think users would expect to see the header when using the ‘Back to top’ link, especially if they were aiming for the navigation.
Closes #1561