Back to top
Back to top
Easy to use for everyone
The button is located on the bottom right-hand side of a page. This is where users expect to see the button and it's out of the way of most other page content and navigational elements.
The button targets the main landmark in order to move focus to the top of the content and not require keyboard users to tab through all other navigational components.
We’ve made sure the component is WCAG compliant with movable interaction and keyboard accessible elements. When using the back to top button, no motion is applied to the automatic scroll.
The icon-only variant was created to be more accessible on zoom, as the text label on the default variant may obscure page content. The addition of the tooltip allows the label to be displayed on hover or focus.
For Assistive Technology
Even for short screens, the recommendation is to use a back to top button as it provides people using assistive technology a way to quickly get back to the top of the content.
Based on
The back to top component has been based on the following resources:
-
Back to top , Nielsen Normal Group, accessed March 2022. -
Scrollable element is keyboard accessible , W3, accessed March 2022. -
2.3.3 Animation from interactions , W3, accessed March 2022. -
2.1.1 Keyboard , W3, accessed March 2022. -
2.1.3 Keyboard No Exception , W3, accessed March 2022.
Testing
We’ve tested this component against WCAG 2.2 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.