<main>
, just above the footer.Closed JovdP closed 4 months ago
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)
@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.
Accessibility considerations:
<h1>
of the page or the <main>
content (alternative to skip to content). In that case, keyboard focus is managed.<main>
, just above the footer.scroll-behaviour
property in CSS is used, ensure we turn this off with @prefers-reduced-motion
media queryDev 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:
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:
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
Decision on next steps needed - Joe and Dina to review
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.
Waiting for feedback from IDS (Alan and Aurora)
Can we go ahead with the development that Adi has done.
Display - Building a back to top button
Need to get some content and page structure to preview on the DS
Content design request added to the UCD centralised backlog.
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 ?
@adi-unni Full width is fine :)
What
Back to top link component
Why
To Enable users to get back to the table of contents at the top of the page
Supporting material
Research from 2018 prototypes (DP to provide)
Contacts
Display: Take users back to top