Back to top link

[JovdP]

What

Back to top link component

Why

To Enable users to get back to the table of contents at the top of the page

Explain why you think this feature or content should be added to the ONS Design System.

• What evidence do you have that your ONS service needs it?
• What evidence do you have that it meets the needs of the users of that service?
• Have you checked if it’s already in the ONS Design System?
• Have you considered creating a new variant of an existing feature instead of something new?

Supporting material

Research from 2018 prototypes (DP to provide)

Include links to any examples, research, prototypes or code that support your proposal.

Contacts

The Design System working group has a weekly meeting. We will invite you to one of these meetings to give a show and tell about your proposal and answer any questions. Please tell us who to invite to that meeting. We recommend involving at least your product manager, user researcher and designer.

Display: Take users back to top

[armstrongb]

Current 'default state' of the back to top link:

A key line was added based on research conducted around Area Profiles. The key line helps to highlight the navigation item.

Originating designer: Will Richards
Source file: Figma
Page context used in research (attached)

[jrbarnes9]

@armstrongb Do you think this link could be "sticky" to avoid the visual repetition? I think we could probably still ensure it's focusable after each content block.

[emilymaylawes]

Accessibility considerations:

• Must be an anchor link that targets an anchor # to the top of the page. Either the <h1> of the page or the <main> content (alternative to skip to content). In that case, keyboard focus is managed.
• Must be the last link of the content so right at the end of the focus order within <main>, just above the footer.
• If sticky to the bottom or anywhere on the page, must not obscure any other content on all screen viewports and not obscure focus.
• Must not rely on JavaScript
• Should only have one on the page, rather than repeated
• If scroll-behaviour property in CSS is used, ensure we turn this off with @prefers-reduced-motion media query

[adi-unni]

Technical side:

• It can be added as an overlay by adjusting the z-index
• It can be added as a component to be added at the bottom of the page
• It can be added to fit within the page contents on the navigation sidebar
• Behavior can be modified depending on zoom level. If zoom is too high and nav sidebar disappears, then button can be moved to main content block

Dev Note: Adjusting the behavior to be controlled based on the presence of @media content max-width class

Any dynamic behavior can only be enabled through javascript. If javascript is enabled:

• component could be floating on the page
• hidden/revealed depending on the where the user is scrolled to on the page
  scrollable

Accessibility:

Keyboard users can already reach the top by tabbing at the end of the page or pressing the home button, unless they are in a text entry box. Does it meet accessibility requirement: https://www.w3.org/WAI/standards-guidelines/act/rules/0ssw9k/proposed/ if this is the case.

Needs to be compatible with VoiceOver when used and is not hidden i.e. when the user has scrolled more than 4 screens down the webpage and the button becomes available to click.

Further considerations:

• Link styled as a button/button or as styled as a link/link
• Primary location / (optional) secondary location
• If the button is an overlay, will it be transparent/ translucent , or otherwise. Adjusting transparency may make it more visible when covering other content
• Will the button be visible all the time, when user has scrolled to a particular or only at the end of the page

NNG recommendations are for the button to be placed in the bottom right as this is where the users expect it to be. Implication is for it to be hovering over content.
https://www.nngroup.com/articles/back-to-top/

Other Versions:
Intelligence community DS:
https://design.sis.gov.uk/components (Button is a floating component featured in the bottom right)
Scottish Gov DS:
https://designsystem.gov.scot/components/back-to-top (Button is a floating component found in the bottom right)
Gov UK DS:
https://design-system.service.gov.uk/components/back-link/#top (Button is a floating component found in the sidebar navigation - on magnification 400%, it merges with main content block
Gov UK DS style 2:
https://www.gov.uk/guidance/redundancy-help-finding-work-and-claiming-benefits#contents

[Majsol]

https://www.ons.gov.uk/economy/grossdomesticproductgdp/bulletins/quarterlynationalaccounts/apriltojune2023
https://www.ons.gov.uk/peoplepopulationandcommunity/crimeandjustice
https://ids-en-preview-dev.gcp.onsdigital.uk/how-to-access-the-integrated-data-service#

[yatesn]

Decision on next steps needed - Joe and Dina to review

[Majsol]

There are several products interested in implementing the "back to top" component so the considerations above will be presented at the design crit session on tuesday... and hopefully we will reach a decision that accommodates most products.

[Majsol]

Waiting for feedback from IDS (Alan and Aurora)

[JNATION85]

Can we go ahead with the development that Adi has done.

[adi-unni]

Display - Building a back to top button

[JNATION85]

Need to get some content and page structure to preview on the DS

[daniellecorke]

Content design request added to the UCD centralised backlog.

[adi-unni]

The width of the BTT button is currently set to the width of the last sibling element in the HTML e.g. if the element above it is a grid, then the width will match that. Here are a couple examples of this behaviour:

When the window is smaller, the highlighted section looks like this:

The proposed change would make the highlighted state look like the skip to content header when highlighted i.e full page width. Here are some examples of this:

With a similar look on smaller pages:

However on larger window sizes the look of the button looks like this:

as compared to this:

From a UX standpoint, what would be the best thing to do here @JNATION85 @Majsol ?

[JNATION85]

@adi-unni Full width is fine :)