To start off, ensure that your component is user-friendly by following the Back-to-Top Button Design Guidelines provided by NNg. This sets a strong foundation for accessibility. Special thanks to @outis for the suggestion.
When implementing a Back to Top component, it's important to consider various accessibility factors.
Creating an Accessible Name
Every interactive element should have an accessible name that not only aids screen reader users but also helps voice control users identify the button. Providing descriptive alternative text is essential.
Adding Text for Sighted Users
In addition to alternative text, consider adding a tooltip with the title attribute for sighted users. However, do not rely solely on tooltips for accessibility as screen readers may not interpret them accurately.
It's even better to have the text visibly present for all users, as some individuals may struggle with interpreting icons alone.
Make sure that the visible text is included in the accessible name (alt text) and add role="presentation" to the SVG if there is accompanying text next to it.
https://i.sstatic.net/U3IST.png
This example from the GOV.UK Design System Guidelines demonstrates their commitment to accessibility by placing the component before the footer on lengthy pages.
Checking Contrast
Verify that the icon and text contrast against the background meets the recommended 4.5:1 ratio or higher, considering color combinations specified in your CSS.
Avoiding Icon-Fonts
Avoid using icon-fonts as they can cause issues for users with reading disorders who customize font settings. Opt for other solutions that provide clear visuals.
Animating Scroll Responsibly
When incorporating animated scroll effects, such as smooth scrolling, proceed with caution to prevent discomfort for users sensitive to motion animations. Consider the user's preferences regarding reduced motion.
Ensuring Focus
Place the back-to-top button in the tab order near the footer, ensuring it remains visible at all times. Make keyboard focus indicators clearly visible for interactive elements to assist keyboard users in navigation.
If the button disappears when reaching the top of the page, redirect focus elsewhere to avoid losing focus entirely.
Following WCAG Guidelines
Refer to the Web Content Accessibility Guidelines (WCAG) for additional criteria that may apply to your component. Conduct audits using tools like the WCAG-EM Report Tool to ensure compliance with accessibility standards mandated in many regions.