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.

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.

The back to top component has been based on the following resources:

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.