Scroll to Top: Does it Need to be Accessible?
Recently, we asked the accessibility practitioners a question about scroll to top button on LinkedIn which prompted an article “Scroll to top: Where should the focus land?” Most of the accessibility members in the community voted to move the focus to skip to content link & the developer of the Kadence theme for WordPress implemented the same
But a larger discussion started with few members of the Hello Accessibility community as to whether the scroll to top button must be accessible to keyboard & assistive technology users. here are the arguments that were made:
- The scroll to top element is a floating icon that appears only when pointer of the mouse scrolls to a section of the page. This enables mouse user with smooth scroll that takes focus to top of the page. However, Keyboard only users & assistive technology users are presented the scroll to top button at the end of the page, technically the last element in the DOM. Sometimes, the button appears at the end of the main content or between the main content and the footer.
- On the other hand, assistive technology users have their shortcut keys to navigate to each element on the page. For example, a screen reader user can press control+home & move to the top of the page.
- Keyboard & switch users when reaching the last element on the page have to just press tab, move to the address bar & then move to the page content. Here the keyboard users’ focus first lands on the skip to content link.
Given these two user groups and use cases, I believe the scroll to top button is not helpful to them. I am sure any functionality that is available to mouse users must be available to keyboard and AT users. But do we go by this rulebook or step out of the line and consider the alternatives? Do we really validate whether a particular UI component serves its purpose for a keyboard and AT user groups before failing for accessibility?
As this is more of a broader question, I would like to hear thoughts from the community
- Do we need to even expose the scroll to top button to keyboard & assistive technology user groups?
- If the scroll to top element is not being exposed, do we need to fail against accessibility guidelines?
Let the thoughts pour in as comments, from you all!
The goal of any application is to make sure it is usable to all user groups. So, I would like to get some thoughts from the community on how to optimize usability & still achieve accessibility.
Contributors
During my interaction with these interesting accessibility & user experience professionals the discussion of scroll to top took a turn which prompted this article.
I fully agree to have this option also for keyboard / screen reader users, at least when reach end of the page. This will help to move on top.
All functionality should be accessible to all user groups. So IMO that also includes the scroll to top button. Just because keyboard and AT users have other means of moving to the top, the scroll to top button shouldn’t be hidden from them. It should be up to the user to decide which functionality to use.
I would start from here, as in many functionalities there are multiple ways to reach the destination. In my opinion, if such a case occurs then always follow the rule book. Following the rule book does not mean that we are not thinking out of the box, though if we are not making a keyboard accessible then it’s not exactly a failure, yes if we are making this keyboard accessible then it also is not harming anything and providing one more option.
And our entire objective is not only thinking about the power user but also other users who are not so much familiar with tools. So, making it accessible is a much better option compared to not making it.