Accessibility

Accessible back to top button requirements

Keep these considerations in mind if you're modifying the Design System or creating a custom component.

WCAG guidelines

1.1.1 Non-text Content

Provide a clear label for the button, such as "Back to top," along with a recognisable icon, if necessary (W3C, 2018).

1.4.10 Reflow

Ensure the 'Back to top' button remains fully visible and accessible when users zoom in up to 400% or use mobile and tablet screen sizes. Avoid fixed-positioning that can overlap or hide content, ensuring all page elements reflow naturally and maintain readability.

2.1.1 Keyboard

Ensure the 'Back to top' button is keyboard-accessible by making it focusable and providing a keyboard shortcut if necessary (W3C, 2018).

2.4.7 Focus Visible

Make sure the 'Back to top' button has a visible focus indicator when accessed using a keyboard (W3C, 2018).

3.2.4 Consistent Identification

Maintain a consistent design, appearance, and placement for the 'Back to top' button across all pages of the website.