Accessible back-to-top or alternative navigation

[joemull]

Description or user story

We plan to make the header non-sticky in #121.

As a result, we may need a back-to-top link to make it easier for people to get to the top of long scrolling pages.

We are not sure about the accessibility ramifications of a back-to-top link implemented as a sticky bottom-right button, so we'd like someone to propose a design idea that is accessible.

[StephDriver]

WCAG Considerations

TLDR

• A sticky skip-to-top link cannot be as accessible as having a link at the bottom of each page section because the sticky would mean the DOM order does not match the visual order of the page, however the visual ordering is a technique, not a requirement, so as far as WCAG is concerned, neither is ruled out. There are potential difficulties at some zoom and viewport sizes, which could mean we need to design it to 'unfix' as well.

• If we have a sticky skip-to-top then we must make sure it does not obscure any focusable content, which in practice as means it must not overlap in position with any page section content or any items within the footer.

Details

Success Criteria

• 1.3.2 Meaningful Sequence
• 1.4.10 Reflow
• 2.4.3 Focus order
• 2.4.11 Focus Not Obscured (Minimum)

Techniques

G59: Placing the interactive elements in an order that follows sequences and relationships within the content

The default tab order for the skip-to-top would have it somewhere in the footer of the page, that would reflect the logical relationship of the skip to top with a page (i.e. coming at the bottom of the page). This would not match the visual order (see below).

C27: Making the DOM order match the visual order

The proposal directly contradicts this technique, as the purpose of a sticky skip-to-top is that it appears visually in the same place on the screen. However a technique is not a success criterion.

C34: Using media queries to un-fixing sticky headers / footers

Sticky elements don't always work well at higher zoom levels - this technique describes unfixing them.

Potential Failures

F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS

This does not apply, as the meaning of the 'skip to top' does not change regardless of its changing position, no does it being inserted into different places within the main content change the meaning of that content.

F110: Failure of Success Criterion 2.4.11 Focus Not Obscured (Minimum) due to a sticky footer or header completely hiding focused elements

A sticky skip-to-top to be positioned at the lower right hand side of the screen is in effect a type of sticky footer. The concern of this failure is that the sticky content obscures other elements, particularly focusable elements. Therefore, the skip-to-top needs to be positioned in such a way that this does not happen.
This could be achieved by:

• upon reaching the bottom of the page, the skip-to-top is either positioned on the screen so as to be above the footer, or there should be a space within the footer for it to 'slot into' that has no other content.
• As the page design has margins with content centralised, if the skip-to-top is placed in the margin rather than over the content, it will not obscure any focusable elements.

Zoom

The most commonly highlighted user-problem with sticky elements found when searching the web involved higher zoom levels. Any implementation we make should be manually checked at different zoom on different devices.

Conclusion

• A sticky skip-to-top could be regarded as part of the footer such that this proposal is for a footer split into sticky (skip-to-top) and non-sticky (everything else) elements.
• to meet WCAG requirements, the skip-to-top must not obscure other focusable content at any time. This affects the design of the rest of the footer (so that is not obscured) as well the the page in general. One way to satisfy this is to have the skip-to-content in the margin rather than over the top of other content. We may also need to unfix the sticky content at some zoom/viewport sizes (see C34 above).
• Having a sticky skip-to-top means we will not be following technique C27 as the DOM order would not match the visual order. However, it is possible to achieve both the related success critiera (1.3.2 and 2.4.3) through other means. The skip-to-top should be in the DOM in same visual order as it would appear when the page no longer scrolls.
• Manual testing to include Zoom levels.

Further reading

Gov.uk: Sticky elements: functionality and accessibility testing

[StephDriver]

Design 1 - (non-sticky) skip-to-top at bottom of each horizontal section

• to be included at the bottom right of each horizontal section, as a distinct button type from the others (square rather than rounded) but otherwise following the 'quiet' style with the same colour text and background as the host section.
• where several section are grouped, it would only appear once in the bottom right of those within the group in landscape version, but in the equivalent on narrower screens, every horizontal section would have this in the bottom right corner.

[StephDriver]

Design 2 - Sticky skip-to-top in the margin

in the margin so as not to obscure other content.
It would need to show up against all sections (colour contrast).

I don't know how this can be done on mobile width without obscuring content.

[StephDriver]

@joemull I have updated here with an overview of the accessibility issues and mockups of the two design options. I cannot work out how to make the sticky version work on narrow screens without obscuring content or increasing the margin to the point where line length is extremely narrow.

[ajrbyers]

I think this is increasingly a distraction and we should, for now, just not bother.

[StephDriver]

I think this is increasingly a distraction and we should, for now, just not bother.

I agree. It is minor in the scheme of things... perhaps something to consider once the main nuts and bolts are all there!