Watch Out for Smooth Scroll

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.

Smooth scroll is achieved through JavaScript and CSS animations, which create the illusion of seamless movement. Many sighted people prefer the more fluid transitions smooth scroll provides. However, it can pose significant issues for screen readers and keyboard-only users if not correctly coded.

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.

1. Visit the website you want to test.
2. 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).
3. Press the Enter/Return key to follow the link.
4. The website should visually scroll down.
5. Identify the next focusable element on the page below where the website visually scrolled down to – this will be a button or a link.
6. 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.

Devs: Add focus() to the JavaScript

If you want to fix the smooth scroll to be accessible, you can add the focus() method into your JavaScript to explicitly set the keyboard focus to the target element, after temporarily making the element keyboard focusable.

Essentially, you do this by:

1. 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).
2. Use the focus() method to shift the keyboard focus.
3. Use removeAttribute(“tabindex”) to take the element out of the focus order.

Here is a CodePen that shows how this works:

https://codepen.io/amberhinds/pen/WNLPEOE

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.