Smooth scroll is a website feature that enhances the way users navigate through a website's content. It refers to the visual effect of gradually and smoothly moving from one part of a webpage to another instead of an abrupt jump when following a link to another section of the same page.
Do the websites you build have “smooth scroll” on them? If so, here’s a 10-second test to see if smooth scroll is breaking accessibility – try it right now.
How to Test if Smooth Scroll is Breaking Accessibility on a Website
Here’s how you can quickly see if the focus has been appropriately managed in smooth scroll on a website.
- Visit the website you want to test.
- Hit the Tab key to get to the “Skip to Content” link (if the website doesn’t have skip links, you can test with any anchor link).
- Press the Enter/Return key to follow the link.
- The website should visually scroll down.
- Identify the next focusable element on the page below where the website visually scrolled down to – this will be a button or a link.
- Hit the Tab key again and see if your focus goes to that next focusable element.
If your focus goes to the next element when you hit Tab, the developer correctly coded the smooth scroll.
If your focus goes to an element higher up on the page (the next focusable element after the link you initially followed), then the developer has failed to manage focus, and you have just found an accessibility problem.
Example Testing Video
Here’s a 2-minute video that shows how to do this test and both correct and incorrect focus management.
In the video, I demonstrate how the smooth scrolling option in the Astra theme breaks the site’s “skip to content” link. With smooth scrolling turned on, the skip link visually appears to scroll down to the content, but is entirely nonfunctional for screen reader and keyboard users. Turning off smooth scrolling fixes the problem.
How To Make Smooth Scroll Accessible
Easy: Just Turn It Off
If you’re non-technical or moving fast, the easiest fix is to disable smooth scrolling.
This visual effect is not worth breaking the skip and anchor links on your website for blind people and people who use a keyboard alone to navigate the web. So, if you can turn off smooth scrolling in your theme or the plugin adding it, that’s a fast and easy fix.
It’s also helpful to report the issue to the plugin or theme developer, as I did for the issue in Astra.
Essentially, you do this by:
- Using setAttribute(“tabindex”, “-1”) to make the element focusable (even if it usually would not be because it’s a div, header, or another noninteractive element).
- Use the focus() method to shift the keyboard focus.
- Use removeAttribute(“tabindex”) to take the element out of the focus order.
Here is a CodePen that shows how this works:
Check Your Websites Now
Smooth scroll can enhance the overall user experience by making in-page navigation more visually pleasing, but make sure it doesn't negatively impact your website’s accessibility.
Failure to shift keyboard focus when smooth scrolling is a widespread accessibility mistake I frequently see when testing WordPress websites. If you have smooth scrolling on your websites, there’s a good chance that it’s causing accessibility problems on your website.
Proper implementation of smooth scroll should maintain keyboard focus and ensure that all users can navigate the site effectively.
Not sure if your smooth scroll is working right? Test it now, then let us know in the Facebook comments what WordPress theme or plugin you’re using and if they’re doing it right.
Join the Conversation!
There's a dedicated thread on this post inside of The Admin Bar community. Join in on the conversation, ask questions, and learn more!Group Thread